var fading = false;

function switchMainImage(el) {
	if (fading) return;
	fading = true;
	
	
	if ($('.mainimg p').length > 0) {
		var url = 'img/home/' + $.trim($(el).text()) + '.jpg';
	}
	else {		
		var url = 'img/page/' + $.trim($(el).attr('title')) + '.jpg';
	}
	
	//IE fix. IE doesn't trigger load events on images it has already loaded on the page... despite it being a new img tag.
	//var url = url + '?' + Math.random();
	
	$('.mainimg .fader').css('background-image', "url('" + url +  "')");
	$('.mainimg .fader').css('display', 'none');
	//http://stackoverflow.com/questions/3281651/trigger-event-on-background-image-load
	
	
	$(el).parent().find('.current').removeClass('current');
	$(el).addClass('current');
	$('.mainimg p').text($(el).attr('title'));
	
	$('.mainimg .fader').fadeIn(200, null, function() {
		fading = false;	
		$('.mainimg').css('background-image', $('.mainimg .fader').css('background-image'));
		$(this).css('display', 'none');	
	});
	
	
	/*
	$('<img>').attr('src', url).load(function(){
	//	alert('loaded');
		$(el).parent().find('.current').removeClass('current');
		$(el).addClass('current');
		$('.mainimg p').text($(el).attr('title'));
		
		$('.mainimg .fader').fadeIn(200, null, function() {
			fading = false;	
			$('.mainimg').css('background-image', $('.mainimg .fader').css('background-image'));
			$(this).css('display', 'none');	
		});
	});*/
}



function switchPageImage(el) {
	
	if (fading) return;
	$(el).parent().find('.current').removeClass('current');
	
		
	
//	alert(url);
	
	$('.mainimg .fader').css('background-image', "url('" + url +  "')");
	$('.mainimg .fader').css('display', 'none');
	//http://stackoverflow.com/questions/3281651/trigger-event-on-background-image-load
		
	$('<img>').attr('src',url).load(function(){
		//alert('loaded');
		$(el).addClass('current');
		$('.mainimg p').text($(el).attr('title'));
		fading = true;
		$('.mainimg .fader').fadeIn(200, null, function() {
			fading = false;	
			$('.mainimg').css('background-image', $('.mainimg .fader').css('background-image'));
			$(this).css('display', 'none');	
		});
	});
}



$(window).load(function() {
	var imgs = new Array();
	
	$('.mainimg li').each( function(index, item) {
		
		
		if ($('.mainimg p').length > 0) {
			var url = 'img/home/' + $.trim($(this).text()) + '.jpg';
		}
		else {		
			var url = 'img/page/' + $.trim($(this).attr('title')) + '.jpg';
		}
		
		
		var img = $('<img>');
		imgs.push(img);
		//
		img.attr('src', url).load(function(){
		//	alert(this);
			
			if (index == 0) {
				$('.mainimg').css('background-image', 'url(' + url + ')');
			}
			//	alert('loaded');
			/*	$(el).parent().find('.current').removeClass('current');
				$(el).addClass('current');
				$('.mainimg p').text($(el).attr('title'));
				
				$('.mainimg .fader').fadeIn(200, null, function() {
					fading = false;	
					$('.mainimg').css('background-image', $('.mainimg .fader').css('background-image'));
					$(this).css('display', 'none');	
				});*/

				//document.body.appendChild(this);
			});
		
		
		
		
		
		
	});
	
	

			//	alert(index);
			setInterval(function() {
				var next = $('.mainimg .current').next('li');
				
				if (next.length == 0) next = $('.mainimg li:first').first();
				switchMainImage(next);
			//	switchPageImage(next);
			}, 10000);

	
	
	
	

		
	if ($('.mainimg p').length == 0) {
		var next = $('.mainimg li:first').first();
		switchMainImage(next);
	}
	
	$('.mainimg ul li').hover(function() {
		switchMainImage(this);
	});
	

	$('.scrollbody').css('width', ($('.scrollbody img').length * 130) + 'px');
	
	$('.gallery .scrollright').click(function() {
		var sl = Math.abs(parseInt($('.scrollbody').css('marginLeft')));
		
		var sb = parseInt($('.scrollbody').css('width'))-parseInt($('.scroller').css('width'));
		
		sb-=115;
		
		if ( sl >  sb ) {
			return;
		}
		else $('.scrollbody').animate({'marginLeft': '-=130px'}, 'slow');		
	});
	
	
	$('.gallery .scrollleft').click(function() {
		var sl = Math.abs(parseInt($('.scrollbody').css('marginLeft')));
		
		var sb = parseInt($('.scrollbody').css('width'))-parseInt($('.scroller').css('width'));
		
		sb-=115;
		
		if ( sl <= 0 ) {
			return;
		}
		else $('.scrollbody').animate({'marginLeft': '+=130px'}, 'slow');		
	});
	
});