//main function
$(document).ready(function(){
	$.ajax({
		type: "GET",
		url: "gallery.xml",
		dataType: "xml",
		success: function(xml) {
			displayThumbs(0, xml);
			
			}
		});
	
});
var index = 0;
var current =0;
//thumbs xml populate
function grabthumbs(index, xml){
	var count = 0;
	$(xml).find("PAINTING").each( function(){
		if($(this).attr("index") < index){

			}else
			{
				var file = $(this).attr("id");
				var id = $(this).attr("index");
				var title = $(this).find("title").text();

				if(count == 4){
					count=0;
					return false;
					}else
					{
					$("ul","#thumbs").append("<li id='"+ id +"' class='item'><img  src='./thumbs/" + file +"' /><div class='block'><h2>" + title + "</h2></div></li>");
						count++;
					}
			}
	});
	galleryinteract(xml);
}
//dynamically displays the painting thumbnails from an XML file
function displayThumbs(index, xml){	
	grabthumbs(index, xml);
	$("#gal1").css("background", "gray");
	function handleshading(){
		$("#gal1").css("background","white");
		$("#gal2").css("background","white");
		$("#gal3").css("background","white");
		$("#gal4").css("background","white");
		$("#gal5").css("background","white");
	}
	function clickHandler(gallary, no){
		$(".item").remove();
		handleshading();
		$(gallary).css("background", "gray");
		index = no;
		grabthumbs(index, xml);	
	}
	//gallary 1
	$("#gal1").click(function(){		
		clickHandler(this, 0);	
	});
	//gallary 2
	$("#gal2").click(function(){
		clickHandler(this, 4);
	});
	//gallary 3
	$("#gal3").click(function(){
		clickHandler(this, 8);
	});
	//gallary 4
	$("#gal4").click(function(){
		clickHandler(this, 12);
	});
	//gallary 5
	$("#gal5").click(function(){
		clickHandler(this, 16);
	});

//click for popup
	$("#main_img").hover(function(){
		$("#info").show();
		}, function(){
			$("#info").hide();

			});
	$("img","#main_img").click(function(){
	currentimg = $("img","#main_img").attr("src");
	$("img","#painting").attr("src", currentimg);
	$("#align").fadeIn("500");
	$("#info").hide();
	isHandlerActive =  true;	
	eventhandle(xml);
	});
	selected = $("PAINTING[index=0]", xml);
	display(selected);
}
//click out to exit popup
function eventhandle(xml){
$("#imgview").bind(
	"mousedown",
	function( event ){
	event.stopPropagation();
	});
	
$( document ).bind(
	"mousedown",
	function(){
	if (!isHandlerActive){
	return;
	}


	$("#align").fadeOut("500", function(){
	galleryinteract(xml);
	});
	
	isHandlerActive = false;
	
	});
}
//Function which creates interactivity with the gallery
function galleryinteract(xml){
	
	$(".item").hover(function(){
		$("img",this).css("background","#000000");
		$(this).css("background","#FAFAFA");
	},
	function(){
		$("img",this).css("background","#ffffff");
		$(this).css("background","#ffffff");
	});
	$(".item").click(function(){
		if(current == $(this).attr("id"))
		{return false;}
		 current = $(this).attr("id");
		var selected = $("PAINTING[index=" + $(this).attr("id") + "]", xml);
		
		display(selected);
	});

}
//display painting and info
function display(selected){
	$("#main_img").fadeOut(function(){
		$("#image").attr("src","./images/" + selected.attr("id"));
		$("#title").html("<b><u>"+selected.find("title").text()+"</u></b>");
		$("#medium").html("<b>Medium:</b> " + selected.find("medium").text());
		$("#status").html("<b>Status:</b> " + selected.find("status").text());
		$("#price").html("<b>Price:</b> " + selected.find("price").text());
		$("#loading").show();
		$("#image").load(function(){
			$("#loading").hide();
			$("#image").css("padding","5px")
		$("#main_img").fadeIn();
		});
	});	

}