var defaultCufonOpts =  { fontFamily: 'Sertig' };
function initPage() {
	Cufon.replace('#menu > li', { hover: true, fontFamily: 'Sertig' });
	Cufon.replace('#footer', defaultCufonOpts);

	
	var winWidth = $(window).width();
	var winHeight = $(window).height();
	var bgClass = 'bg1280';
	
	if (winWidth > 1440 || winHeight > 1080)
		bgClass = 'bg1900';
	else if (winWidth > 1280 || winHeight > 960)
		bgClass = 'bg1440';
	
	$('body').addClass(bgClass);
	
	 
	$.jGrowl.defaults.position = 'top-left';
	$('.inactive').click(function() {
		$.jGrowl("Coming soon. Stay tuned!");
	});
}


function slideShow() {
	//Set the opacity of all images to 0
	$('div.imgWrapper img').css({opacity: 0.0});
	$('div.imgWrapper img:not(.show)').hide();	
	//Get the first image and display it (set it to full opacity)

	$('div.imgWrapper img:first').css({opacity: 1.0});	
		
	//Get the caption of the first image from REL attribute and display it
	var caption_id = '#' + $('div.imgWrapper img:first').attr('rel');
	$('div.imgWrapper .description').html($(caption_id).html());
	
	//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
	return setInterval('gallery()',6000);
}


function gallery() {
	
	//if no IMGs have the show class, grab the first image
	var current = ($('div.imgWrapper img.show')?  $('div.imgWrapper img.show') : $('div.imgWrapper img:first'));
	var currentIndex = current.index();

	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	/*var next = ((current.next('img').length) ? ((current.next('img').hasClass('description'))? $('#gallery img:first') : current.next('img')) : $('#gallery img:first'));	*/
	
	var next = (( $('div.imgWrapper img:gt('+currentIndex+')').length) ? $('div.imgWrapper img:gt('+currentIndex+')') : $('div.imgWrapper img:first'));
	
	//Get next image description
	var caption_id = '#' + next.attr('rel');	
	var caption = $(caption_id).html();	
	
	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show').hide();
	
	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0}).show()
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	/*current.animate({opacity: 0.0}, 1000)
	.removeClass('show').hide();*/
	
	//Set the opacity to 0 and height to 1px
	$('div.imgWrapper .description').animate({opacity: 0.0}, { queue:false, duration:0 });	
	
	//Animate the description, opacity to 0.7 and heigth to 100px, a slide up effect
	$('div.imgWrapper .description').animate({opacity: 0.7},100 );
	
	//Display the content
	$('div.imgWrapper .description').html(caption);
}