kff.widgets.GalleryImg = function(element, list, options){

	this.$element = $(element);
	this.current = 0;
	this.$list = $(list);
	this.options = $.extend({ 
		item: 'a',
		htmlPrev: '<a href="#">prev</a>',
		htmlNext: '<a href="#">next</a>',
		htmlStatus: '<span class="status">{$current} / {$all}</span>',
		auto: true,
		timeout: 5000
	}, options);
	this.$items = this.$list.find(this.options.item);
	this.$img = this.$element.find('img');
	this.$overlay = $('<span class="overlay"></span>').insertAfter(this.$img).hide();
	this.length = this.$items.length;
	this.proxy = $.proxy;
	
	
};
kff.widgets.GalleryImg.prototype = {
	
	constructor: kff.widgets.GalleryImg,
	
	init: function()
	{
		if( this.length < 2){
			return;
		}
		var o = this.options;

		this.$list
			.delegate(o.item, 'mousedown', this.proxy(this.handleItem, this))
			.delegate(o.item, 'click', function(){return false;});
		
		this.$element
			.height(this.$img.height());

		if(o.htmlPrev){
			this.$prev = $(o.htmlPrev);
			this.$prev
				.addClass('prev')
				.appendTo(this.$element)
				.bind('mousedown.galleryImg', this.proxy(this.handlePrev, this))
				.bind('click.galleryImg', function(){return false;});
		}
		if(o.htmlNext){
			this.$next = $(o.htmlNext);
			this.$next
				.addClass('next')
				.appendTo(this.$element)
				.bind('mousedown.galleryImg', this.proxy(this.handleNext, this))
				.bind('click.galleryImg', function(){return false;});
		}
		if(o.htmlStatus){
			this.$status = $(o.htmlStatus.replace('{$current}', '<span class="current">'+ (this.current + 1) +'</span>').replace('{$all}', '<span class="all">'+ this.length +'</span>'));
			this.$status
				.appendTo(this.$element)
		}
		
		this.control();
	},
	
	change: function() 
	{
		this.$overlay.fadeIn(200, this.proxy(function(){
			this.$overlay.addClass('loading');
			$('<img />')
				.bind('load', this.proxy(function(e){
					
					var target = $(e.currentTarget);
					this.$overlay
						.removeClass('loading')
						.fadeOut(200)
					this.$element
						.find('img')
							.replaceWith(target)
							.end()
						.animate({
							height: target.get(0).height
						}, 200);
					
				}, this))
				.attr('src', this.$items.eq(this.current).attr('href'));
		}, this));
			
		this.control();	
		this.$status.find('.current').text(this.current+1);
	},
	handleItem: function(e) 
	{
		var $target = $(e.target).closest(this.options.item);
		this.current = this.$items.index($target);
		this.change();
	},
	handleNext: function() 
	{
		if(this.current < (this.length - 1)){
			this.current++;
			this.$element.trigger('next.galleryImg', [this.current]);
			this.change();
		}
		return false;
	},
	handlePrev: function() 
	{
		if(this.current > 0){
			this.current--;
			this.$element.trigger('prev.galleryImg', [this.current]);
			this.change();
		}
		return false;
	},
	control: function() 
	{
		var o = this.options;
		
		this.controlItem();	
		if(o.htmlPrev){
			this.controlPrev();	
		}
		if(o.htmlNext){
			this.controlNext();	
		}
	},
	controlItem: function()
	{
		this.$items
			.removeClass('active')
			.eq(this.current)
			.addClass('active')
	},
	controlPrev: function() 
	{
		this.$prev[(this.current == 0) ? 'addClass' : 'removeClass']('prev-disable');
	},
	controlNext: function()
	{
		this.$next[(this.current == (this.length - 1)) ? 'addClass' : 'removeClass']('next-disable');
	}
}