$(document).ready( function()
{
	// Set Targets & Vars
	var items = $("#items a")
	var itemContainer = $("#preamble .call-outs")
	var pane = $("#window div")
	var selectedIndex = 0
	var bMoveFInished = true
	var bTransitionStopped = false
	var moveValue
	var tick
	var controllinks
	
	
	// Init
	// Create A Menu Div
	itemContainer.css("top", "118px");
	var controls = $("<div id='controls'></div>").appendTo($(".menu"))
	var buttons = []
	
	
	// Get Items
	items.each(function(index) 
	{
		/*$(this).bind('click', function()
		{
			selectedIndex = index
			changeImage()
			return false
		})*/
		if(index == 0) { var cssClass = "class='active'" } else {  var cssClass = null }
		
		buttons.push($("<a " + cssClass + " href='#'>" + (index+1) + "</a>").appendTo(controls).bind('click', function()
		{
			clearInterval(tick)
			tick = setInterval(moveMenu, 5000)
			selectedIndex = index-1
			moveMenu()
			return false
		}))
	});


	function moveMenu()
	{
		if(selectedIndex > items.length-2)
		{
			selectedIndex = -1;
			moveValue = 118;
		} else {
			moveValue = -(selectedIndex * 118)
		}
		
		items.eq(selectedIndex).css("zIndex", "0")
	
		if(bMoveFInished)
		{
			itemContainer.animate({
			top: moveValue		
			}, 1000, function()
			{
				bMoveFInished = true
				changeImage()
			})
		}

		selectedIndex = selectedIndex+1;
		bMoveFInished = true
	}
	
	/* Change The DIV that Displays In main Window */
	function changeImage()
	{
		pane.each(function(index)
		{
			if(index == selectedIndex)
			{
				items.eq(selectedIndex).css("zIndex", "100")
				pane.eq(selectedIndex).css("display", "block")
				buttons[selectedIndex].addClass("active")
			} else {
				items.eq(index).css("zIndex", "1")
				pane.eq(index).css("display", "none")
				buttons[index].removeClass("active")
			}
		})
		
	}
	
	
	tick = setInterval(moveMenu, 5000)
	//items[0].
	
} )