$(document).ready(function() {

    //======= Global Variables ==================
    var isNext = false;
    var isPrevious = false;
    var isClass;
    var imageWidth = 1435;
    var blueCallout = false; var YellowCallout = false;
    var imageSum = $("#scrollingImagesDiv div").size();
    var imageReelWidth = imageWidth * imageSum + 400;
    $(".scrollingImagesDiv").css({ 'width': imageReelWidth });

    //======= Callout hovers ==================

    $("span").filter('[btntype=spnCalloutBlue]').mouseover(function() {
        blueCallout = true; YellowCallout = false;
        var calloutDiv = $("span").filter('[btntype=spnCalloutBlue]').attr('btntype');
        var btnoffset = $(this).offset(); var offsetbtn = $(this).css("left");
        var topPosition = btnoffset.top - 65; var leftdiv = parseInt(offsetbtn) - 365;
        if (topPosition > 260) { var topnew = parseInt(topPosition) - 300; topPosition = topnew + topPosition; }
        $('div').filter('[name=div_' + calloutDiv + ']').css("left", leftdiv).css("top", topPosition);
        $('div').filter('[name=div_' + calloutDiv + ']').show();
    });


    //$(".ui-calloutContainer").mouseover(function () {
    //if(blueCallout){$("span").filter('[btntype=spnCalloutBlue]').addClass("ui-bluePlusHover"); }
    //if(YellowCallout){$("span").filter('[btntype=spnCalloutYellow]').addClass("ui-yellowPlusHover"); }
    //});
    //											 
    //$(".ui-calloutContainer").live("mouseout",function (e) {
    //	var calloutDiv= $("span").filter('[btntype=spnCalloutBlue]').attr('btntype');
    //	if(e.target.nodeName=="DIV")
    //	{
    //		$('div').filter('[name=div_'+calloutDiv+']').hide();
    //		$("span").filter('[btntype=spnCalloutBlue]').removeClass('ui-bluePlusHover');
    //	}else{$(this).show();}
    //});			


    $(".ui-calloutContainer").hover(function() {
        if (blueCallout) { $("span").filter('[btntype=spnCalloutBlue]').addClass("ui-bluePlusHover"); }
        if (YellowCallout) { $("span").filter('[btntype=spnCalloutYellow]').addClass("ui-yellowPlusHover"); }
    }, function() {
        var calloutDiv = $("span").filter('[btntype=spnCalloutBlue]').attr('btntype');
        $('div').filter('[name=div_' + calloutDiv + ']').hide();
        $("span").filter('[btntype=spnCalloutBlue]').removeClass('ui-bluePlusHover');

    });


    $("span").filter('[btntype=spnCalloutYellow]').mouseover(function() {
        YellowCallout = true; var blueCallout = false;
        var calloutDiv = $("span").filter('[btntype=spnCalloutYellow]').attr('btntype');
        var btnoffset = $(this).offset(); var offsetbtn = $(this).css("left");
        var topPosition = btnoffset.top - 65; var leftdiv = parseInt(offsetbtn) - 365;
        if (topPosition > 260) { var topnew = parseInt(topPosition) - 300; topPosition = topnew + topPosition; }
        $('div').filter('[name=div_' + calloutDiv + ']').css("left", leftdiv).css("top", topPosition);
        $('div').filter('[name=div_' + calloutDiv + ']').show();
    });

    $(".yellowCallout").live("mouseout", function(e) {
        var calloutDiv = $("span").filter('[btntype=spnCalloutYellow]').attr('btntype');
        if (e.target.nodeName == "DIV") {
            $(this).hide();
            $("span").filter('[btntype=spnCalloutYellow]').removeClass('ui-yellowPlusHover');
        } else { $(this).show(); }
    });

    $("span").filter('[btntype=spnCalloutYellow]').hover(function() {
        $(this).addClass("ui-yellowPlusHover");
    }, function() { $(this).removeClass("ui-yellowPlusHover"); });

    $("span").filter('[btntype=spnCalloutBlue]').hover(function() {
        $(this).addClass("ui-bluePlusHover");
    }, function() { $(this).removeClass("ui-bluePlusHover"); });
    //======= Learn more buttons hovers ==================
    $(".ui-btnLearnMoreImage").hover(function() {
        switch ($(this).attr("class")) {
            case "ui-btnLearnMoreImage ui-btnGreenDefault":
                $(this).removeClass("ui-btnGreenDefault").addClass("ui-btnGreenHover");
                break;
            case "ui-btnLearnMoreImage ui-btnBlueDefault":
                $(this).removeClass("ui-btnBlueDefault").addClass("ui-btnBlueHover");
                break;
            case "ui-btnLearnMoreImage ui-btnYellowDefault":
                $(this).removeClass("ui-btnYellowDefault").addClass("ui-btnYellowHover");
                break;
            case "ui-btnLearnMoreImage ui-btnPinkDefault":
                $(this).removeClass("ui-btnPinkDefault").addClass("ui-btnPinkHover");
                break;
        }
    },
function() {
    switch ($(this).attr("class")) {
        case "ui-btnLearnMoreImage ui-btnGreenHover":
            $(this).removeClass("ui-btnGreenHover").addClass("ui-btnGreenDefault");
            break;
        case "ui-btnLearnMoreImage ui-btnBlueHover":
            $(this).removeClass("ui-btnBlueHover").addClass("ui-btnBlueDefault");
            break;
        case "ui-btnLearnMoreImage ui-btnYellowHover":
            $(this).removeClass("ui-btnYellowHover").addClass("ui-btnYellowDefault");
            break;
        case "ui-btnLearnMoreImage ui-btnPinkHover":
            $(this).removeClass("ui-btnPinkHover").addClass("ui-btnPinkDefault");
            break;
    }

    switch ($(this).attr("class")) {
        case "ui-btnLearnMoreImage ui-btnGreenactivee":
            $(this).removeClass("ui-btnGreenactivee").addClass("ui-btnGreenDefault");
            break;
        case "ui-btnLearnMoreImage ui-btnBlueactivee":
            $(this).removeClass("ui-btnBlueactivee").addClass("ui-btnBlueDefault");
            break;
        case "ui-btnLearnMoreImage ui-btnYellowactivee":
            $(this).removeClass("ui-btnYellowactivee").addClass("ui-btnYellowDefault");
            break;
        case "ui-btnLearnMoreImage ui-btnPinkactivee":
            $(this).removeClass("ui-btnPinkactivee").addClass("ui-btnPinkDefault");
            break;
    }

});

    $(".ui-btnLearnMoreImage").mouseup(function() {
        switch ($(this).attr("class")) {
            case "ui-btnLearnMoreImage ui-btnGreenHover":
                $(this).removeClass("ui-btnGreenHover").addClass("ui-btnGreenactivee");
                break;
            case "ui-btnLearnMoreImage ui-btnBlueHover":
                $(this).removeClass("ui-btnBlueHover").addClass("ui-btnBlueactivee");
                break;
            case "ui-btnLearnMoreImage ui-btnYellowHover":
                $(this).removeClass("ui-btnYellowHover").addClass("ui-btnYellowactivee");
                break;
            case "ui-btnLearnMoreImage ui-btnPinkHover":
                $(this).removeClass("ui-btnPinkHover").addClass("ui-btnPinkactivee");
                break;
        }
    });

    //======= Sliding images js ==================
    var currentSlider = $("li.ui-slideractive").attr("tab");
    $("div").filter('[showhide=slidingContent]').hide();
    $("#sliderContent_" + currentSlider).show();
    $("#spnpreviousBtn").hover(function() { $(this).removeClass("ui-previousbtn").addClass("ui-previousactiveebtn"); clearInterval(play); },
function() { $(this).removeClass("ui-previousactiveebtn").addClass("ui-previousbtn"); rotateSwitch(); });

    $("#spnNextBtn").hover(function() { $(this).removeClass("ui-nextbtn").addClass("ui-nextactiveebtn"); clearInterval(play); },
function() { $(this).removeClass("ui-nextactiveebtn").addClass("ui-nextbtn"); rotateSwitch(); });

    if ($(window).width() >= 1152) { $(".ui-heroImages div").addClass("ui-heropos"); }

    var winWidth = $(window).width();
    $(".ui-heroImageContainer").width(winWidth);
    $(".ui-heroImageBg").width(winWidth);

    $(window).resize(function() {
        var winWidth = $(window).width();
        $(".ui-heroImageContainer").width(winWidth);
        $(".ui-heroImageBg").width(winWidth);
        if (winWidth >= 1435)
            $(".ui-heroImageContainer").addClass("ui-heroImageContainerWidth");
        else
            $(".ui-heroImageContainer").removeClass("ui-heroImageContainerWidth");

    });

    var defaultWidth = 1435;
    if (winWidth > 1435) { $(".ui-heroImageContainer").width(defaultWidth); $(".ui-heroImageBg").width(defaultWidth); }

    //===========Next button Sliding Animation   
    $("#spnNextBtn").click(function() {
        clearInterval(play); isNext = true;
        isClass = $("li.ui-slideractive").next().attr("tab");
        nextPreviousSlide(isClass);
        $("#spnpreviousBtn").removeClass('disabledPreviousBtn');
    });
    //===========Previous button Sliding Animation
    $("#spnpreviousBtn").click(function() {
        clearInterval(play); isPrevious = true;
        isClass = $("li.ui-slideractive").prev().attr("tab");
        nextPreviousSlide(isClass);
        $("#spnNextBtn").removeClass('disabledNextBtn');
    });
    //===========progress buttons Sliding Animation
    $("#divSlidingbullets li").hover(function() { $(this).addClass("ui-sliderHover"); },
function() { $(this).removeClass("ui-sliderHover"); });

    $("#divSlidingbullets li").click(function() {
        clearInterval(play); rotateSwitch();
        var selectedtab = $(this).attr("tab");
        var image_reelPosition2 = selectedtab * imageWidth;
        $("#scrollingImagesDiv").animate({ left: -image_reelPosition2 }, 500);
        $("#divSlidingbullets li").removeClass("ui-slideractive");
        $(this).addClass("ui-slideractive");
        $("div").filter('[showhide=slidingContent]').hide();
        $("#sliderContent_" + selectedtab).show();
    });
    //===========OnLoad Sliding Animation

    $active = $('#divSlidingbullets li.ui-slideractive');
    rotate = function() {
        var triggerID = $active.attr("rel") - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
        $("#divSlidingbullets li").removeClass('ui-slideractive'); //Remove all activee class
        $active.addClass('ui-slideractive'); //Add activee class (the $activee is declared in the rotateSwitch function)
        $("div").filter('[showhide=slidingContent]').hide();
        $("#sliderContent_" + triggerID).show();

        //Slider Animation
        $(".scrollingImagesDiv").animate({ left: -image_reelPosition }, 500);
        $(".ui-calloutContainer").hide();
    };

    //Rotation + Timing Event
    rotateSwitch = function() {
        play = setInterval(function() { //Set timer - this will repeat itself every 8 seconds
            $active = $('#divSlidingbullets li.ui-slideractive').next();
            if ($active.length === 0) { //If paging reaches the end...
                $active = $('#divSlidingbullets li:first'); //go back to first
                $("#spnNextBtn").removeClass('disabledNextBtn');
            }
            if ($active.length === 1) {
                $("#spnpreviousBtn").removeClass('disabledPreviousBtn');
            }
            rotate(); //Trigger the paging and slider function
        }, 8000); //Timer speed in milliseconds (8 seconds)
    };
    rotateSwitch(); //Run function on launch

    //=======Keyboard  move next previous function ======================//
    $(document.documentElement).keypress(function(event) {
        if (event.keyCode == 37) {
            isPrevious = true;
            isClass = $("li.ui-slideractive").prev().attr("tab");
            nextPreviousSlide(isClass);
        } else if (event.keyCode == 39) {
            isNext = true;
            isClass = $("li.ui-slideractive").next().attr("tab");
            nextPreviousSlide(isClass);
        }
    });
    //=======Next Previous button function ======================//
    function nextPreviousSlide(isClass) {
        $(".ui-calloutContainer").hide();
        var moveNext = isClass * 1435;
        if (isNext) { if ($("li.ui-slideractive").attr("tab") == 4) { $("#spnNextBtn").addClass('disabledNextBtn'); isNext = false; isPrevious = true; return false; } }
        if (isPrevious) { if ($("li.ui-slideractive").attr("tab") == 0) { $("#spnpreviousBtn").addClass('disabledPreviousBtn'); isPrevious = false; isNext = true; return false; } }
        $(".scrollingImagesDiv").animate({ left: -moveNext }, 500);
        $("#divSlidingbullets li").removeClass("ui-slideractive");
        $("#divSlidingbullets li").eq(isClass).addClass("ui-slideractive");
        $("div").filter('[showhide=slidingContent]').hide();
        $("#sliderContent_" + isClass).show();
    }

    $("#scrollingImagesDiv").hover(function() { clearInterval(play); },
function() { rotateSwitch(); });

    $("#sliderContent_0").hover(function() { clearInterval(play); },
function() { rotateSwitch(); });

    $("#sliderContent_1").hover(function() { clearInterval(play); },
function() { rotateSwitch(); });

    $("#sliderContent_2").hover(function() { clearInterval(play); },
function() { rotateSwitch(); });

    $("#sliderContent_3").hover(function() { clearInterval(play); },
function() { rotateSwitch(); });



    $("#frame1Btn").click(function() {
        location.href = '/LiveWell';
    });
    $("#frame2Btn").click(function() {
        location.href = '/LivePure';
    });
    $("#frame3Btn").click(function() {
        location.href = '/Promotions';
    });
    //=======document.ready ends here
});