$(document).ready(function(){


	if($.browser.safari) {
		if($.browser.version.substr(0,1) < 5) {
			alert('We are sorry: Please update Safari to version 3. Unfortunately this website will not work as intended in versions below.');
			return false;
		}
	}



	// reset scrolling if reloaded
	// $.scrollTo(0);
	// $('#testid').scrollTo({left: 0, top: 0});

	$.localScroll(200);
	
	// init array for opened projects
	openProjects = new Array();
	// init array for where we are in a project
	currentImage = new Array();
	// init value for loading images
	cImg = 0;
	// init value for loading hover images
	moImagesLoaded = 0;
	// an array containing the ids of all projects in page
	idsInPage = new Array();
	for(i in moImages) { idsInPage.push(i); }
	// 
	loading = false;
	
	
	
	function startSingleHover(callback) {
		var hoverId = idsInPage[moImagesLoaded];
		$('#img_'+hoverId+'_1').hover(
			function() {
				if(!openProjects[hoverId]) $(this).attr("src", "/media/"+moImages[hoverId]);
			},
			function() {
				if(!openProjects[hoverId]) $(this).attr("src", "/media/"+firstImages[hoverId]); 
			}
		);
		moImagesLoaded++;
	}
	

	$.preload(moImages, {
	    base: '/media/',
	    onComplete: startSingleHover
	});
	
	
	// show all images
	addImage = function(callback, id) {
		// fade in !!!
		$("#ih"+id).append("<img src=\""+callback['image']+"\" id=\"img_"+id+"_"+cImg+"\" class=\"added\" style=\"display: none;\">");
		$("#img_"+id+"_"+cImg).fadeIn(300);
		cImg++;
	}
	
	openProject = function(id) {
		loading = true;	
		// yes, we are OPEN
		openProjects[id] = true;
		// switch to mouseover image
		$("#fi"+id).attr("src", "/media/"+moImages[id]);
		// show the navigation
		$("#nav"+id).fadeIn(300);
		// current image is the second one -> reset to 2 for each project
		cImg = 2;
		// preload more images & add them when completed
		$.preload(moreImages[id], {
			base: '/media/',
			treshold: 1,
			onComplete: function(callback) { addImage(callback, id); },
			onFinish: function() { loading = false; }
		});		
	}
	
	$('a.firstlink').click(function() {
		id = $(this).parent().attr("id").substr(2);
		if(!openProjects[id] && !loading) openProject(id);
		return false;
	});
	
	function closeProject(id) {
		currentImage[id] = undefined;
		$("#ih"+id).children("img.added").fadeOut(300,function(){
			$(this).remove();
			$("#img_"+id+"_1").attr("src", "/media/"+firstImages[id]);
		});
		// remove at callback
		$("#nav"+id).fadeOut(300);
		openProjects[id] = undefined;
	}
	
	
	$('a.close').click(function() {
		var id = $(this).parent().attr("id").substr(3);
		// take away images one by one starting from the left
		
		// if scrolled, scroll back
		if(currentImage[id]>1) $('#images'+id).stop().scrollTo(0,400,{axis:'x', onAfter:function(){ closeProject(id); }});
		else closeProject(id);
		
		return false;
	});
	
	/*
	
	var imageHolder = $("#ih"+id);
	var ihx = $("#ih"+id).offset();
	// only accept images in exactly this imageholder
	var imagex = $("#ih"+id+" #image"+img).offset();
	var diff = ihx['left'] - imagex['left'];	
	
	*/
	
	scrollImages = function(id, image) {
		var imgID = $('#images'+id).find("#img_"+id+"_"+image);
		$('#images'+id).stop().scrollTo(imgID,400,{axis:'x'});
	}
	

	
	$('a.scrollfwd').click(function() {
		id = $(this).parent().attr("id").substr(3);
		if(!currentImage[id]) currentImage[id] = 2;
		else if(currentImage[id] <= moreImages[id].length) currentImage[id]++;
		else currentImage[id] = 1;
		scrollImages(id,currentImage[id]);
		return false;
	});
	
	$('a.scrollbwd').click(function() {
	
		
	
		id = $(this).parent().attr("id").substr(3);
		// no scrollback on first
		if(!currentImage[id] || currentImage[id] < 2) return false;
		else currentImage[id] -= 1;
				
		scrollImages(id,currentImage[id]);
		return false;
	});

	

});