// DOM Ready
$(function () {
	// Image Sources
	var images = new Array();
		images[0] = './ccore_mitte.jpg';
		images[1] = './g1.jpg';
		images[2] = './g2.jpg';
		images[3] = './g3.jpg';
		images[4] = './g4.jpg';
	// images length
	var max = $(images).length;
	// at least 1 image exist
	if(max>0)
	{
		// create the UL element
		var ul = $('<div id="portfolio"></div>');
		// append to div#wrapper
		$(ul).appendTo($('#stimmungsbild'));
		// load the first image
		LoadImage(0,1);
	}

	$("#start").click(function() {
				remall(0,1);
	});

	$("#pic1").click(function() {
				remall(1,2);

	});
	$("#pic2").click(function() {
				remall(2,3);
	});
	
	$("#last").click(function() {
				remall(3,4);
	});			

	$("#fbrabatte").click(function() {
				remall(4,5);
	});		
	
	function remall(img,zwei){
				$('div#portfolio div').remove();
				LoadImage(img,zwei);
	}
			
	// function of loading image
	// params: (int) index of image in array, (int) length of images array
	function LoadImage(index,max)
		{
			// if current index is lower then max element (max-1)
			if(index<max)
				{
					// create the LI, add loading class
					var list = $('<div id="portfolio_'+index+'"></div>').attr('class','loading');
					// append to UL
					$('div#portfolio').append(list);
					// current LI
					var curr = $("div#portfolio div#portfolio_"+index);
					// new image object
			        var img = new Image();
					// image onload
			        $(img).load(function () {
			            $(this).css('display','none'); // since .hide() failed in safari
			            $(curr).removeClass('loading').append(this);
			            $(this).fadeIn('slow',function(){
								// once the current loaded, trigger the next image
							});
			        }).error(function () {
						// on error remove current
						$(curr).remove();
						// trigger the next image
			        }).attr('src', images[index]);
				}
		}

});


sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);