var jData;
var test;
var styleClicked;
var imgClicked;

//	This function loads when the document is ready to be traversed
$(document).ready(function(){
	$.getJSON("/styles", function(data){
				jData = data;
					test = jData.styles[0].images[0].picture;
					init();
				});
	});
	
	
//	Initial animation
function init(){
	// load the frame
	$.preload([ "images/frame.png" ], {
			onFinish:loadGallery
	});
}

function loadGallery(){
	$("#content").append("<div id=\"left\"><p>Click through the names below to view the available model homes and floorplans.</p><ul id=\"gallerylinks\"></ul></div><div id=\"frame\"><div id=\"image\"></div></div><ul class=\"thumbs\"></ul><div id=\"moreinfo\"></div><div id=\"description\"></div>");
	$("#gallerylinks").hide();
	$("#left p").hide().fadeIn("fast");
	$("#frame").hide().fadeIn("fast",function(){
			$("#gallerylinks").fadeIn("fast",function(){
				createlist(0);
			});
		});
	}
	
// listing
	function createlist(id){
		styleClicked = true;
		if(id< jData.styles.length){
				setTimeout ("showListItem(" + id + ");",100);
			}else{
				$("#gallerylinks").append("<li class=\"last\"></li>");
				$(".last").hide().fadeIn("fast");
				// if nothing has been clicked, load the first style
				styleClicked = false;
				loadStyle(0);
			}
	}
	function showListItem(itemid){
	$("#gallerylinks").append("<li><a href=\"#\">"+jData.styles[itemid].name + "</a></li>");
	$("#gallerylinks li:last").hide().fadeIn("fast",function(){
		$(this).click(function(){
			stlyeClicked = true;
			loadStyle(itemid - 1);
			return false;
		})
		itemid++;
		createlist(itemid)
	});
	}
	
	function loadStyle(id){
	if(!styleClicked){
	
	styleClicked = true;
	$("#description").fadeOut("fast", function(){
			//$(this).empty().append("<h4 style=\"clear:both\">" + jData.styles[id].name + "</h4><p>" + jData.styles[id].description+ "</p>");
			$("#moreinfo").fadeOut("fast", function(){
				$("#moreinfo").empty().append("<a style=\"display: block; clear: both; \" href=\"/new_homes/"+ jData.styles[id].url+"\"> More Information</a>");
			});
			$(".thumbs").fadeOut("fast",function(){
				$(this).empty().append("<li>"+ jData.styles[id].name + " Images:</li>").fadeIn("slow", function(){
					$("#description").fadeIn("fast");
					showThumb(0, id)
					loadImage(0,id);
				});
			})
		
	});
	}
	}
	
	//	thumbs
	function showThumb(imgID, styleID){
		if(imgID < jData.styles[styleID].images.length){
			$(".thumbs").append("<li><a href=\"#\" class=\"pic" + imgID +"\">"+ eval(imgID + 1) + "</a></li>");
			$(".thumbs li:last").click(function(){
				loadImage(imgID-1, styleID);
				return false;
			})
			$(".thumbs li:last").hide().fadeIn("fast", function(){
				imgID++;
			showThumb(imgID, styleID);
			});
			
		}else{
			$("#moreinfo").fadeIn("slow");
			styleClicked = false;
		}
	}
	
	
	//display image 
	
	function loadImage(imageID, styleID){
		$.preload([ "/" +jData.styles[styleID].images[imageID].picture ], {
			onFinish:showImage(imageID, styleID)
	});
	}
	
	function showImage(imageID, styleID){
		$(".thumbs li a").each(function(){
		if($(this).is(".pic" + imageID)){
			$(this).animate({width: 27});
		}else{
			$(this).animate({width: 17});}
		});

		
		
		$("#image").fadeOut("slow", function(){
		 $("#image").empty().append("<img src=\"/"+ jData.styles[styleID].images[imageID].picture + "\" alt=\"" + jData.styles[styleID].name + " image\"/>").fadeIn("slow");
		});
	}