/**
 * uGallery jQuery plugin
 * Author: Miro Zoricak (zoricak at udesign.sk)
 * Website: http://zori.udesign.sk
 * v 1.0 beta
 */
(function($){
	var settings = {
		width: 333,
		height: 488,
		thumbWidth: 52,
		thumbHeight: 52,
		thumbOpacity: 0.7,
		thumbHoverOpacity: 1,
		displayAlt: true
	}
	
	$.uGallery = function(userSettings){
		var images = [];
		$.extend(settings, userSettings);
		// parse input structure to images
		$("ul.gal>li>img").each(function(index, element){
			images[index] = $(element)
				.css({width: element.width+"px", height: element.height+"px"})
				.attr("src", $(element).attr("src"))
				.attr("alt", $(element).attr("alt"));
		});
		// recreate gallery structure using divs
		$("ul.gal").replaceWith("<div class='gal'><div class='gal-thumbs'><div class='partnerCeramiche'><a href=\'http://www.saimeceramiche.com\' title=\'Visita il sito di Saime\'><img src=\'images/logo/saime.jpg\' alt=\'Saime\' /></a><br/><a href='http://www.castelvetro.it' title='Visita il sito di CastelVetro'><img src='images/logo/castelvetro.jpg' alt='Castelvetro' /></a><br/><a href='http://www.ascot.it' title='Visita il sito di Ascot'><img src='images/logo/ascot.gif' alt='ascot' /></a><a href='http://www.savoiaitalia.it' title='Visita il sito di Savoia'><img src='images/logo/savoia.gif' alt='Savoia' /></a><a href=\'http://www.likeitalia.it\' title=\'Visita il sito di Like\'><img src=\'images/logo/like.jpg\' alt=\'Like\' /></a><br/><br/></div></div><div class='gal-main-viewer'></div></div>");
		for(var i = 0; i < images.length; i++){ // fill it with images
			$("div.gal-thumbs").append(makeThumb(images[i]));
		}
		$("div.gal-thumbs>img").wrap("<div class='gal-thumb'><div class='gal-thumb-padder'></div></div>");
		// display the first thumb image in main viewer
		$("div.gal-thumbs>div.gal-thumb>div.gal-thumb-padder:first>img").trigger('click');
		// style the gallery
		setupCSS(images);
		// fade thumbs to the initial state
		$("div.gal-thumb-padder>img").fadeTo("slow", settings.thumbOpacity);
		// add thumb highlight onmouseover behaviour
		$("div.gal-thumb-padder>img").hover(
			function(){ $(this).fadeTo("fast", settings.thumbHoverOpacity); }, 
			function(){ $(this).fadeTo("slow", settings.thumbOpacity); }
		);
	}
	
	/**
	 * crates proportionally resized image with onclick showing full image in image viewer
	 */
	makeThumb = function(img){
		var image = $("<img src='"+$(img).attr("src")+"' alt='"+$(img).attr("alt")+"' />");
		image.css({width: "52px", height: "52px"});
		image.css({msInterpolationMode: "bicubic"}); // smooth out thumbs in IE7
		image.bind("click", img, function(e){
			var image = $("<img src='"+$(img).attr("src")+"' alt='"+$(img).attr("alt")+"' />");
			//image.css(proportionalDimensions(img, {x: settings.width - 20, y: settings.height - 20}));
			var alt = $("<div class='gal-alt'>"+$(img).attr("alt")+"</div>");
			alt.css({
				clear: "both", 
				width: 333 +"px", 
				padding: "10px", 
				"background-color": "black", 
				"margin": "auto",
				color: "white",
                textAlign: "left"
			});
			alt.fadeTo("fast", 0.5);
			$("div.gal-main-viewer").fadeOut("slow", function(){
				$(this).html(image).hide().fadeIn("slow").append(alt);
				if(settings.displayAlt){
					$("div.gal-alt").animate({marginTop: "-36px"}, 600);
				}
			});
		});
		return image;
	}
	
	/**
	 * style the gallery
	 */
	setupCSS = function(images){
		$("div.gal-thumb").css({
			float: "right", 
			width: settings.thumbWidth+"px", 
			height: settings.thumbHeight+"px", 
			"text-align": "center", 
			"margin": "5px 8px 0px 0px",
			border: "1px solid #fff",
			padding: "3px 2px 2px 2px",
			cursor: "pointer",
			overflow: "hidden"
		});
		
		$("div.gal-thumb-padder").css({
			margin: "auto",
			width: settings.thumbWidth-5+"px",
			height: settings.thumbHeight-2+"px",
			overflow: "hidden"
		});
		
		$("div.gal").css({
			width: "480px",
			overflow: "hidden",
            marginLeft: "0px",
            /*border: "1px solid red",*/
            marginTop: "0px"
		});
		
		$("div.gal-main-viewer").css({
			width: "333px", 
			height: settings.height+"px", 
			"text-align": "center",
			overflow: "hidden",
			/*margin: "auto",*/
			/*float: "right",*/
			/*border: "1px solid green",*/
			marginLeft: "2px",
            marginTop: "0px"
		});
		
		$("div.gal-thumbs-wrapper").css({
			width: settings.width-20+"px", 
			margin: "auto", 
			overflow: "hidden",
			"padding-top": "25px",
			"padding-bottom": "10px"
		});
		
		$("div.gal-thumbs").css({ 
			width: "140px",
			float: "right"
		});
		
		$("div.gal-thumb>img").css("background-color", "black");
	}
})(jQuery)