/**
 * Modified from: Galleria (http://monc.se/kitchen)
 *
 * It 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
 *
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.opensource.org/licenses/gpl-license.php
 **/

;(function(){

var $$;

$$ = jQuery.fn.loadThumbs = 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;
	}
	
	// Make mainPhoto invisible so it can fade in later
	var _mainPhoto = jQuery(document.mainPhoto).css('display','none');
	
	// build element specific options
	var _o = jQuery.meta ? jQuery.extend({}, opts, _container.data()) : opts;

	return this.each(function(){
		// loop through list
		jQuery(this).children('.galleryContainer').children('.thumbBorder').children('.thumbContainer').each(function(i) {
			
			// bring the scope
			var _container = jQuery(this);
			
			// 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 () {

				//-----------------------------------------------------------------
				// the image is loaded, let's create the thumbnail
		
				var _thumb = _img.clone(true).addClass('thumb').css('display','none');
				var w = Math.ceil( _img.width() / _img.height() * _container.height() );
				var h = Math.ceil( _img.height() / _img.width() * _container.width() );
				
				// Set scale for zoom level on thumbnail
				var _zoom = 1;
				var _thumbW =  _zoom * _container.width();
				var _thumbH =  _zoom * _container.height()
				
				// If the images is taller than it is wide
				if (w < h) {
					// Check if zoomed image will be wide enough to fill container
					if ((_thumbH*_img.width()/_img.height()) >= _container.width()) {
						_thumb.css({ width: 'auto', height: _thumbH, marginLeft: -( (_img.width() * _thumbH / _img.height()) - _container.width() )/2, marginTop:  -( _thumbH - _container.height() )/2});
					}
					// If the zoomed image isn't big enough, than just enlarge until it's the same width as the container
					else {
						_thumb.css({ width: _container.width(), height: 'auto', marginTop: -( (_img.height() * _container.width() / _img.width()) - _container.height() )/2});	
					
					}
				
				} 
				
				// If the image is wider than it is tall
				else {
					// Check if zoomed image will be tall enough to fill conatiner
					if ((_thumbW*_img.height()/_img.width()) >= _container.height()) {
						_thumb.css({ height: 'auto', width: _thumbW, marginLeft: -( _thumbW - _container.width() )/2, marginTop:  -( (_img.height() * _thumbW / _img.width()) - _container.height() )/2});
					}
					// If the zoomed image isn't big enough, than just enlarge until it's the same height as the container
					else {
						_thumb.css({ width: 'auto', height: _container.height(), marginLeft: -( (_img.width() * _container.height() / _img.height()) - _container.width() )/2});
					}
					
				}
				
				// add the click functionality to the _thumb and apply the active class to the <li>
				var _path = _src.substr(0,_src.lastIndexOf("/")); // Get gallery directory, e.g. turns "/Galleries/Artwork/Project 1/img33.jpg" to "/Galleries/Artwork/Project 1"		
				
				if (window.location.href.search("Project=") == -1) {
					_thumb.click(function() {
						//window.location = "?p=Gallery&project=" + _path;
					});
				}
				
				else {
					_container.click(function() {
						document.getElementById('mainPhoto').src = _src;
						$(".active").removeClass("active");
						$(this).parent().addClass("active");
					});
				}
				
				
				// create a wrapping div for the big image and caption
				//var _div = jQuery(document.createElement('div'));

				// prepend the thumb
				_container.append(_thumb);
				_container.append('<img class="imageCover" src="/Images/Transparent.gif" alt="" />');
				
				// and fade in, if you like  <-- yey!
				if (_o.fadeIn) { _thumb.fadeIn();_mainPhoto.fadeIn(); }
				else { _thumb.css('display','block');_mainPhoto.css('display','block'); }
				
				//-----------------------------------------------------------------
				
				// finally delete the original image
				_img.remove();
				
			}).error(function () {
				
				// Error handling
			    _container.html('<div class="error">Coming soon. . .</div>');
			
			}).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;
};

})();