/**
 * 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 if you choose so, scaled or unscaled, 
 * centered and cropped inside a fixed thumbnail box defined by CSS.
 * 
 * The core of Galleria lies in it's smart preloading behaviour, snappiness and the fresh absence 
 * of obtrusive design elements. Use it as a foundation for your custom styled image gallery.
 *
 * MAJOR CHANGES v.FROM 0.9
 * Galleria now features a useful history extension, enabling back button and bookmarking for each image.
 * The main image is no longer stored inside each list item, instead it is placed inside a container
 * onImage and onThumb functions lets you customize the behaviours of the images on the site
 *
 * Tested in Safari 3, Firefox 2, MSIE 6, MSIE 7, Opera 9
 * 
 * Version 1.0
 * Februari 21, 2008
 *
 * Copyright (c) 2008 David Hellsing (http://monc.se)
 * Licensed under the GPL licenses.
 * http://www.gnu.org/licenses/gpl.txt
 **/

/*------------------------------------------------------------------------------------*/
/*  Galleria(WP) V1.0                                                                 */
/*                                                                                    */
/*   CAUTION!!!    This is not a original version of Galleria V1.0.                   */
/*                                                                                    */
/*   Major modification : replaced all '$' global to 'jQuery'                         */
/*                        (to keep avoid global name conflicts)                       */
/*                                                                                    */
/*                        added the second caption line                               */
/*                                                                                    */
/*                                                     modified by Y2 May 11, 2008    */
/*------------------------------------------------------------------------------------*/

(function($) {

var galleria;

var scroll = 0;

/**
 * 
 * @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({options});
 * @desc Create a a gallery from an unordered list of images with thumbnails
 * @options
 *   insert:   (selector string) by default, Galleria will create a container div before your ul that holds the image.
 *             You can, however, specify a selector where the image will be placed instead (f.ex '#main_img')
 *   history:  Boolean for setting the history object in action with enabled back button, bookmarking etc.
 *   onImage:  (function) a function that gets fired when the image is displayed and brings the jQuery image object.
 *             You can use it to add click functionality and effects.
 *             f.ex onImage(image) { image.css('display','none').fadeIn(); } will fadeIn each image that is displayed
 *   onThumb:  (function) a function that gets fired when the thumbnail is displayed and brings the jQuery thumb object.
 *             Works the same as onImage except it targets the thumbnail after it's loaded.
 *
**/

/**************************************************************************************/
galleria = 
jQuery.fn.galleria = function( $options ) {

	// shrink mode
	if ( $options.scroll ) { 
		scroll = $options.scroll;
	}

	// check for basic CSS support 
	//if (!galleria.hasCSS()) { return false; }  // Opera returns false. why?

	// init the modified history object
	//jQuery.historyInit( galleria.onPageLoad ); // 

	// set default options
	var $defaults = {
		insert      : '.galleria_stage',
		history     : true,
		clickNext   : true,
		//onImage     : function( image, caption, thumb ) {},
		onImage     : function( image, caption1, caption2, thumb ) {}, // modified by Y2
		onThumb     : function( thumb ) {}
	};

	// extend the options
	var $opts = jQuery.extend( $defaults, $options );

	// bring the options to the galleria object
	for (var i in $opts) {
		jQuery.galleria[i]  = $opts[i];
	}

	// if no insert selector, create a new division and insert it before the ul
	var _insert = ( jQuery($opts.insert).is($opts.insert) ) ? 
		jQuery($opts.insert) : 
		jQuery(document.createElement('div')).insertBefore(this);

	// create a wrapping div for the image
	var _div = jQuery(document.createElement('div')).addClass( 'galleria_wrapper' );

	// create a caption span
	//var _span = jQuery(document.createElement('span')).addClass('caption');
	var _span1 = jQuery(document.createElement('span')).addClass('caption1');
	var _span2 = jQuery(document.createElement('span')).addClass('caption2');

	// inject the wrapper in the insert selector
	//_insert.addClass('galleria_container').append(_div).append(_span)
	//
	_insert.addClass('galleria_container').append(_div).append(_span1).append(_span2);

	//-------------

	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;

			// remove the clickNext if image is only child
			_o.clickNext = jQuery(this).is(':only-child') ? false : _o.clickNext;

			// try to fetch an anchor
			var _a = jQuery(this).find('a').is('a') ? jQuery(this).find('a') : false;

			// 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 = _a ? _a.attr('href') : _img.attr('src');

			// find a title
			var _title = _a ? _a.attr('title') : _img.attr('title');

			// create loader image
			var _loader = new Image();

			// check url and activate container if match
			if (_o.history && (window.location.hash && window.location.hash.replace(/\#/,'') == _src)) {
				_container.siblings('.active').removeClass('active');
				_container.addClass('active');
			}

			// begin loader
			jQuery(_loader).load( function () {

				// try to bring the alt
				jQuery(this).attr('alt',_img.attr('alt'));

				//-----------------------------------------------------------------
				// the image is loaded, let's create the thumbnail

				//** modified by Y2  (force to scale thumbnail images) **//
				var _thumb = _a ? 
					//_a.find('img').addClass('thumb noscale').css('display','none') :
					_a.find('img').addClass('thumb').css('display','none') : 
					_img.clone(true).addClass('thumb').css('display','none');

				if ( $options.cropThumbnail ) { 
					_thumb.addClass('noscale');
				}

				if (_a) { _a.replaceWith(_thumb); }

				if (!_thumb.hasClass('noscale')) { // scaled tumbnails!

					//var w = Math.ceil( _img.width() / _img.height() * _container.height() );
					//var h = Math.ceil( _img.height() / _img.width() * _container.width() );

					// modified by Y2
					var w = Math.ceil( _thumb.width() / _thumb.height() * _container.height() );
					var h = Math.ceil( _thumb.height() / _thumb.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 { // Center thumbnails.

					// a tiny timer fixed the width/height
					window.setTimeout( function() {
						_thumb.css({
							marginLeft: -( _thumb.width() - _container.width() )/2, 
							marginTop:  -( _thumb.height() - _container.height() )/2
						});
					}, 200 ); // incresed ticks ( 1ms => 200ms )
				}

				// add the rel attribute
				_thumb.attr('rel',_src);

				// add the title attribute
				_thumb.attr('title',_title);

				// add the click functionality to the _thumb
				_thumb.click( function() {
					//jQuery.galleria.activate( _src );

					// added 2nd argument : (stage ID)   V1.1  5/11 2008
					jQuery.galleria.activate( _src, _insert.attr('id') );

				});

				// hover classes for IE6
				_thumb.hover(
					function() { jQuery(this).addClass('hover'); },
					function() { jQuery(this).removeClass('hover'); }
				);
				_container.hover(
					function() { _container.addClass('hover'); },
					function() { _container.removeClass('hover'); }
				);
				
				// prepend the thumbnail in the container
				_container.prepend( _thumb );
				

				// show the thumbnail
				_thumb.css( 'display','block' );

				// call the onThumb function
				_o.onThumb( jQuery(_thumb) );

				// check active class and activate image if match
				if ( _container.hasClass('active') ) {
					//jQuery.galleria.activate( _src );

					// added 2nd argument : (stage ID)   V1.1  5/11 2008
					jQuery.galleria.activate( _src, _insert.attr('id') );

					//_span.text(_title);
				}

				//-----------------------------------------------------------------

				// 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 NextSelector
 *
 * @desc Returns the sibling sibling, or the first one
 *
**/

galleria.nextSelector = function(selector) {
	return jQuery(selector).is(':last-child') ?
		   jQuery(selector).siblings(':first-child') :
    	   jQuery(selector).next();
    	   
};

/**
 *
 * @name previousSelector
 *
 * @desc Returns the previous sibling, or the last one
 *
**/

galleria.previousSelector = function(selector) {
	return jQuery(selector).is(':first-child') ?
		   jQuery(selector).siblings(':last-child') :
    	   jQuery(selector).prev();
    	   
};

/**
 *
 * @name hasCSS
 *
 * @desc Checks for CSS support and returns a boolean value
 *
**/

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

/**
 *
 * @name onPageLoad
 *
 * @desc The function that displays the image and alters the active classes
 *
 * Note: This function gets called when:
 * 1. after calling jQuery.historyInit();
 * 2. after calling jQuery.historyLoad();
 * 3. after pushing "Go Back" button of a browser
 *
**/

//galleria.onPageLoad = function( _src ) {
galleria.onPageLoad = function( _src, _target_id ) {

	// get the stage
	//var _stage = jQuery('#' + _target_id );

	// get the wrapper
	//var _wrapper = jQuery( '.galleria_wrapper' );
	var _wrapper = jQuery('#' + _target_id + ' div.galleria_wrapper' );

	// get the thumb
	var _thumb = jQuery('.galleria img[@rel="'+_src+'"]');

	if ( _src ) {

		// new hash location
		//if (jQuery.galleria.history) {
		//	window.location = window.location.href.replace(/\#.*/,'') + '#' + _src;
		//}

		// alter the active classes
		_thumb.parents('li').siblings('.active').removeClass('active');
		_thumb.parents('li').addClass('active');

		// define a new image
		var _img   = jQuery( new Image() ).attr('src',_src).addClass('replaced');

		// empty the wrapper and insert the new image
		_wrapper.empty().append( _img );

		// shrink image (V1.0.3 May 09 2008)
		if ( scroll == 0 ) { 
			// shrink mode
			var  image_width  = _img.width();
			var  image_height = _img.height();

			if ( _wrapper.width() < _img.width() ) {
				image_width  = _wrapper.width() / _img.width() * _img.width();
				image_height = _wrapper.width() / _img.width() * _img.height();

			}
			if ( jQuery.browser.msie ) {
				// IE always expand the wrapper 
				
				var  _ie_wrapper = jQuery('#' + _target_id );
				
				if ( _ie_wrapper.width() < _img.width() ) { // May 18 2008
					image_width  = _ie_wrapper.width() / _img.width() * _img.width();
					image_height = _ie_wrapper.width() / _img.width() * _img.height();
				}
			}
			_img.width(image_width);
			_img.height(image_height);
		}

		// insert the caption
		//_wrapper.siblings('.caption').text(_thumb.attr('title'));

		// fire the onImage function to customize the loaded image's features
		//jQuery.galleria.onImage(_img,_wrapper.siblings('.caption'),_thumb);

		//*********************************************************************//
		//** divide title text into caption and EXIF meta datas       by Y2   *//
		//*********************************************************************//
		var captionText ="";
		
		//alert( "Text : " + _thumb.attr('title') );
		
		if ( _thumb.attr('title') ) {
			captionText = _thumb.attr('title').split("::");
		}
		
		if ( captionText[0] != null ) {
			_wrapper.siblings('.caption1').text(captionText[0]);
		} else {
			_wrapper.siblings('.caption1').text('');
		}
		
		if ( captionText[2] != null ) {
			captionText[1] += captionText[2]; // 5/13 2008 
		}
		
		_wrapper.siblings('.caption2').text(captionText[1]);

		// fire the onImage function to customize the loaded image's features
		jQuery.galleria.onImage( _img,
								 _wrapper.siblings('.caption1'),
								 _wrapper.siblings('.caption2'),
								 _thumb );
		//*********************************************************************//

		// add clickable image helper
		if(jQuery.galleria.clickNext) {
			//_img.css('cursor','pointer').click( function() { jQuery.galleria.next(); })
			_img.css('cursor','pointer').click( function() { 
													jQuery.galleria.next( _target_id );
												})
		}

	} else {

		// clean up the container if none are active
		_wrapper.siblings().andSelf().empty();

		// remove active classes
		jQuery('.galleria li.active').removeClass('active');
	}

	// place the source in the galleria.current variable
	//jQuery.galleria.current = _src;
	jQuery.galleria.current[_target_id] = _src;

}

/**
 *
 * @name jQuery.galleria
 *
 * @desc The global galleria object holds four constant variables and four public methods:
 *       jQuery.galleria.history = a boolean for setting the history object in action with named URLs
 *       jQuery.galleria.current = is the current source that's being viewed.
 *       jQuery.galleria.clickNext = boolean helper for adding a clickable image that leads to the next one in line
 *       jQuery.galleria.next() = displays the next image in line, returns to first image after the last.
 *       jQuery.galleria.prev() = displays the previous image in line, returns to last image after the first.
 *       jQuery.galleria.activate(_src) = displays an image from _src in the galleria container.
 *       jQuery.galleria.onImage(image,caption) = gets fired when the image is displayed.
 *
**/

jQuery.extend( { 

	galleria : {

		//current : '',
		current : new Array(),

		onImage : function(){},

		//activate : function( _src ) {
		activate : function( _src, _target_id ) {

			//if (jQuery.galleria.history) {
			//	jQuery.historyLoad( _src );
			//} else {
				//galleria.onPageLoad( _src );
				galleria.onPageLoad( _src, _target_id );
			//}
		},

		//next : function() {
		next : function( _target_id ) {

			//var _next = jQuery(galleria.nextSelector(jQuery('.galleria' img[@rel="'+jQuery.galleria.current+'"]').parents('li'))).find('img').attr('rel');

			var _next = jQuery( galleria.nextSelector( jQuery( '.galleria img[@rel="'+jQuery.galleria.current[_target_id]+'"]').parents('li'))).find('img').attr('rel');

			//jQuery.galleria.activate( _next );
			jQuery.galleria.activate( _next, _target_id );
		},

		//prev : function() {
		prev : function( _target_id ) {

			//var _prev = jQuery(galleria.previousSelector(jQuery('.galleria	img[@rel="'+jQuery.galleria.current+'"]').parents('li'))).find('img').attr('rel');

			var _prev = jQuery( galleria.previousSelector( jQuery( '.galleria img[@rel="'+jQuery.galleria.current[_target_id]+'"]').parents('li'))).find('img').attr('rel');

			//jQuery.galleria.activate( _prev );
			jQuery.galleria.activate( _prev, _target_id );
		}
	}

});


})(jQuery);