(function($){
$.widget('dg.slider', {
	element: null,
	options: {
		animTime: 1000,		// milisegundos
		autoSlider: 10,		// segundos, 0 para no activar
		adjustPaneToImage: false,		// Si es false, hace o contrario, ajusta la imagen al panel!
		moveRightAllway: true
	},
	imgPlace: null,
	pager: null,
	images: null,
	
	lastSelected: null,
	autoSliderTimer: null,
	content: null,
	
	imgLength: null,
	imgLoaded: null,
	dir: null,
	fixedDir: null,
	
	_create: function(){
		this.dir = 1;
		this.fixedDir = false;
	
		this.images = [];
		this.pagerBtn = [];
		this.content = $('<div>').css({
			overflow: 'hidden',
			height: 0,
			width: 0,
		}).appendTo(this.element);
		this.imageLoaded = 0;
		this.imgLength = $('img', this.element).appendTo(this.content).length;

		this._construct();
		
		this.normalWidth = this.imgPlace.width();
		
		this._constructPager();
		
		this._placeImages();
		
		if(this.imgLength == 1){
			this.pager.remove();
		}else
			this.initAutoSlider();
	},
	initAutoSlider: function(){
		if(this.imgLength == 1) return;
		if(this.option('autoSlider') > 0){
			var me = this;
			if(!empty(this.autoSliderTimer))
				clearInterval(this.autoSliderTimer);
			this.autoSliderTimer = setInterval(function(){me._changeImg()}, this.option('autoSlider')*1000);
		}
	},
	_construct: function(){
		this.element
			.addClass('slider-main')
			.append(
				this.imgPlace = $('<div>')
					.addClass('slider-image-place')
					.css('overflow', 'hidden')
			)
		;
	},
	_placeImages:function(){
		var me = this;

		this._loading();
		var initialize = function(){
			$('.loadingElm', $(this).data('panel')).replaceWith(this);

			if(me.lastSelected === null)
				me.selectImg( $(this).data('sliderIndex') );
		};

		$('img', this.content).each(function(){
			$(this).addClass('pElm');
			me._createImagePanel(this)
				.appendTo(me.imgPlace)
				.hide(0)
			;

			var initialized = false;
			try{
				if(this.complete && ( $(this).width() != 0 && $(this).height() != 0 )){
					initialize.apply(this, []);
					initialized=true;
				}
			}catch(e){
				console.error(e);
			}
			if(!initialized){
				$(this).load( initialize );
			}
		});
	},
	_createImagePanel: function(imgElm){
		var comment = $(imgElm).attr('title');
		$(imgElm).attr('title', '');

		var elm = $("<div>")
			.addClass('slider-image-panel')
			.css({
				position: 'absolute',
				overflow: 'hidden'
			})
			.append(this._getLoadingObj(this.imgPlace.width(), this.imgPlace.height()))
		;
		
		if(!empty(comment)){
			elm.append(
				$('<div>')
					.addClass('slider-image-comment')
					.text(comment)
			)
		}
		
		var obj = {
			elm: elm,
			btn: this._createPagerElm(elm)
		}
		
		var index = this.images.push(obj) - 1;
		
		elm.data('sliderIndex', index);
		$(imgElm).data('sliderIndex', index);
		$(imgElm).data('panel', elm);
		
		return elm;
	},
	_constructPager: function(){
		this.pager = $('<ul>')
			.addClass('slider-pager LinkBar clearfix ui-clearfix')
			.appendTo(this.imgPlace)
		;
		
		for(var i in this.images){
			this._createPagerElm(this.images[i]).appendTo(this.pager);
		}
	},
	_createPagerElm: function(elm){
		var me = this;

		return $('<li>')
			.addClass('slider-pager-button inactive')
			.click(function(){me.selectImg(elm.data('sliderIndex'));})
			.appendTo(this.pager)
		;
	},
	_getLoadingObj: function(w, h){
		var text;

		var elm = $('<div>')
				.addClass('loadingElm pElm')
				.append(
					text = $('<span>')
						.css({
							display: 'inline-block',
							textAlign: 'center',
							margin: Math.ceil((h-61)/2).toString() + 'px auto 0',
						})
						.append($('<h3>').text('Cargando...'))
						.append(
							$('<img>')
								.css('display', 'block')
								.attr('src', 'css/img/slider/loading.gif')
								.attr('alt', 'Cargando...')
						)
				)
				.css({
					textAlign: 'center',
					width: w,
					height: h
				})
		;

		return elm;
	},
	_loading: function(){
		this.element.prepend(
			this._getLoadingObj(this.imgPlace.width(), this.imgPlace.height()).css({
				position: 'absolute',
				zIndex: 1000
			})
		);
	},
	_loadingOff: function(){
		$('>.loadingElm', this.element).remove();
	},
	selectImg: function(index){
		this._loadingOff();
		this.initAutoSlider();		// reseteo el tiempo asi la seleccion dura lo que debe durar
		if(empty(this.lastSelected) || index !== this.lastSelected.index){
			if(!empty(this.lastSelected)){
				var lastElm = this.lastSelected.elm;
				this.lastSelected.btn.removeClass('slider-pager-button-active');
				
				if(this.fixedDir !== true){
					this.dir = index - this.lastSelected.index;
				}
				
			}
			this.fixedDir = false;
			if(this.options.moveRightAllway) this.dir = 1;

			this.lastSelected = this.images[index];
			
			this.lastSelected.index = index;
			this.lastSelected.elm
				.show(0)
			;
			
			var IMG = $('.pElm', this.lastSelected.elm);
			
			if(this.option('adjustPaneToImage')){
				var iH = IMG.outerHeight();
				this.imgPlace.height(iH);
				this.element.height(iH);
			}else if(IMG.data('sized') !== true){
				var showH = this.imgPlace.height();
				var showW = this.imgPlace.width();
				
				var AR = IMG.outerHeight() / IMG.outerWidth();
				var W = showW;
				var H = Math.ceil( W * AR );

				if(H>showH){ // Subo la imagen para mostrar el centro;
					var offTop = Math.ceil( (showH - H) / 2 );
					IMG.css({
						position: 'relative',
						top: offTop
					});
				}else{
					var AR = IMG.outerWidth() / IMG.outerHeight();
					var W = Math.ceil( showH * AR );
					var H = showH;
					if(W > showW){
						var offLeft = Math.ceil( (showW - W) / 2 );
						IMG.css({
							position: 'relative',
							left: offLeft
						});
					}
				}
				
				IMG.css({
					width: W,
					height: H
				});

				this.lastSelected.elm.height( showH );
				
				IMG.data('sized', true)
			}
			
			if(!empty(lastElm)){
				this.lastSelected.elm.stop();
				lastElm.stop();
				
				if(this.dir>0){
					this.lastSelected.elm.css('left', this.normalWidth).animate({left: 0}, this.option('animTime'));
					lastElm.animate({left: this.normalWidth*-1}, this.option('animTime'), function(){$(this).hide(0).css('left', 0);});
				}else{
					this.lastSelected.elm.css('left', this.normalWidth*-1).animate({left: 0}, this.option('animTime'));
					lastElm.animate({left: this.normalWidth}, this.option('animTime'), function(){$(this).hide(0).css('left', 0);});
				}
			}
			
			this.lastSelected.btn.addClass('slider-pager-button-active');
		}
	},
	_changeImg: function(){
		var nI = this.lastSelected.index + 1;
		if(!empty(this.images[nI]))
			this.selectImg(nI);
		else
			this.selectImg(0);
	},
	nextImg: function(){
		this.dir = 1;
		this.fixedDir = true;

		this._changeImg();
	},
	prevImg: function(){
		this.dir = -1;
		this.fixedDir = true;

		var nI = this.lastSelected.index - 1;
		if(!empty(this.images[nI]))
			this.selectImg(nI);
		else
			this.selectImg( this.imgLength - 1 );
	}
});
})(jQuery);