var itemIndex = 3;
var isExpanded = false;
var root = "";

$(document).ready(function() {
    $('#carousel_scroll').jcarousel();

    $('#car_acti').bind('click', 1, handleItemClick);
    $('#car_slims').bind('click', 2, handleItemClick);
    $('#car_flexia').bind('click', 3, handleItemClick);
    $('#car_barely').bind('click', 4, handleItemClick);
    $('.more-btn').bind('click', handleMoreBtnClick);
    $('.close-btn').bind('click', handleCloseBtnClick);

    $('#newPackageBtn').bind('click', handleMoreBtnClick);
    showContent();
});
function handleMoreBtnClick(event) {
    event.preventDefault();
    $('.more-btn').hide();
    expand();
    showExpandedContent();
    showCloseBtn();
}
function handleCloseBtnClick(event) {
    event.preventDefault();
    $('.close-btn').hide();
    $('.more-btn').show();
    hideExpandedContent();
    collapse();

}
function collapse() {
    $('.jcarousel-container').animate({
        top: "53px"
    }, 500);
    $('#home').animate({
        height: "442px"
    }, 500);
    $('.back').animate({
        height: "1px"
    }, 480);
    isExpanded = false;
}
function expand() {
    $('.close-btn').css({ 'top': (itemIndex == 2) ? "720px" : (itemIndex == 4) ? "664px" : "580px" });

    if ($.browser.msie && $.browser.version.substr(0, 1) == "6") {
        $('.jcarousel-container').animate({ top: (itemIndex == 2) ? "41px" : (itemIndex == 4) ? "41px" : "41px" }, 500);
    }
    else {
        $('.jcarousel-container').animate({ top: (itemIndex == 2) ? "450px" : (itemIndex == 4) ? "383px" : "303px" }, 500);
    }

    $('#home').animate({ height: (itemIndex == 2) ? "920px" : (itemIndex == 4) ? "880px" : "800px" }, 500);
    $('.back').animate({ height: (itemIndex == 2) ? "426px" : (itemIndex == 4) ? "359px" : "279px" }, 480);

    isExpanded = true;
}
function showCloseBtn() {
    $(".close-btn").fadeIn('slow');
}
function showExpandedContent() {
    $(".expanded-content .content" + itemIndex).fadeIn('slow');
} function hideExpandedContent() {
    $(".expanded-content .content" + itemIndex).hide();
}
function handleItemClick(event) {
    hideContent();
    if (isExpanded) {
        expand(); // Re-expanding to reset the height
        hideExpandedContent();
    }
    itemIndex = event.data;
    showContent();

    if (isExpanded) {
        expand(); // Re-expanding to reset the height
        showExpandedContent();
    }
    if (itemIndex == 1 && !isExpanded) {
        $('p.moreBtn').css('color', '#ffffff');
    }
    else if (!isExpanded) {
        $('p.moreBtn').css('color', '#EC0086');
    }

}
function showContent() {
    $('.jcarousel-item-' + itemIndex).addClass('pink-back');
    var imgFile = root + 'img/car_thumb_' + itemIndex + '_pink.png';
    $('.jcarousel-item-' + itemIndex + ' img').attr('src', imgFile);
    $('.banner').attr('src', root + 'img/car_banner_' + itemIndex + '.jpg');
    $(".content .content" + itemIndex).fadeIn('slow', function() {
        //need to fix ie png again
        if (typeof DD_belatedPNG != "undefined") {
            //DD_belatedPNG.fix('div');
            //DD_belatedPNG.fix('img');
            $(".jcarousel-container img").each(function() {
                //alert("fixing");
                //$(this).css("filter", "progid: DXImageTransform.Microsoft.Alpha(opacity = 0)");
                //$(this).css("behavior", "url(iepngfix.htc)");
            });
        }
    });

    var title = "";
    switch (itemIndex) {
        case 1:
            title = 'CAREFREE ACTI-FRESH Liners';
            break;
        case 2:
            title = 'CAREFREE SLIMS Tampons';
            break;
        case 3:
            title = 'CAREFREE FLEXIA Tampons';
            break;
        case 4:
            title = 'CAREFREE BARELY THERE Liners';
            break;
    }
    $('.banner').attr('alt', title);
    $('.banner').attr('title', title);

    toggleVideo(itemIndex == 1);

}
function hideContent() {
    $('.jcarousel-item-' + itemIndex).removeClass('pink-back');
    $('.jcarousel-item-' + itemIndex + ' img').attr('src', root + 'img/car_thumb_' + itemIndex + '_white.png');
    $(".content .content" + itemIndex).hide();
}


function toggleVideo(show) {
    if (show) {
        var tryCount = 5;
        //fading in/out doesn't work because flowplayer throws exceptions when this occurs, so we'll move it in/out of the page
        $("#actiFreshVideo .videoContainer").css("top", "40px");
        //since flowplayer may not be activated on initial ready (since they fire at diff times, we'll setTimeout until it's available)
        var currTry = 1;
        var playVideo = function() {
            if (currTry <= tryCount) {
                currTry++;
                if ($("#actiFreshVideo .videoPlayer").flowplayer(0) != null) {
                    $("#actiFreshVideo .videoPlayer").flowplayer(0).play();
                }
                else {
                    //recurse
                    setTimeout(playVideo, 1000);
                }
            }
        }
        playVideo();
    }
    else {
        //hide the video player
        if ($("#actiFreshVideo .videoPlayer").flowplayer(0)) {
            $("#actiFreshVideo .videoPlayer").flowplayer(0).stop();
        }

        $("#actiFreshVideo .videoContainer").css("top", "-4000px");

    }
}