var ImageManager = {
	currentCollection : null,
	collectionBase : "/images/collections/",
	extention : "jpg",
	selectedIndex : -1,
	initialised : false,
	load : function(index) {
		
		if(ImageManager.selectedIndex == index || index < 0) return false;
		
		var panel;
		var viewer = $("#main .imageViewer");
		var headings = $("div.headings");		
		var props = $("#properties");
		var title = $("#img_title");
		var media = $("#img_media");
		var size = $("#img_size");
		var cur = ImageManager.currentCollection[index];
		var url = ImageManager.collectionBase + cur.collection + "/" + cur.key + "." + ImageManager.extention;		
		var curPanel = null;
		var preloadFactor = 1;
		
		if(cur.img == null) {
			ImageManager.preLoad(index, index);
			preloadFactor = 1.5;
		}
		
		var nav = ImageManager.createNavigation(headings, index);
		
		if(ImageManager.initialised){
			curPanel = viewer;			
		}
		else {
			curPanel = 	$(".content");
			viewer.prepend("<img id='imagePanel'/>");
			props.removeClass("printHidden");
		}
		
		panel = viewer.children("#imagePanel");	
		
		curPanel.fadeOut(1000 * preloadFactor, function() {
			panel.attr("src", cur.img.src);
			panel.attr("alt", cur.title);

			if(!ImageManager.initialised) {		
				ImageManager.initialised = true;	
			}
					
			viewer.fadeIn(500);		
			title.text(cur.title);
			media.text(cur.media);
			size.text(cur.size);
			
			nav.show();
			
			viewer.focus();
		});
		
		ImageManager.selectedIndex = index;		

		if(typeof(pageTracker) == "object") {
			pageTracker._trackEvent("images", "view", cur.collection + "/" + cur.key)
		}
		
		ImageManager.preLoad(index + 1, index + 3);
	},
	
	createNavigation : function(location, index) {		
		var container;
		
		if(!ImageManager.initialised) {
			container = location.append("<div></div>").children("div");
			container.hide();	
			container.addClass("imageNavigator");			
			container = container.get(0);
			
			var img1 = 	$(container.appendChild(document.createElement("img")));
			img1.attr("src", "/images/buttons/home.png");
			img1.attr("alt", "Go to inro");
			img1.click(function(){document.location.reload();});
			
			var img2 = 	$(container.appendChild(document.createElement("img")));
			img2.attr("src", "/images/buttons/back.png");
			img2.attr("alt", "Previous image");
			img2.attr("id", "prev");
			img2.click(ImageManager.bindToNode);
			
			var img3 = 	$(container.appendChild(document.createElement("img")));
			img3.attr("src", "/images/buttons/forward.png");
			img3.attr("alt", "Next image");
			img3.attr("id", "next");
			img3.click(ImageManager.bindToNode);
			
			container = $(container);
		}
		else {
			container = location.children("div.imageNavigator");
		}
		
		var prev = container.children("img#prev");
		var next = container.children("img#next");
		
		if(index == 0) {			
			prev.hide();	
		}
		else {		
			prev.attr("class", index - 1); 				
			prev.show();
		}
		
		if(index >= (ImageManager.currentCollection.length - 1)) {
			next.hide();
		}
		else {
			next.attr("class", index + 1); 				
			next.show();
		}
		
		return container;
	},
	
	
	preLoad : function(start, end) {

		if(end > ImageManager.currentCollection.length - 1) end = ImageManager.currentCollection.length - 1;	
	
		for(var i = start; i <= end; i++){
			var cur = ImageManager.currentCollection[i];
			if(cur.img == null) {
				cur.img = new Image();
				cur.img.src = ImageManager.collectionBase + cur.collection + "/" + cur.key + "." + ImageManager.extention;
			}
		}
	},
	
	bindToNode : function() {
		var index = $(this).attr("class");
		ImageManager.load(parseInt(index));
		$.history.add(index);
		return false;
	}
}

$(document).ready(function () {
	$("#panel a").click(ImageManager.bindToNode);
	$("a.newwin").each(function(){
		$(this).click(function(){
			window.open($(this).attr("href"),"newwin");
			return false;
		});
	});
});

$(function() {
	$(window).history(function(e, hash) {
		if(hash == '') {
			window.location.reload();
		}
		else {			
			ImageManager.load(parseInt(hash));		
		}
	});
});