﻿/* Requires: jQuery 1.3 + */
var iG = {
    items: []
			, cycleDelay: 5000
			, transitionDelay: 1000
			, interval: 6
			, playing: false
			, preLoader: {}
			, loadItem: function() {

			    if (iG.currentIdx < 0)
			        iG.currentIdx = (iG.items.length - 1);
			    else if (iG.currentIdx >= iG.items.length)
			        iG.currentIdx = 0;

			    var item = iG.items[iG.currentIdx];
			    var thumb = item.thumbnail;
			    var mainImage = item.mainImage;

			    // see if it's a text only slide
			    var textOnly = (thumb.width == 0 || thumb.height == 0 || mainImage.width == 0 || mainImage.height == 0);

			    var $nextSlide, $currentSlide, $nextDesc, $currentDesc;

			    // content
			    $currentSlide = $("div.im_slider_image div.img:not(.ig_next), div.im_slider_image div.textonly:not(.ig_next)");
			    $currentDesc = $("div.inner div.textbox div.textbox_left:not(.ig_next)");

			    $nextDesc = $("div.inner div.textbox div.textbox_left.ig_next");

			    if (!textOnly) {

			        $nextSlide = $("div.im_slider_image div.img.ig_next").eq(0); // get the 1st one we come across

			        $nextDesc.html(item.description.replace("\n", "<br />"));
			        $nextSlide.find("img").load(function() {
			            // fade out old
			            $currentSlide.fadeOut(iG.transitionDelay, function() { $(this).addClass("ig_next"); });
			            $currentDesc.css("background-color", "#0197D0").fadeOut(iG.transitionDelay, function() { $(this).addClass("ig_next"); });
			            // fade in new
			            $nextSlide.fadeIn(iG.transitionDelay, function() { $nextSlide.removeClass("ig_next").find("img").unbind("load"); });
			            $nextDesc.css("background-color", "#0197D0").fadeIn(iG.transitionDelay, function() { $(this).removeClass("ig_next"); });
			        }).attr("src", thumb.src)
				    .css({
				        width: thumb.width
					    , height: thumb.height
				    }); ;

			    } else { // show a text only slide

			        // get 1st "next" slide
			        $nextSlide = $("div.im_slider_image div.textonly.ig_next").eq(0); // get the 1st one we come across
			        // set content
			        $("p.name", $nextSlide).html(item.name.replace("\n", "<br />"));
			        $("p.description", $nextSlide).html(item.description.replace("\n", "<br />"));
			        $nextDesc.html("");
			        // transition
			        //  fade out
			        $currentSlide.fadeOut(iG.transitionDelay, function() { $(this).addClass("ig_next"); });
			        $currentDesc.css("background-color", "#0197D0").fadeOut(iG.transitionDelay, function() { $(this).addClass("ig_next"); });
			        //  fade in
			        $nextSlide.fadeIn(iG.transitionDelay, function() { $(this).removeClass("ig_next"); });
			        $nextDesc.css("background-color", "#0197D0").fadeIn(iG.transitionDelay, function() { $(this).removeClass("ig_next"); });
			    }

			    // modal
			    var $mNextSlide, $mCurrentSlide, $mNextDesc, $mCurrentDesc;

			    $mCurrentSlide = $("div.modal div.image div.img:not(.ig_next), div.modal div.image div.textonly:not(.ig_next)");
			    $mCurrentDesc = $("div.modal div.info p:not(.ig_next)");

			    $mNextDesc = $("div.modal div.info p.ig_next");

			    if (!textOnly) {

			        $mNextSlide = $("div.modal div.image div.img.ig_next").eq(0);

			        $mNextDesc.html(/*"<strong>" + item.name + "</strong><br />" +*/item.description);
			        $mNextSlide.find("img").load(function() {

			            // fade out old
			            $mCurrentSlide.fadeOut(iG.transitionDelay, function() { $mCurrentSlide.addClass("ig_next"); });
			            $mCurrentDesc.fadeOut(iG.transitionDelay, function() { $mCurrentDesc.addClass("ig_next"); });
			            // fade in new						    
			            $mNextSlide.fadeIn(iG.transitionDelay, function() {
			                $mNextSlide.removeClass("ig_next").find("img").unbind("load");
			                $("span.currentNumber").html(iG.currentIdx + 1);
			            });
			            $mNextDesc.fadeIn(iG.transitionDelay, function() { $mNextDesc.removeClass("ig_next"); });

			        }).attr("src", mainImage.src)
				    .css({
				        width: mainImage.width
					    , height: mainImage.height
				    });

			    } else {

			        // get 1st "next" slide
			        $mNextSlide = $("div.modal div.textonly.ig_next").eq(0); // get the 1st one we come across
			        // set content
			        $("p.name", $mNextSlide).html(item.name);
			        $("p.description", $mNextSlide).html(item.description);
			        $mNextDesc.html("");
			        // transition
			        //  fade out
			        $mCurrentSlide.fadeOut(iG.transitionDelay, function() { $mCurrentSlide.addClass("ig_next"); });
			        $mCurrentDesc.fadeOut(iG.transitionDelay, function() { $mCurrentDesc.addClass("ig_next"); });
			        //  fade in
			        $mNextSlide.fadeIn(iG.transitionDelay, function() {
			            $mNextSlide.removeClass("ig_next");
			            $("span.currentNumber").html(iG.currentIdx + 1);
			        });
			        $mNextDesc.fadeIn(iG.transitionDelay, function() { $mNextDesc.removeClass("ig_next"); });

			    }

			    iG.preLoad();

			}, fwd: function(e) {

			    if (e) {
			        // it's a click so
			        if (iG.playing) iG.play(); // pause
			        e.preventDefault();
			    }

			    iG.currentIdx++;
			    iG.loadItem();

			}, back: function(e) {

			    if (e) {
			        // it's a click so
			        if (iG.playing) iG.play(); // pause
			        e.preventDefault();
			    }

			    iG.currentIdx--;
			    iG.loadItem();

			}, play: function(e) {

			    if (iG.playing) {
			        $("a.play img").attr("src", "/images/annual_review/icons/play.gif");
			        $("a.play span").html("Play");
			        clearInterval(iG.interval);
			    }
			    else {
			        $("a.play img").attr("src", "/images/annual_review/icons/pause.gif");
			        $("a.play span").html("Pause");
			        iG.fwd();
			        iG.interval = setInterval("iG.fwd();", iG.cycleDelay);
			    }

			    iG.playing = !iG.playing;
			    if (e) e.preventDefault();

			}, zoom: function(e) {
			    var $modal = $("div.modal");
			    var $overlay = $("div.overlay");
			    //alert("document: " + $(document).width() + "\nwindow: " + $(window).width() + "\nmodal: " + $modal.width());
			    if ($overlay.is(":hidden")) {

			        if (iG.playing) iG.play(); // pause

			        // measure
			        //  available dimensions
			        var aw = $(window).width();
			        var ah = $(window).height();
			        // actual top
			        var at = $(document).scrollTop();
			        // modal dimensions
			        $modal.w = $modal.width();
			        $modal.h = $modal.height();

			        // Open
			        if ($.browser.msie) {
			            $(document.body).addClass("withmodal");
			            $overlay.css("height", $(document).height());
			        }
			        $overlay.css({ opacity: 0.5, top: 0, left: 0 }).fadeIn(500);

			        //$("div.wrapper", $modal).hide();

			        /*$modal
			        .css({opacity: 0, width: "5px", height: "5px", top: at + (ah/2), left: aw/2}) // hide, set to 5x5 and center
			        .animate({opacity: 1.0}, 1000)
			        .animate({width: $modal.w, left: (aw/2 - $modal.w/2)}, 500)
			        .animate({height: $modal.h, top: at + (ah/2 - $modal.h/2)}, 500, function(){
			        $("div.wrapper", $modal).fadeIn(500);
			        $overlay.click(iG.zoom);
			        });*/

			        $modal.css({ top: at + (ah / 2 - $modal.h / 2), left: (aw / 2 - $modal.w / 2) }).fadeIn(iG.transitionDelay, function() { $overlay.click(iG.zoom); });

			    }
			    else {
			        // close
			        if ($.browser.msie) {
			            $(document.body).removeClass("withmodal");
			        }
			        $modal.fadeOut(iG.transitionDelay);
			        $overlay.fadeOut(iG.transitionDelay * 1.1).unbind("click");
			    }

			    if (e) e.preventDefault();
			}, preLoad: function() {

			    // Pre load next and previous images
			    var idx = iG.getNextIndex(true);
			    if (!iG.preLoader[idx] && iG.items[idx].thumbnail && iG.items[idx].thumbnail.width != 0) {
			        //console.log("prev thumb");
			        iG.preLoader[idx] = new Image;
			        iG.preLoader[idx].src = iG.items[idx].thumbnail.src
			    }
			    if (!iG.preLoader[idx] && iG.items[idx].mainImage && iG.items[idx].mainImage.width != 0) {
			        //console.log("prev main");
			        iG.preLoader[idx] = new Image;
			        iG.preLoader[idx].src = iG.items[idx].mainImage.src
			    }
			    idx = iG.getNextIndex(false);
			    if (!iG.preLoader[idx] && iG.items[idx].thumbnail && iG.items[idx].thumbnail.width != 0) {
			        //console.log("next thumb");
			        iG.preLoader[idx] = new Image;
			        iG.preLoader[idx].src = iG.items[idx].thumbnail.src
			    }
			    if (!iG.preLoader[idx] && iG.items[idx].mainImage && iG.items[idx].mainImage.width != 0) {
			        //console.log("next main");
			        iG.preLoader[idx] = new Image;
			        iG.preLoader[idx].src = iG.items[idx].mainImage.src
			    }

			}, getNextIndex: function(back) {
			    if (back) {
			        if (iG.currentIdx == 0)
			            return (iG.items.length - 1);
			        else
			            return (iG.currentIdx - 1);
			    }
			    else {
			        if (iG.currentIdx == (iG.items.length - 1))
			            return 0;
			        else
			            return (iG.currentIdx + 1);
			    }
			}
};

$(document).ready(function() {
    if (document.location.href.toLowerCase().indexOf("printversion=true") == -1) {
        // add button animations
        // hide all button text
        $("div.im_slider_control a.play span").html("Pause"); // set to longest text for measuring
        $("div.im_slider_control li:not(.disabled) a").each(function(idx) {
            var $this = $(this);
            $this.data("oWidth", $this.find("span").outerWidth());
        }).hover(
		    function() {
		        var $this = $(this);
		        $this.stop().animate({ width: $this.data("oWidth") }, 250);
		    },
		    function() {
		        $(this).stop().animate({ width: "30px" }, 250);
		    }
        );
        $("div.im_slider_control a.play span").html("Play"); // reset text
        // wire up buttons
        $("div.im_slider_control a.play").click(iG.play);
        $("div.im_slider_control a.fwd").click(iG.fwd);
        $("div.im_slider_control a.back").click(iG.back);
        $("div.im_slider_control a.zoom").click(iG.zoom);
        // move modal and overlay to end of document
        var $modal = $("div.modal");
        $modal.clone().appendTo(document.body);
        $modal.remove();
        var $overlay = $("div.overlay");
        $overlay.clone().appendTo(document.body);
        $overlay.remove();
        // add in "next" items
        $("div.im_slider_image div.img").clone().addClass("ig_next").insertAfter("div.im_slider_image div.img");
        $("div.im_slider_image .textonly").clone().addClass("ig_next").insertAfter("div.im_slider_image .textonly");
        $("div.im_slider_image img:hidden, div.im_slider_image .textonly:hidden").addClass("ig_next"); // make sure any hidden slides are marked as next
        $("div.inner div.textbox div.textbox_left").clone().addClass("ig_next").insertAfter("div.inner div.textbox div.textbox_left");

        $("div.modal div.image div.img").clone().addClass("ig_next").insertAfter("div.modal div.image div.img");
        $("div.modal div.image div.textonly").clone().addClass("ig_next").insertAfter("div.modal div.image div.textonly");
        $("div.modal div.info p").clone().addClass("ig_next").insertAfter("div.modal div.info p");
        // wire up modal buttons
        $("div.modal div.controls img.fwd").click(iG.fwd);
        $("div.modal div.controls img.back").click(iG.back);
        $("div.modal div.controls img.close").click(iG.zoom);

        iG.preLoad();
    }
});