/**
 * Galleria (http://monc.se/kitchen)
 *
 * Galleria is a javascript image gallery written in jQuery.
 * It loads the images one by one from an unordered list and displays thumbnails when each image is loaded
 * It will create thumbnails for you, scaled or unscaled, and center them in a fixed thumbnail box
 * You can also use custom thumbnails like a regular html gallery
 * A caption can be extracted from the title attribute
 *
 * MAIN FEATURES
 * - Unobtrusive javascript
 * - Lightweight (2.5k)
 * - Displays the thumbnail when the actual image is loaded
 * - Unstyled - create your own gallery style using CSS
 * - Superfast image browsing since the images are preloaded one at a time in the background
 * - Can scale thumbnails to fit in thumbnail container
 * - Can be used with custom thumbnails
 * - Options are extracted from exisiting markup
 * - Clicking the main image will display the next in line
 * - Stylable caption from image or anchor title
 * - jQuery plugin - takes one line to implement
 * - Browserproof
 *
 * Tested in Safari 3, Firefox 2, MSIE 6, MSIE 7, Opera 9
 * 
 * Version 0.9
 * Februari 13, 2008
 *
 * Copyright (c) 2008 David Hellsing (http://monc.se)
 * Dual licensed under the MIT and GPL licenses.
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.opensource.org/licenses/gpl-license.php
 **/

;(function(){

var $$;

/**
 * 
 * @desc Convert images from a simple html <ul> into a thumbnail gallery
 * @author David Hellsing
 * @version 1.0
 *
 * @name Galleria
 * @type jQuery
 *
 * @cat plugins/Media
 * 
 * @example jQuery('ul.gallery').galleria({ nextText:'Next image', fadeIn: true });
 * @desc Create the gallery from an unordered list of images with thumbnails faded in and a custom title
 *
 * @options nextText:String fadeIn:Boolean
 *
**/

$$ = jQuery.fn.galleria = function(options) {
	
	// set default options
	var defaults = { 
		nextText : 'Click to view the next image',
		fadeIn : true
	};
	var opts = jQuery.extend(defaults, options);
	
	// check for basic CSS support
	if (!$$.hasCSS()) {
		return false;
	}
	
	return this.each(function(){
		
		// add the Galleria class
		jQuery(this).addClass('galleria')
		
		// loop through list
		jQuery(this).children('li').each(function(i) {
			
			// bring the scope
			var _container = jQuery(this);
			                
			// build element specific options
			var _o = jQuery.meta ? jQuery.extend({}, opts, _container.data()) : opts;
			
			// reference the original image as a variable and hide it
			var _img = jQuery(this).children('img').css('display','none');
			
			// extract the original source
			var _src = _img.is('img') ? _img.attr('src') : jQuery(this).children('a').attr('href');
			
			// create loader image            
			var _loader = new Image();
			
			// begin loader
			jQuery(_loader).load(function () {

				// add the nextClick functionality for our main img
				$(this).click(function() {
					_container.removeClass('active');
					jQuery($$.nextLi(_container)).addClass('active');
				});

				// add a title text to our main image
				$(this).attr('title',_o.nextText);
				
				// Create caption span
				var _span = jQuery(document.createElement('span'));
				_span.addClass('caption').text(_img.attr('title'));
				
				// grab the alt
				jQuery(this).attr('alt',_img.attr('alt'));

				//-----------------------------------------------------------------
				// the image is loaded, let's create the thumbnail
				
				var _thumb = _img.clone(true).addClass('thumb cloned').css('display','none');

				if (!_thumb.hasClass('noscale') && _thumb.hasClass('cloned')) { // scaled thumbnails
					
					var w = Math.ceil( _img.width() / _img.height() * _container.height() );
					var h = Math.ceil( _img.height() / _img.width() * _container.width() );
					if (w < h) {
						_thumb.css({ height: 'auto', width: _container.width(), marginTop: -(h-_container.height())/2 });
					} else {
						_thumb.css({ width: 'auto', height: _container.height(), marginLeft: -(w-_container.width())/2 });
					}
					
				} else if (_thumb.hasClass('cloned')) { // non-scaled thumbnails
					
					_thumb.css({
						marginLeft: -( _img.width() - _container.width() )/2, 
						marginTop:  -( _img.height() - _container.height() )/2
					});
					
				} else { // There must be a custom thumbnail inside the anchor

					_thumb = _container.children('a').children('img')
							 .addClass('thumb noscale').css('display','none')
							 .attr('title', _container.children('a').attr('title'));
							
					_span.text(_container.children('a').attr('title'));
					_container.children('a').replaceWith(_thumb);
					
					if (!jQuery.browser.opera) { // opera does this wrong, sorry
						_thumb.css({
							marginLeft: -( _thumb.width() - _container.width() )/2, 
							marginTop:  -( _thumb.height() - _container.height() )/2
						});
					}
				}
				
				// add the click functionality to the _thumb and apply the active class to the <li>
				_thumb.click(function() {
					_container.siblings('.active').removeClass('active');
					_container.addClass('active');
				});
				
				// hover class for IE6
				_thumb.hover(
					function() { jQuery(this).addClass('hover'); },
					function() { jQuery(this).removeClass('hover'); }
				);
				
				// create a wrapping div for the big image and caption
				var _div = jQuery(document.createElement('div'));
				_div.prepend(_span).prepend(this);

				// prepend the wrapper & thumb
				_container.prepend(_div).prepend(_thumb);
				
				// and fade in, if you like  <-- yey!
				if (_o.fadeIn) { _thumb.fadeIn(); }
				else { _thumb.css('display','block'); }
				
				//-----------------------------------------------------------------
				
				// finally delete the original image
				_img.remove();
				
			}).error(function () {
				
				// Error handling
			    _container.html('<span class="error" style="color:red">Error loading image: '+_src+'</span>');
			
			}).attr('src', _src);
		});
	});
};

/**
 *
 * @name gallery.nextLi
 * @desc Return the next list container
 * @type Element
 * 
 * @example $$.nextLi(container)
 *
**/

$$.nextLi = function(li) {
	return jQuery(li).next().is('li') ? 
    	   jQuery(li).next() : 
    	   jQuery(li).siblings(':first-child');
};

/**
 *
 * @name gallery.hasCSS
 * @desc Checks if basic CSS is supported and return boolean value
 * @type Boolean
 * 
 * @example $$.hasCSS()
 *
**/

$$.hasCSS = function()  {
	$('body').append(
		jQuery(document.createElement('div')).attr('id','css_test')
		.css({ width:'1px', height:'1px', display:'none' })
	);
	var _v = ($('#css_test').width() != 1) ? false : true;
	$('#css_test').remove();
	return _v;
};

})();