/**
 * home.js
 * @require		jQuery
 * @version		1.2
 */

$(function() {
		
	/**
	 * Main Image
	 * jQuery fade animation
	 */
	var initimage   = $('#mainimage h2 img');
	var placeholder = $('<a></a>').insertAfter(initimage).css({ 'display': 'none' });
	
	$('#mainimage ul a').each(function(i) {
		
		$('<img />').appendTo(placeholder).attr({
			'id': 'main' + i,
			'src': './images/main' + i + '.jpg',
			'alt': '',
			'style': 'opacity: 0'
		});
		
		// initimage.appendTo(placeholder);
		
		var timer;
		
		$(this).hover(
			function() {
				placeholder.attr({ 'href': this }).css({ 'display': 'block' });
				$('#main' + i).stop().appendTo(placeholder).css({ 'opacity': '0' }).fadeTo(500, 1);
			},
			function() {
				timer = setTimeout(function(){
					$('#mainimage h2 a img').each(function() {
						var $self = $(this);
						if ($self.css('opacity') > 0) {
							$self.fadeTo(500, 0, function() {
								placeholder.css({ 'display': 'none' });
							});
						}
					});
				}, 500 );
				$('#mainimage a').mouseover(function() {
					clearTimeout(timer);
				});
			}
		);
		
	});
	
});