$(document).ready(function(){	
	setHeight();	
	
	//featured slideshow
	slideShow();	
	$('#features .menu .next').click(function() { gallery();				return false; });
	$('#features .menu .prev').click(function() { gallery('previous');		return false; });
	
	//drowndown menu	
	var timeout         = 500;
	var closetimer		= 0;
	var ddmenuitem      = 0;
	var ddmenulink		= 0;
	
	function jsddm_open() {	
		jsddm_canceltimer();
		jsddm_close();
		ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');
		ddmenulink = $(this);
		ddmenulink.addClass('active');
	}		
	
	function jsddm_close() {	
		if (ddmenuitem) ddmenuitem.css('visibility', 'hidden');
		if (ddmenulink) ddmenulink.removeClass('active');
	}	
	
	function jsddm_timer() {	
		closetimer = window.setTimeout(jsddm_close, timeout);
	}
	
	function jsddm_canceltimer() {	
		if(closetimer)	{	
			window.clearTimeout(closetimer);
			closetimer = null;
		}
	}
	
	document.onclick = jsddm_close;
	
	$('#dropdown > li').bind('mouseover', jsddm_open);
	$('#dropdown > li').bind('mouseout',  jsddm_timer);	
	
});

$(window).load(function () {	setHeight(); });




//set height of background
function setHeight() {
	currentHeight = $('#wrapper').height();	
	$('#bgimg').height(currentHeight);
	$('#bgimg_pattern').height(currentHeight);
	$('#bgimg_shadow').height(currentHeight);
}


/* slideshow and gallery */
function slideShow() {
	//Set the opacity of all images to 0
	$('#features li').css({opacity: 0.0});
	
	//Get the first image and display it (set it to full opacity)
	$('#features li:first').css({opacity: 1.0});
	
	//Set the caption background to semi-transparent
	//$('#features .caption').css({opacity: 1.0});

	//Resize the width of the caption according to the image width
	$('#features .caption').css({width: $('#gallery li').find('img').css('width')});
	
	//Get the caption of the first image from REL attribute and display it
	$('#features .content').html($('#features li:first').find('img').attr('rel'));
	
	//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
	timerID = setTimeout('gallery()',6000);
	
}

function gallery(previous) {
	//clear & set internal
	clearTimeout ( timerID );
	timerID = setTimeout('gallery()',6000);
	
	//if no IMGs have the show class, grab the first image
	var current = ($('#features li.show')?  $('#features li.show') : $('#features li:first'));
	
	if (previous == 'previous') {
		//load previous image
		var next = ((current.prev().length) ? ((current.prev().hasClass('caption'))? $('#features li:last') :current.prev()) : $('#features li:last'));
	} else {
		//load next image
		var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#features li:first') :current.next()) : $('#features li:first'));
	}
	
	//Get next image caption
	var caption = next.find('img').attr('rel');	
	
	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

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