//Define Object namespace in global scope for caching.
window.$bannerRotator =
{
    //variables
    rotateTime: 4000,
    crossFadeTime: 2000,
    locations: new Array(
                {
                    id: "birmingham",
                    imageUrl: "/Style%20Library/en-us/IM_Images/homepage/birmingham.jpg",
                    popupImageUrl: "/Style%20Library/en-us/IM_Images/homepage/map/birmingham-popup.gif",
                    popupWidth: 126,
                    popupHeight: 38,
                    popupText: "Birmingham Office - View full details"
                },
                {
                    id: "bristol",
                    imageUrl: "/Style%20Library/en-us/IM_Images/homepage/bristol.jpg",
                    popupImageUrl: "/Style%20Library/en-us/IM_Images/homepage/map/bristol-popup.gif",
                    popupWidth: 96,
                    popupHeight: 38,
                    popupText: "Bristol Office - View full details"
                },
                {
                    id: "glasgow",
                    imageUrl: "/Style%20Library/en-us/IM_Images/homepage/glasgow.jpg",
                    popupImageUrl: "/Style%20Library/en-us/IM_Images/homepage/map/glasgow-popup.gif",
                    popupWidth: 106,
                    popupHeight: 38,
                    popupText: "Glasgow Office - View full details"
                },
                {
                    id: "leeds",
                    imageUrl: "/Style%20Library/en-us/IM_Images/homepage/leeds.jpg",
                    popupImageUrl: "/Style%20Library/en-us/IM_Images/homepage/map/leeds-popup.gif",
                    popupWidth: 96,
                    popupHeight: 38,
                    popupText: "Leeds Office - View full details"
                },
                {
                    id: "london",
                    imageUrl: "/Style%20Library/en-us/IM_Images/homepage/london.jpg",
                    popupImageUrl: "/Style%20Library/en-us/IM_Images/homepage/map/london-popup.gif",
                    popupWidth: 96,
                    popupHeight: 38,
                    popupText: "London Office - View full details"
                },
                {
                    id: "manchester",
                    imageUrl: "/Style%20Library/en-us/IM_Images/homepage/manchester.jpg",
                    popupImageUrl: "/Style%20Library/en-us/IM_Images/homepage/map/manchester-popup.gif",
                    popupWidth: 124,
                    popupHeight: 38,
                    popupText: "Manchester Office - View full details"
                },
                {
                    id: "newcastle",
                    imageUrl: "/Style%20Library/en-us/IM_Images/homepage/newcastle.jpg",
                    popupImageUrl: "/Style%20Library/en-us/IM_Images/homepage/map/newcastle-popup.gif",
                    popupWidth: 116,
                    popupHeight: 38,
                    popupText: "Newcastle Office - View full details"
                },
                {
                    id: "sheffield",
                    imageUrl: "/Style%20Library/en-us/IM_Images/homepage/sheffield.jpg",
                    popupImageUrl: "/Style%20Library/en-us/IM_Images/homepage/map/sheffield-popup.gif",
                    popupWidth: 105,
                    popupHeight: 38,
                    popupText: "Sheffield Office - View full details"
                }

             ),

    arrayPointer: 0,

    //functions
    rotateToImage: function(index, speed) {
        if (index > ($bannerRotator.locations.length - 1)) {
            index = $bannerRotator.locations.length - 1
        }
        $bannerRotator.arrayPointer = index;
        $bannerRotator.rotate(speed);
    },

    rotateToNext: function(speed) {
        if ($bannerRotator.arrayPointer < $bannerRotator.locations.length - 1) {
            $bannerRotator.arrayPointer += 1;
        } else {
            $bannerRotator.arrayPointer = 0;
        }
        $bannerRotator.rotate(speed);
    },

    rotate: function(speed) {
        var newLocationId = $bannerRotator.locations[$bannerRotator.arrayPointer].id; //locationsArray[$bannerRotator.arrayPointer];
        $map.selectLocation(newLocationId);

        //setTimeout(function() {
        var image = $("#image");
        var overlay = $("#imageoverlay")
        image.css("background-image", "url(" + $bannerRotator.locations[$bannerRotator.arrayPointer].imageUrl + ")"); //imageArray[$bannerRotator.arrayPointer] + ")");
        var newImageUrl = image.css("background-image");

        overlay.fadeOut(speed, function() {
            overlay.css("background-image", newImageUrl);
            overlay.show();
        });
        //}, 700);


    },

    getLocationDataById: function(elementId) {
        for (i = 0; i < $bannerRotator.locations.length; i++) {
            if ($bannerRotator.locations[i].id == elementId) {
                return $bannerRotator.locations[i];
            }
        }
        return null;
    },

    getLocationIndexById: function(elementId) {
        for (i = 0; i < $bannerRotator.locations.length; i++) {
            if ($bannerRotator.locations[i].id == elementId) {
                return i;
            }
        }
        return 0;
    }

}

window.$map =
{
    // variables
    shown: false,
    hideDelayTimer: null,
    hideDelay: 200,
    fadeInSpeed: 500,
    fadeOutSpeed: 100,
    mouseOverPopup: false,
    changeBannerImageOnHover: false,

    //functions
    fadeInPopup: function(element) {
        var elementId = element.attr("id");
        //var linkUrl = element.attr("href");
        var locationData = $bannerRotator.getLocationDataById(elementId);
        var imageIndex = $bannerRotator.getLocationIndexById(elementId);

        if ($map.changeBannerImageOnHover) {
            $bannerRotator.rotateToImage(imageIndex, 500);
        }

        //hide any showing popups
        var shownPopups = $("div#map div.map-popup");
        shownPopups.fadeOut($map.fadeOutSpeed, function() { shown = false; shownPopups.remove(); });

        //create popup element
        var popupDiv = $("<div class=\"map-popup\">" + locationData.popupText + "</div>");
        popupDiv.css("width", locationData.popupWidth + "px");
        popupDiv.css("height", locationData.popupHeight + "px");
        popupDiv.css("background", "url(" + locationData.popupImageUrl + ") center center no-repeat");

        //set hover function on popup to keep it open.
        popupDiv.hover(function() {
            $map.mouseOverPopup = true;
        }, function() {
            $map.mouseOverPopup = false;
            $map.fadeOutPopup();
        });

        //set link
        popupDiv.click(function(e) {
            window.location.href = $(this).prev("a").attr("href");
        });

        //add popup to page
        element.after(popupDiv);

        //calculate position
        var position = element.position();
        var positionX = position.left;
        var positionY = position.top;
        popupDiv.css("top", (positionY - popupDiv.height()) + "px").css("left", ((positionX - Math.round(locationData.popupWidth / 2)) + 6) + "px");

        //and finally fade in
        popupDiv.fadeIn($map.fadeInSpeed, function() { $map.shown = true; });
    },

    fadeOutPopup: function() {
        var popupDiv = $("div#map div.map-popup");
        if ($map.hideDelayTimer) clearTimeout($map.hideDelayTimer);

        $map.hideDelayTimer = setTimeout(function() {
            $map.hideDelayTimer = null;
            if ($map.shown && !$map.mouseOverPopup) {
                var popupDiv = $("div#map div.map-popup");
                popupDiv.fadeOut($map.fadeOutSpeed, function() { shown = false; popupDiv.remove(); });
            }
        }, $map.hideDelay);
    },

    selectLocation: function(locationId) {
        $("div#map a").css("background-image", "url(/Style%20Library/en-us/IM_Images/homepage/map/dot.gif)");
        $("div#map a#" + locationId).css("background-image", "url(/Style%20Library/en-us/IM_Images/homepage/map/dot-selected-orange.gif)");
    }

}

function preload(arrayOfImages) {
    $(arrayOfImages).each(function() {
        $("<img/>")[0].src = this;
    });
}

$(document).ready(function () {
    //wire up click for more info seo link in footer
    $("a.moreinfo").click(function (e) {
        var panel = $("div#moreInfo");
        panel.toggle();
        /*if (panel.css("display") == "none") {
        panel.css("display", "block");
        } else {
        panel.css("display", "none");
        }*/
        return false;
    });

    //set up spry dropdown nav
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", { imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight: "SpryAssets/SpryMenuBarRightHover.gif" });
});


$(window).bind("load", function() {

    //preload images for banner rotator and map
    preload(["/Style%20Library/en-us/IM_Images/homepage/birmingham.jpg",
            "/Style%20Library/en-us/IM_Images/homepage/map/birmingham-popup.gif",
            "/Style%20Library/en-us/IM_Images/homepage/bristol.jpg",
            "/Style%20Library/en-us/IM_Images/homepage/map/bristol-popup.gif",
            "/Style%20Library/en-us/IM_Images/homepage/glasgow.jpg",
            "/Style%20Library/en-us/IM_Images/homepage/map/glasgow-popup.gif",
            "/Style%20Library/en-us/IM_Images/homepage/leeds.jpg",
            "/Style%20Library/en-us/IM_Images/homepage/map/leeds-popup.gif",
            "/Style%20Library/en-us/IM_Images/homepage/london.jpg",
            "/Style%20Library/en-us/IM_Images/homepage/map/london-popup.gif",
            "/Style%20Library/en-us/IM_Images/homepage/manchester.jpg",
            "/Style%20Library/en-us/IM_Images/homepage/map/manchester-popup.gif",
            "/Style%20Library/en-us/IM_Images/homepage/newcastle.jpg",
            "/Style%20Library/en-us/IM_Images/homepage/map/newcastle-popup.gif",
            "/Style%20Library/en-us/IM_Images/homepage/sheffield.jpg",
            "/Style%20Library/en-us/IM_Images/homepage/map/sheffield-popup.gif",
            "/Style%20Library/en-us/IM_Images/homepage/map/dot.gif",
            "/Style%20Library/en-us/IM_Images/homepage/map/dot-selected-orange.gif"]);

    //start rotator
    var bannerRotator_imageRotateTimer = setInterval("$bannerRotator.rotateToNext($bannerRotator.crossFadeTime)", $bannerRotator.rotateTime);

    //select initial map location to first
    $map.selectLocation($bannerRotator.locations[0].id);
    
    //wire up map hover popups
    $("div#map a").hover(function() {
        $map.fadeInPopup($(this));

    }, function() {
        $map.fadeOutPopup();
    });
});