/* Requires: jQuery 1.3 + */
var iG = {
            items: []
			, cycleDelay: 5000
			, transitionDelay: 1000
			, interval: 6
			, playing: false
			, 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);

			    // change slide					
			    var $nextSlide, $currentSlide, $nextDesc, $currentDesc;

			    // content
			    $currentSlide = $("div.limage div.img:not(.ig_next), div.limage div.textonly:not(.ig_next)");
			    $currentDesc = $("div.tdesc div:not(.ig_next)");

			    $nextDesc = $("div.tdesc div.ig_next");

			    if (!textOnly) {

			        $nextSlide = $("div.limage div.img.ig_next").eq(0); // get the 1st one we come across

			        $nextDesc.html(item.name.replace("\n", "<br />") + "<br />" + item.description.replace("\n", "<br />"));
			        $nextSlide.find("img").load(function() {
			            // fade out old
			            $currentSlide.fadeOut(iG.transitionDelay, function() { $(this).addClass("ig_next"); });
			            $currentDesc.css("backgroundImage", "url(/images/cosmetics/im_bg.gif)").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("backgroundImage", "url(/images/cosmetics/im_bg.gif)").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.limage 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("backgroundImage", "url(/images/cosmetics/im_bg.gif)").fadeOut(iG.transitionDelay, function() { $(this).addClass("ig_next"); });
			        //  fade in
			        $nextSlide.fadeIn(iG.transitionDelay, function() { $(this).removeClass("ig_next"); });
			        $nextDesc.css("backgroundImage", "url(/images/cosmetics/im_bg.gif)").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"); });

			    }

			}, 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/cosmetics/play.gif");
			        $("a.play span").html("Play");
			        clearInterval(iG.interval);
			    }
			    else {
			        $("a.play img").attr("src", "/images/cosmetics/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, function() { $overlay.fadeOut(500).unbind("click"); });
			    }

			    if (e) e.preventDefault();
			}
};

$(document).ready(function() {
// add button animations
    // hide all button text
    $("a.play span").html("Pause"); // set to longest text for measuring
    $("div.bctrl li:not(.disabled) a").each(function (idx) {
		var $this = $(this);
		$this.data("oWidth", $this.width()).css({ padding: "0", display: "block", overflow: "hidden", height: $this.outerHeight(), width: "30px" });
    }).hover(
		function () {
			var $this = $(this);
			$this.stop().animate({width: $this.data("oWidth"), paddingRight: "10px"}, 250);
		}, 
		function () {
			$(this).stop().animate({width: "30px", paddingRight: "0"}, 250);
		}
    );
    $("a.play span").html("Play"); // reset text
	// wire up buttons
	$("div.bctrl a.play").click(iG.play);
	$("div.bctrl a.fwd").click(iG.fwd);
	$("div.bctrl a.back").click(iG.back);
	$("div.bctrl 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.limage div.img").clone().addClass("ig_next").insertAfter("div.limage div.img");
	$("div.limage .textonly").clone().addClass("ig_next").insertAfter("div.limage .textonly");
	$("div.limage img:hidden, div.limage .textonly:hidden").addClass("ig_next"); // make sure any hidden slides are marked as next
	$("div.tdesc div").clone().addClass("ig_next").insertAfter("div.tdesc div");

	$("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);
});