$(document).ready(function() {      
	//Execute the slideShow, set 4 seconds for each images
	slideShow(4000);
	console.log("monk_gallery.js init");
});

/**
 *	console.log()
 */
if (typeof window.console === 'undefined') { var console = {}; console.log = function (msg) { return; }; }
			
/**
 * use the li-lighthouse methode of creating data
 * 	<div id="gallery">
 *		<ul>
 *			<li><a href="image_small_1.jpg" title="image 1" ><img src="image_big_1.jpg" width="250" height="250" title="title text" alt="alt text" /></a></li>
 *			<li><a href="image_small_2.jpg" title="image 2" ><img src="image_big_2.jpg" width="250" height="250" title="title text" alt="alt text" /></a></li>
 *		</ul>
 *	</div>
 *	
 * script based upon:
 *		- http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited
 *		- http://designm.ag/tutorials/image-rotator-css-jquery/
 *		- http://cssglobe.com/post/1238/style-your-image-links
 */
function slideShow(speed) {

	// prepend a div container for viewing the slideshow and the description caption
	//$('#gallery').prepend('<div class="gallery_main_image"><img src="test.jpg" alt="" /><div class="desc"><div class="block"><h3></h3><p></p></div></div></div>');

	//  fake the gallery function to open the first (we will select the last li, so gallery will open the next/first)
	//$("#gallery ul li:last").addClass('active');
	
	// just start with a random image
	var randomIMG = Math.floor (Math.random ()*$("#gallery ul li").length);
	$("#gallery ul li").eq(randomIMG).addClass('active');
	
	$(".gallery-btn").click(function(event){
		
		event.preventDefault();
	
		// reset timer
		clearInterval(timer);	

		if ($(this).hasClass("left")){
			// left
			console.log("navigation LEFT");
			
			var current = ($('#gallery ul li.active') ? $('#gallery ul li.active') : $('#gallery ul li:first'));
			$("#gallery ul li").removeClass('active'); 	// Remove class of 'active' on all lists

			current.prev().prev().addClass('active');  	// add class of 'active' on this.previous list only
			gallery(); 					// and use gallery again to go to the next image

			// and start timer again
			timer = setInterval('gallery()',speed);         
		} else {
			// right
			console.log("navigation RIGHT");
			
			gallery(); 					// and use gallery again to go to the next image

			// and start timer again
			timer = setInterval('gallery()',speed);         
		}

	});
	

	// Display the caption with transparancy
	$('.gallery_main_image .block').css({
		opacity: 0.7, 
		bottom:0
	}).slideUp(0);
	
	// show loading throbber-icon
	$('#loader').addClass('loading').fadeIn();

	// Call the gallery function to run the slideshow with interval speed   
	var timer = setInterval('gallery()',speed);
		
	// extra image to show some feedback
	$("#gallery ul li a").prepend('<span class="galleryhelp"></span>');

	var borderWidth = parseInt ( $("#gallery ul li a img").css('borderLeftWidth') );
	// resize the galleryhelp layer to the thumbnails width/height
	$(".galleryhelp").css ({
		'width': $("#gallery ul li a img").width() + (borderWidth*2), 
		'height': $("#gallery ul li a img").height() + (borderWidth*2)
	});
	$(".galleryhelp").hide();
		
	//Click and Hover events for thumbnail list
	$("#gallery ul li").click(function(event){ 
			
		// the default action of the event will not be triggered
		event.preventDefault(); 
		
		// scroll to the top of the page	
		$('html,body').animate({
			scrollTop: 0
		});
		
		if ($(this).is(".active")) {  
			// If it's already active, then...
			return false; 					// Don't click through
		} else {
			$("#gallery ul li").removeClass('active'); 	// Remove class of 'active' on all lists
			$(this).prev().addClass('active');  		// add class of 'active' on this.previous list only
			gallery(); 					// and use gallery again to go to the next image
			// reset timer
			clearInterval(timer); 
			// and start timer again
			timer = setInterval('gallery()',speed);         
		}
		
	}).hover(function(){
		// TODO: hide the discription/r4
		$(this).addClass('hover');
		$(this).find(".galleryhelp").fadeIn();
	}, function() {
		// TODO: show the discription
		$(this).removeClass('hover');
		$(this).find(".galleryhelp").fadeOut();
	});
		
	// load the image, place the image in the center of the gallery_main_image
	$(".gallery_main_image img").load(function() {
		
		console.log("--- loading ----");
		
		// Handler for .load() called.
		var obj = getOriginalWidthOfImg(this);
		var viewerWidth = ($(".gallery_main_image").innerWidth());
		var viewerHeight = ($(".gallery_main_image").innerHeight());
		
		$(".gallery_main_image img").css ({
			'margin-left' : (viewerWidth - obj.width)/2 , 
			'margin-top' : (viewerHeight - obj.height)/2
		});
		
		// show caption again
		$('.gallery_main_image .block').slideDown(500);
		
		$(".gallery_main_image img").animate({
			opacity:1
		});
		
		// remove loading throbber-icon
		$('#loader').removeClass('loading').fadeOut();

	})
	
	// start the gallery
	gallery();
		
	// pause the slideshow on mouse over and 
	$('.gallery_main_image').hover(	function () {
		$(this).css('cursor','wait');
		clearInterval(timer);
		blockToggle(false);
	}, function () {
		//$(this).css('cursor','default');
		timer = setInterval('gallery()',speed);         
		blockToggle(true);
	});   
};


function gallery() {
	
	console.log ("start gallery");
	
	//if no <LI> have the show class, grab the first <LI>
	var current = ($('#gallery ul li.active') ?  $('#gallery ul li.active') : $('#gallery ul li:first'));
	
	// remove active class from the all <li>
	$('#gallery ul li').removeClass('active').find(".galleryhelp").fadeOut();
	// remove the class from the active one
	// current.removeClass ('active');
	// current.find(".galleryhelp").fadeOut();
		
	// Get next image, if it reached the end of the slideshow, rotate it back to the first image
	var next = current.next().length ? current.next() : $('#gallery ul li:first');
	next.find(".galleryhelp").fadeIn();
	next.addClass('active'); 
		
	// Get next image caption
	var title = next.find('img').attr('title'); 
	var desc = next.find('img').attr('alt');    
		
	var imgURL = next.find('a').attr("href");
	var imgAlt = next.find('img').attr("alt"); // Get Alt Tag of Image

	console.log("--- alt: " + imgAlt);
	
	// fade image out/change image url en alt/ fade image in
	$(".gallery_main_image img").animate({
		opacity: 0
	},300, function (){
		
		// show loading throbber-icon
		$('#loader').fadeIn().addClass('loading');
			
		// Hide the caption first, and then set title and desc
		$('.gallery_main_image .block').slideUp(300, function () {
			console.log("--- slideUp - title: " + desc);
			$('.gallery_main_image .block h3').html(title); 
			$('.gallery_main_image .block p').html(desc); 
		}); 
		
		$(this).attr({
			src: imgURL, 
			alt: imgAlt
		});
			
	});

}

function blockToggle(isVisible){
	if(!isVisible){
		$('.gallery_main_image .block').slideUp(300); 	
	} else {
		$('.gallery_main_image .block').slideDown(300); 	
	}
}

function getOriginalWidthOfImg(img_element) {
	var t = new Image();
	t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;
	return {
		width : t.width , 
		height : t.height
		};
}