var fadeTime = 1200;
var swapDelay = 5000;

var heroTimeout;

$(document).ready(function () {

    // PNG Fix for IE6
    $(document).pngFix();

    // Center align the main menu
    var mainNavInnerWidth = 0;
    $("#mainNav li").each(function () {
        mainNavInnerWidth += $(this).width();
    });
    $("#mainNav").css("padding-left", (960 - mainNavInnerWidth) / 2);

    // Add the 'last visited...' text to the right hand column if it is in the left hand column
    if ($("h3.lastVisited").length == 1)
        $("#callUsNow h2").after($("<h3/>").addClass("lastVisited").text("Visited by us..."));

    // Background image
    $("body").prepend($('<div id="siteBg"><img src="images/other/siteBg.jpg" /></div>'));
    $("#siteBg img").css("display", "none").load(function () {
        $(this).css("display", "block");
        positionBg();
        $(window).resize(positionBg);
    });

    // Hide/show gift vouchers/special offers
    var showSpecialOffers = true;
    var showGiftVouchers = false;
    var pageUrl = this.location.href.toLowerCase().substring(this.location.href.lastIndexOf("/") + 1);
    $("ul#leftHandNav > li > ul > li > ul > li > a").each(function () {
        if ($(this).attr("href").toLowerCase() == pageUrl)
            showGiftVouchers = true;
    });
    if (pageUrl == "display_text.asp?param=special-offers")
        showGiftVouchers = true;

    if (showGiftVouchers)
        showSpecialOffers = false;

    if (showSpecialOffers) $("#specialOffers").show();
    else $("#specialOffers").hide();

    if (showGiftVouchers) $("#giftVouchers").show();
    else $("#giftVouchers").hide();

    // Fix the lack of :hover in IE7
    $("ul#mainNav > li").hover(function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); });

    // Track the main menu
    $("ul#mainNav a").click(function () {
        _gaq.push(["_trackEvent", "Main menu", "Main menu: " + $(this).text()]);
    });

    // Track the left hand menu
    $("ul#leftHandNav a").click(function () {
        _gaq.push(["_trackEvent", "Left hand menu", "Left hand menu: " + $(this).attr("title")]);
    });

    // Track special offer clicks in right hand menu
    $("#specialOffers li a").click(function () {
        _gaq.push(["_trackEvent", "Right hand column", "Special offer click", "Index: " + $(this).parent().prevAll()]);
    });

    // Track special offer see all in right hand menu
    $("#specialOffers p.mainCta a").click(function () {
        _gaq.push(["_trackEvent", "Right hand column", "See all special offers"]);
    });

    // Track ATOL logos
    $("#headerAtol").click(function () {
        _gaq.push(["_trackEvent", "Header", "ATOL click"]);
    });
    $("#atolProtected p.mainCta a").click(function () {
        _gaq.push(["_trackEvent", "Right hand column", "ATOL click"]);
    });
    $("#footerAtol").click(function () {
        _gaq.push(["_trackEvent", "Footer", "ATOL click"]);
    });



    $("ul#leftHandNav a").each(function () {

        $(this).attr("title", $(this).text());

        if ($(this).text().indexOf("*") > -1) {
            var im = $("<img/>").attr("src", "images/other/starRating.png").attr("alt", "Star rating");

            var num = $(this).text().substring(0, $(this).text().indexOf("*"));

            var desc = $(this).text().substring($(this).text().indexOf("*") + 1);
            $(this).text(num).append(im).append(desc);
        }
    });


    // Hero (home page)
    $("#hero li:eq(0)")
                .addClass("selected");
    $("#hero li:gt(0)")
                .hide();
    heroInterval = setTimeout(swapHero, swapDelay);

    // Hotel page images
    $("ul#largeHotelImages li:eq(0)")
            .addClass("selected");
    $("ul#largeHotelImages li:gt(0)")
            .hide();
    $("#smallHotelImages li:eq(0)")
            .addClass("selected");
    $("#smallHotelImages li:gt(0)")
            .css("opacity", 0.5);

    $("#smallHotelImages li").hover(function () {

        $(this).addClass("over").animate({ opacity: 1 }, 100);

    }, function () {

        $(this).removeClass("over");

        if (!$(this).hasClass("selected"))
            $(this).animate({ opacity: 0.5 }, 100);

    });

    $("#smallHotelImages li").click(function () {
        if (!$(this).hasClass("selected")) {
            var index = $(this).prevAll().length;

            if (index < $("ul#largeHotelImages li").length) {

                $("#smallHotelImages li.selected").removeClass("selected").animate({ opacity: 0.5 }, 100);
                $(this).addClass("selected");

                $("ul#largeHotelImages li.selected").removeClass("selected").fadeOut(fadeTime);
                $("ul#largeHotelImages li:eq(" + index + ")").addClass("selected").fadeIn(fadeTime);
            }
        }
    });

    $("#moveUp").click(function () {
        if ($(this).hasClass("enabled")) {

            $(this).removeClass("enabled")

            var numberScrolled = Number($("#smallHotelImages li:eq(0)").css("top").replace("px", "")) / 55;

            var numberToScroll = $("#smallHotelImages li").length + numberScrolled - 5;
            if (numberToScroll > 5)
                numberToScroll = 5;
            $("#smallHotelImages li").each(function () {

                var animationCallback = function () { };
                if ($(this).nextAll().length == 0)
                    animationCallback = setThumbScrollerVisibility;

                var topOld = Number($(this).css("top").replace("px", ""));
                $(this).animate({ "top": topOld - (numberToScroll * 55) + "px" }, numberToScroll * 100 + 300, 'easeInOutQuart', animationCallback);
            });
        }
    });
    $("#moveDown").click(function () {
        if ($(this).hasClass("enabled")) {

            $(this).removeClass("enabled")

            var numberScrolled = -Number($("#smallHotelImages li:eq(0)").css("top").replace("px", "")) / 55;

            var numberToScroll = numberScrolled;
            if (numberToScroll > 5)
                numberToScroll = 5;

            $("#smallHotelImages li").each(function () {
                var animationCallback = function () { };
                if ($(this).nextAll().length == 0)
                    animationCallback = setThumbScrollerVisibility;

                var topOld = Number($(this).css("top").replace("px", ""));
                $(this).animate({ "top": topOld + (numberToScroll * 55) + "px" }, numberToScroll * 100 + 300, 'easeInOutQuart', animationCallback);
            });
        }
    });

    $("ul#largeHotelImages").click(setThumbScrollerVisibility);

    setThumbScrollerVisibility();
});

function setThumbScrollerVisibility() {

    if ($("ul#largeHotelImages li").length > 0 && $("#smallHotelImages li").length > 0) {
        var scrollOffset = Number($("#smallHotelImages li:eq(0)").css("top").replace("px", "")) / 55;

        if (scrollOffset > 0 || scrollOffset + $("#smallHotelImages li").length > 5)
            $("#moveUp").addClass("enabled").animate({ opacity: 1 }, 200);
        else
            $("#moveUp").removeClass("enabled").animate({ opacity: 0.2 }, 200);

        if (scrollOffset < 0 || scrollOffset + $("#smallHotelImages li").length < 4)
            $("#moveDown").addClass("enabled").animate({ opacity: 1 }, 200);
        else
            $("#moveDown").removeClass("enabled").animate({ opacity: 0.2 }, 200);
    }
}

function positionBg() {
    var siteBgContainer = $("#siteBg").width("100%");
    var siteBgImage = $("#siteBg img");

    if (siteBgContainer.width() > 1280)
        siteBgImage.width(siteBgContainer.width()).css("left", 0);
    else {

        if (siteBgContainer.width() < 964)
            siteBgContainer.width(964);

        siteBgImage.width(1280).css("left", "-" + ((siteBgImage.width() - siteBgContainer.width()) / 2) + "px");
    }

    siteBgContainer.height(siteBgImage.height());
}

function swapHero() {

    var next = $("#hero li.selected").next();

    if (next.length == 0) {
        next = $("#hero li:eq(0)");
    }

    $("#hero li.selected").fadeOut(fadeTime, null, function () { heroInterval = setTimeout(swapHero, swapDelay); }).removeClass("selected");
    $(next).fadeIn(fadeTime).addClass("selected");
}