/// <reference path="jquery-1.3.2.min.js"/>

//number of ms between image rotations
var ROTATION_TIME = 7000; 

//the number of seconds to perform fade animation.
var TRANSITION_TIME = 500; 

//global variable holding the carousel
var carousel = new Carousel(); 

//the images to load, this will be dynamic eventually
var images = ["portfolio.png", "dop.png", "fms.png"];
var captions = ["Delivering tomorrow's applications, now.", "Losing a bolt is a lot different at 20,000 ft.", "Identify, assess and mitigate fatigue risk in advance."];
var subCaptions = ["Click to see why Macrosystems is the premier RIA builder", "Macrosystems' Dropped Object Portal", "Macrosystems' Fatigue Management Suite"];
var hrefs = ["/OurWork.aspx", "/Portfolio.aspx?ID=7", "/Products.aspx"];

$(document).ready(function()
{
	//
	//HACK: implement a hack to get the images to preload
	//	
	for (var i = 0; i < images.length; i++)
	{
		var img = document.createElement("img");
		img.setAttribute("src", "images/carousel/" + images[i]);
		//img.setAttribute("style", "position:absolute;visibility:hidden;");
		$(img).css("position", "absolute").css("visibility", "hidden");
		document.getElementById("carouselImages").appendChild(img);
	}

	for (var i = 0; i < images.length; i++)
	{
		//create the hero html element and set its defaults
		var hero = document.createElement("div");
		hero.setAttribute("id", "hero" + i);
		$(hero).addClass("hero");

		//if it is the first in the list, it should be display initially
		if (i == 0)
		{
			$(hero).css("display", "block");
			$("#caption").text(captions[i]);
			$("#captionHref").text(subCaptions[i]);
			$("#captionHref").attr("href", hrefs[i]);
		}
		//create the interior anchor
		var anchor = document.createElement("a");
		anchor.setAttribute("href", hrefs[i]);  //for now, they all point to the portfolio

		//if IE, it needs to be loaded with the alpha image loader because fadeIn, fadeOut don't render
		//properly in IE using jquery.  This is a hack!
		if (document.all)
			$(anchor).css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/carousel/" + images[i] + "')");
		else
			$(anchor).css("background", "url(images/carousel/" + images[i] + ")");

		//anchor.setAttribute("class", "heroa");

		//add them to the set of carousel images
		document.getElementById("carouselImages").appendChild(hero);
		hero.appendChild(anchor);

		//create a new class
		var item = new CarouselItem();

		//set the properties of the item
		item.image = hero; //document.getElementById("hero" + i);
		item.icon = document.getElementById("selector" + (images.length - 1 - i));
		item.caption = captions[i];
		item.subCaption = subCaptions[i];
		item.href = hrefs[i];

		//add the item to the carousel
		carousel.addItem(item);
	}

	carousel.start();
});

function Carousel(element) {
	var selectedIndex = 0;
	var items = [];
	var timeoutID = null;

	this.addItem = function(item)
	{
		items.index = items.length;
		items[items.length] = item;
	}

	this.selectItem = function(index)
	{
		//clear out the animations that are going on
		//NOTE: $("*").stop( true, true ) does not work
		for (var i = 0; i < items.length; i++)
		{
			$(items[i].image).stop(true, true);
			$(items[i].icon).stop(true, true);
		}

		$("#carouselCaption").stop(true, true);

		//if sent it nothing, use the next index
		if (index == null)
			index = selectedIndex + 1;

		//set the index to something that exists
		if (index >= items.length || index < 0)
			index = 0;

		//fade out the item that is currently selected
		$(items[selectedIndex].image).fadeOut(TRANSITION_TIME, function()
		{
			$(items[index].image).fadeIn(2 * TRANSITION_TIME);

			$(items[index].icon).animate({
				right: "0px",
				left: "0px",
				height: "48px"
			},
				TRANSITION_TIME);
		});

		//fade out the text
		$("#carouselCaption").fadeOut(TRANSITION_TIME, function()
		{
			//when done, swap the text
			$("#caption").text(items[index].caption);
			$("#captionHref").text(items[index].subCaption);
			$("#captionHref").attr("href", items[index].href);

			//and fade it back in
			$("#carouselCaption").fadeIn(2 * TRANSITION_TIME);
		});

		//size the old icon to 32x32
		//$(items[selectedIndex].icon).effect("size", { to: { width: 32, height: 32}, origin: ['bottom', 'center'] }, TRANSITION_TIME);
		$(items[selectedIndex].icon).animate({
			right: "8px",
			left: "8px",
			height: "32px"
		},
			TRANSITION_TIME);

		//set the new selected index
		selectedIndex = index;

		//set the next rotation period
		timeoutID = setTimeout("carousel.selectItem()", ROTATION_TIME);
	};

	this.start = function()
	{
		$("#carouselSelectors img").hover(
			//set the mouse enter function
			//expand the icon when the mouse is over
			function(e)
			{
				$(this).animate({
					right: "0px",
					left: "0px",
					height: "48px"
				},
				100); 
			},
			//and the mouse leave function
			//collapse the icon unless it is currently selected
			function(e)
			{
				for (var i = 0; i < items.length; i++)
				{
					if (items[i].icon.id == this.id && i != selectedIndex )
					{
						$(this).animate({
							right: "8px",
							left: "8px",
							height: "32px"
						},
						100);
					}
				}
			}
		);

		//when the mouse is up on an icon
		//select that icon
		$("#carouselSelectors img").click(function()
		{
			for (var i = 0; i < items.length; i++)
			{
				if (items[i].icon.id == this.id)
				{
					clearTimeout(timeoutID);					
					carousel.selectItem(i);					
					break;
				}
			}
		});

		//fire off the first item
		timeoutID = setTimeout("carousel.selectItem()", ROTATION_TIME);
	};

	this.stop = function()
	{
		if (timeoutID)
			clearTimeout(timeoutID);
	};    
}

function CarouselItem()
{
   	this.image = null;
   	this.icon = null;
   	this.caption = null;
   	this.index = null;
   	this.subCaption = null;
   	this.href = null;
}