/* Galería de Claudia Pérez Pavón - Santiago Itzcoatl - 2011*/
(function($){
	$.fn.extend({
		
		bxGallery:function(options){
			/* variables */
			var defaults={
				maxwidth:'',
				maxheight:'',
				thumbwidth:200,
				thumbcrop:true,
				croppercent:.35,
				thumbplacement:'bottom',
				thumbcontainer:'',
				opacity:.7,
				load_text:'',
				load_image:'../loading.gif',
				wrapperclass:'outer'};
			var options=$.extend(defaults,options);
			var o=options;
			var cont='';
			var caption='';
			var $outer='';
			var $orig=this;
			var tall=0;
			var wide=0;
			var showing=0;
			var i=0;
			var k=$orig.find('img').size();
			
			/* functions */
			preload_img();
			/* preload --------------------------------------------------------------------------*/
			function preload_img(){
				$orig.hide();
				if(o.load_text!=''){
					$orig.before('<div id="loading">'+o.load_text+'</div>')
					}
				else{
					$orig.before('<div id="loading"><img src="'+o.load_image+'" /></div>')
					}	
				$orig.parent().find('#loading').css({
					'textAlign':'center','width':o.maxwidth
					});
				$orig.find('img').each(function(){
					var the_source=$(this).attr('src');
					var img=new Image();
					img.src=the_source;
					img.onload=function(){
						preload_check()
						}
					})
				}
			/* preload check --------------------------------------------------------------------*/
			function preload_check(){
				i++;if(i==k){
					init()
					}
				}
			/* init -----------------------------------------------------------------------------*/
			function init(){
				set_layout();
				set_main_img();
				place_thumbcontainer();
				set_thumbs()
				}
			/* set_layout -----------------------------------------------------------------------*/
			function set_layout(){
				$orig.parent().find('#loading').hide();
				$orig.show();$orig.wrap('<div class="'+o.wrapperclass+'"></div>');
				$outer=$orig.parent();$orig.find('li').css({'position':'relative'})
				}
			/* set_main_img ---------------------------------------------------------------------*/
			function set_main_img(){
				$orig.find('img').each(function(){
					var $this=$(this);
					var $imgheight=$this.height();
					var $imgwidth=$this.width();
					if($this.attr('title')!=''){
						caption=$this.attr('title'); /* agreta un titulo con el argumento 'title' */
						$this.parent().append('<div class="caption">'+caption+'</div>')
						}
					if(o.maxwidth!=''){
						$this.width(o.maxwidth);
						$this.height(($imgheight/$imgwidth)*o.maxwidth)
						}
					else if(o.maxheight!=''){
						$this.height(o.maxheight);
						$this.width(($imgwidth/$imgheight)*o.maxheight)
						}
					if($this.height()+$this.parent().find('.caption').height()>tall){
						tall=$this.height()+$this.parent().find('.caption').height()
						}
					if($this.width()>wide){
						wide=$this.width()
						}
					cont+='<li><img src="'+$this.attr('src')+'" /></li>'
					});
				$orig.find('li:not(:first)').hide();
				$orig.height(tall);
				$orig.width(wide);
				$outer.find('.caption').width(wide)
				}
			/* place_thumbcontainer ---------------------------------------------------------------*/
			function place_thumbcontainer(){
				if(o.thumbplacement=='top'){
					$outer.prepend('<ul class="thumbs">'+cont+'</ul>');
					$outer.find('.thumbs').css({'position':'relative','text-align':'center','overflow':'auto'})
					}
				else if(o.thumbplacement=='left'){
					$outer.prepend('<ul class="thumbs">'+cont+'</ul>');
					$orig.css({'float':'left'});
					$outer.find('.thumbs').css({'float':'left'})
					}
				else if(o.thumbplacement=='bottom'){
					$outer.append('<ul class="thumbs">'+cont+'</ul>')
					}
				else if(o.thumbplacement=='right'){
					$outer.append('<ul class="thumbs">'+cont+'</ul>');
					$orig.css({'float':'left'});
					$outer.find('.thumbs').css({'float':'left'})
					}
				$outer.append('<div style="clear:both"></div>');
				if(o.thumbcontainer!=''){
					$outer.find('.thumbs').width(o.thumbcontainer)
					}
				}
			/* set_thumbs -----------------------------------------------------------------------*/
			function set_thumbs(){
				return $outer.find('.thumbs li').each(function(){
					var $this=$(this);
					var $img=$this.find('img');
					var $imgwidth=$img.width();
					var $imgheight=$img.height();
					$this.css({'opacity':o.opacity});
					if(o.thumbcrop){
						//$img.width($imgwidth*o.croppercent);
						//$img.height(($imgheight/$imgwidth)*$img.width());
						$img.width(0);
						$img.height(0);
						$this.css({ 'float':'left', 'postion':'absolute', 'background-color':'#24AABC', 'width':o.thumbwidth,'height':o.thumbwidth, 'overflow':'hidden', 'display':'block', 'cursor':'pointer' });
						}
					else{
						$img.width(o.thumbwidth);
						$img.height(($imgheight/$imgwidth)*o.thumbwidth);
						$this.css({'float':'left','cursor':'pointer'});
						$this.height($img.height())
						}
					$this.click(function(){
						var x=$outer.find('.thumbs li').index($this);
						$this.css({'background-color':'#FFA644'});
						if(showing!=x){
							$orig.find('li').fadeOut();$orig.find('li').eq(x).fadeIn();
							showing=x
							}
						});
					$this.hover(function(){
						$this.fadeTo(100,1)
						},
					function(){
						$this.fadeTo(200,o.opacity)
						})
						
					})
				}
			}
		})
	})
(jQuery);