/* gallery box */

mgallery = {
	gallerySelector: "div[rel^='gallery']",
	veilLayer: 'mgallery-veil',
	boxHtml: '<div class="mgallery-box">\
				<span class="mgallery-close">[x]</span>\
				<div class="mgallery-image"></div>\
				<ul class="mgallery-previews"></ul>\
		  	  </div>\
		 	 ',
		 	 
	mgalHeight: 0, // cached sizes of div.mgallery-image width and height
	mgalWidth: 0,  // cached sizes of div.mgallery-image width and height	
	
	/* 
		Attaching to all gallerys
	
	 */
	init: function() {
		$(this.gallerySelector).each(function() {
			$(this).bind('click', function() {
				mgallery.show($(this)); // binding self on founded gallery's
			});
		});
	},
	
	/*
		Display gallery box
		
	 */
	show: function(container) {
		// adding box
		$('body').children(':first').before($('<div class="'+mgallery.veilLayer+'"></div>'));
		$('div.'+mgallery.veilLayer).before($(mgallery.boxHtml));
		$('div.mgallery-box span.mgallery-close').bind('click', mgallery.close);

		// save box properties		
		mgallery.mgalHeight = parseInt($('div.mgallery-box div.mgallery-image').height());
		mgallery.mgalWidth  = parseInt($('div.mgallery-box div.mgallery-image').width());
		
		// adding photos
		container.children('a').each(function() {
			var imageLink = $(this).attr('href');
			var previewLink = $(this).children('img:first').attr('src');
			var previewAlt = $(this).children('img:first').attr('alt');
			var liObj = $('<li><img src="'+previewLink+'" alt="'+previewAlt+'"/></li>');
			
			liObj.attr('imageLink', imageLink);
			liObj.bind('click', function() {
				mgallery.switchpicture($(this));
			});
			$('div.mgallery-box ul.mgallery-previews').append(liObj);
		});
	
		mgallery.switchpicture($('div.mgallery-box ul.mgallery-previews li:first'));
		return false;
	},
	
	/*
		Switch picture, by clicking on 
		preview.
	
	 */
	switchpicture: function(container) {
		var imageLink = container.attr('imageLink');
		
		$('div.mgallery-box div.mgallery-image').empty();
		$('div.mgallery-box div.mgallery-image').append($('<div id="mgallery-image"><img width="100%" height="100%" src="'+imageLink+'"/></div>'));
		
		$('div.mgallery-box ul.mgallery-previews li').removeClass('selected');
		container.addClass('selected');
		
		mgallery.fixpicture();
		return false;
	},
	
	/* 
		Fix picture size,
		portrait or landscape.
	
	 */
	fixpicture: function() {		
		var imgHeight = parseInt($('div.mgallery-box div#mgallery-image img').height()); 
		var imgWidth  = parseInt($('div.mgallery-box div#mgallery-image img').width());
		
		// get ratio
		var w_ratio = mgallery.mgalWidth / imgWidth;
		var h_ratio = mgallery.mgalHeight / imgHeight;
		var ratio = w_ratio;
		if(w_ratio > h_ratio) {
			ratio = h_ratio;
		}
		
		// correcting height and width
		var newImgHeight = imgHeight;
		var newImgWidth  = imgWidth;
		if(imgHeight > imgWidth) {
			newImgWidth  = (ratio * imgWidth);
			newImgHeight = (ratio * imgHeight);
		} else {
			newImgWidth  = (ratio * imgWidth);
			newImgHeight = (ratio * imgHeight);
		}
		
		$('div.mgallery-box div#mgallery-image img').height(newImgHeight+'px');
		$('div.mgallery-box div#mgallery-image img').width(newImgWidth+'px');
	},
	
	close: function(galleryBox) {
		$('div.'+mgallery.veilLayer).remove();
		$('div.mgallery-box').remove();
	}
}

$(function() {
	mgallery.init();
});