/*  */

// ---------------------------

// for testing and showing dropdown in NON-IE browsers
$(window).load(function () {
	if (parseQuery("ie6")) { $("#homepage").append('<link href="App_Master/js/ie_upgrade/ie_upgrade.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="App_Master/js/cookies/jquery.cookie.js"></script><script type="text/javascript" src="App_Master/js/ie_upgrade/ie_upgrade.js"></script>'); }
})

// ---------------------------

$(document).ready(function () {
    /*trigger banner impression*/
    var bannerImpression = function (current) {
        var product =
                $("#mini_carousel_list" + current + " .slides_container li").filter(function () {
                    return $(this).css('display') != 'none';
                }).attr('trackingid');

        s.linkTrackVars += ',events,products';
        s.linkTrackEvents = 'event7';
        s.products = ';' + product;
        s.events = 'event7';
        s.tl(this, 'o', 'Banner Impression');
        _gaq.push('_trackEvent', 'Promotional Banners', product + ' - Impression', 'Home');
    };

    var bannerClick = function (current) {
        var product =
                $("#mini_carousel_list" + current + " .slides_container li").filter(function () {
                    return $(this).css('display') != 'none';
                }).attr('trackingid');

        s.linkTrackVars += ',events,products';
        s.linkTrackEvents = 'event5';
        s.products = ';' + product;
        s.events = 'event5';
        s.tl(this, 'o', 'Banner Click');
        _gaq.push('_trackEvent', 'Promotional Banners', product + ' - Click', 'Home');
    };

    var iteration = 0;
    /* outer carousel*/
    $('#big_slides').slides({
        effect: 'slide',
        pause: 500,
        slideSpeed: 1500, // transition speed between slides
        play: 14000, 		// view slide for X seconds
        hoverPause: true,
        crossfade: true,
        generatePagination: false,
        generateNextPrev: true,
        container: 'big_slides_container',
        next: 'big_next',
        prev: 'big_prev',
        // change background slide
        animationStart: function (current, next) { backStr(path + imgs[next] + ext); },
        animationComplete: function (current) {
            if (current == 1)
                iteration++;

            if (iteration <= 1)
                bannerImpression(current);
        }
    });

    // ----------------------------------------------------------------------------------------------------

    // prepare background images
    imgs = ["bg_activia", "bg_light", "bg_french", "bg_greek"];
    path = "/App_Master/images/home/bgs/";
    ext = "970.jpg";
    bkImg = path + imgs[0] + ext;

    function backStr(i) { $.backstretch(i, { centeredY: false, speed: 1500 }); }

    backStr(bkImg);

    // ----------------------------------------------------------------------------------------------------

    $(".tips_carousel_container").slides({
        effect: 'switch',
        pause: 500,
        slideSpeed: 1250, // transition speed between slides
        play: 8000, 		// view slide for X seconds
        hoverPause: true,
        generatePagination: false,
        container: 'tips_carousel'
    });


    // --------------------------------------
    // cheat to get height for hidden tips
    var tc1 = '#tips_carousel1';
    var s1 = $(tc1 + " ul").attr("style"),
		s2 = $(tc1 + " .slides_control").attr("style"),
		s3 = $(tc1 + " li").attr("style").replace(/filter\: *alpha\(opacity\=0\)\;/g, "").replace(/ ?opacity: ?0;/, ""); ;
    //alert(s1+ "\n" + s2 +"\n"+ s3);

    var tc2 = "#tips_carousel2";
    $(tc2 + " ul").attr("style", s1);
    $(tc2 + " .slides_control").attr("style", s2);
    $(tc2 + " li").attr("style", s3);

    var tc3 = "#tips_carousel3";
    $(tc3 + " ul").attr("style", s1);
    $(tc3 + " .slides_control").attr("style", s2);
    $(tc3 + " li").attr("style", s3);


    // --------------------------------------

    // mini carousel1
    var m1 = "#mini_carousel_list1"
    $(m1).slides({
        paginationPos: { "position": "absolute", "bottom": 15, "left": "center" },
        //paginationPos:{"compass":"s","position":"absolute"},
        effect: 'switch',
        preload: false,
        paginationClass: 'mini_pagination',
        container: 'slides_container',
        generateNextPrev: false,
        start: 1,
        animationComplete: function (current) {
            bannerImpression(1);
        }
    });

    // get styles from first promo carousel and use for other promo carousels
    // as elements with display:none have no dimensions
    // i recently saw a js out there that can take care of this, but can't remember where i saw it.
    slides_control = $(m1 + ' .slides_container .slides_control').attr("style");
    slides_control = eval("({" + slides_control.replace(/;/g, "").replace(/ ?([^:]+): ([^ ]+)/g, "\"\$1\":\"\$2\", ").replace(/,([^,]*)$/, "") + "})");
    slides_control["left"] = "0px";
    mini_pagination = $(m1 + ' .mini_pagination').attr("style");
    mini_pagination = eval("({" + mini_pagination.replace(/;/g, "").replace(/ ?([^:]+): ([^ ]+)/g, "\"\$1\":\"\$2\", ").replace(/,([^,]*)$/, "") + "})");

    // --------------------------------------
    // mini carousel2
    var m2 = "#mini_carousel_list2";
    $(m2).slides({
        paginationPos: { "position": "absolute", "bottom": 15, "left": "center" },
        effect: 'switch',
        preload: false,
        paginationClass: 'mini_pagination',
        container: 'slides_container',
        generateNextPrev: false,
        start: 2,
        animationComplete: function (current) {
            bannerImpression(2);
        }
    });

    $(m2 + ' .slides_container .slides_control').css(slides_control)
    $(m2 + ' .mini_pagination').css(mini_pagination)



    // --------------------------------------
    // mini carousel3
    var m3 = "#mini_carousel_list3";
    $(m3).slides({
        paginationPos: { "position": "absolute", "bottom": 15, "left": "center" },
        effect: 'switch',
        preload: false,
        paginationClass: 'mini_pagination',
        container: 'slides_container',
        generateNextPrev: false,
        start: 3,
        animationComplete: function (current) {
            bannerImpression(3);
        }
    });

    $(m3 + ' .slides_container .slides_control').css(slides_control)
    $(m3 + ' .mini_pagination').css(mini_pagination)


    // --------------------------------------
    // mini carousel4
    var m4 = "#mini_carousel_list4";
    $(m4).slides({
        paginationPos: { "position": "absolute", "bottom": 15, "left": "center" },
        effect: 'switch',
        preload: false,
        paginationClass: 'mini_pagination',
        container: 'slides_container',
        generateNextPrev: false,
        start: 4,
        animationComplete: function (current) {
            bannerImpression(4);
        }
    });

    $(m4 + ' .slides_container .slides_control').css(slides_control)
    $(m4 + ' .mini_pagination').css(mini_pagination)

    for (i = 1; i < 5; i++) {
        $("#mini_carousel_list" + i + " .slides_container li a").click(
            (function (val) {
                return function () {
                    bannerClick(val);
                };
            })(i)
        );
    }

    // ----------------------------------------------------------------------------------------------------

    /* 
    argh! force the browser to repaint the object by moving it one pixel, which corrects the VML offset bug 
    the bugfix is like kicking the refridgerator to get it stop making that annoying noise.

    for this double quirky bug to be fixed, it also relies on "-pie-poll:true;" to be applied to the element in CSS
    it seems to have to do with how IE "redraws" VML objects once they are placed on the page 
    and the page is completed (or something like that)
    apparently, there is some bug in IE7 where the browser canvas doesn't update itself enough, and this
    solution forces the canvas to be updated and fix the positioning of the VML object.
    */
    $('.ie7 .twotone_combobox').css('top', '-1px');


});