$(function(){

	//Clear up IE issues
	if($.browser.msie && $.browser.version<"8.0"){
		$("#garage_overlay").hide()
	}

	position = -1
	scroll_width = 352
	highlighted_html = $("#highlighted").html()
	highlight_position = 1
	
	//$(".selected_item").hide()
	
	
	$("#garage_prev").bind('click', function(){
		if(position > -1){
			position --
			highlight_position --
			open_item($("#garage_items :nth-child("+highlight_position+")"))
		}
		return false
	})
	
	$("#garage_next").bind('click', function(){
		if(position < $("#garage_items img").length - 2){
			position ++
			highlight_position ++
			
			open_item($("#garage_items :nth-child("+highlight_position+")"))
		}
		
		return false
	})
	
	
	$("#garage_items img").bind("click", function(){
	
		
		
	})
	
	
	//Hide the info
	$(".info").hide()
	
	
	$("#info_link").bind("click", function(){
	
	
		id = $(this).attr("class")
		
		title = $(this).attr("alt")
		

	
		content = $("#"+id).html()
	
		/* Shadow box
		***************************/
		
		 Shadowbox.open({
	        content:    content,
	        player:     "html",
	        title:      title,
	        height:     600,
	        width:      800
	    });
	    
	    return false
    
    })
    
    
    
    
	
	
	open_item($(".selected_item"))
		
})

function open_item(item){

	//Set the variables
	src = $(item).attr("src")
	title = $(item).attr("title")

	
	/*************************************************
	
		1. Fade out Highlighted Div
		2. Bring the selected Item back in
		3. Slide half way left
		4. Shrink selected item
		5. Mark item as selecetd
		6. Create the new Highlight
		7. Show the new highlight
	
	**************************************************/
	
	
	//2
	$(".selected_item").show()
	$(".selected_item").css({
		width: 0
	})
	$(".selected_item").animate({
		width: "302px"	
	}, 200)
	
	//1
	$("#highlighted").fadeOut(300, function(){
		//6
		$("#highlight_copy").html(title)
			
		$("#info_link").removeClass()
		$("#info_link").addClass("info_"+$(item).attr("id").split("_")[2])
		
		$("#garage_item_main").attr({
			src: src
		})
	
	})
	
	
	//3
	$("#garage_items").animate({
		marginLeft: ((scroll_width) * position) * -1
	}, 200)
	
	//4
	$(item).animate({
		width: 0	
	}, 200, function(){
		$(item).hide()
		
		//7
		$("#highlighted img").css({
			width: "320px",
			marginLeft: "15px"
		})
		$("#highlighted img").animate({
			width: "352px",
			marginLeft: "0px"
		}, 200)
		
		
		$("#highlighted_copy").css({
			width: "282px",
			marginLeft: "15px"
		})
		$("#highlighted_copy").animate({
			width: "312px",
			marginLeft: "0px"
		}, 200)
		
		
		$("#highlighted").fadeIn(200)
		
	})
	
	
	//5
	$(".selected_item").removeClass('selected_item')
	$(item).addClass('selected_item')
	
	
	
	
	
	


	
}