/**
 *  kff.widgets.ImageCycler
 */
 
kff.widgets.ImageCycler = function(element, options)
{
	this.options = $.extend({ 
		timeout: 8000,
		divisionX: 10,
		divisionY: 3 
	}, options);
	
	this.$element = $(element);
}

kff.widgets.ImageCycler.prototype.init = function()
{
	if(this.$element.size() == 0) return;
	var that = this;
	var elementWidth = this.$element.width();
	var elementHeight = this.$element.height();
	var imagesData = this.imagesData = [];
	
	this.$pager = $('<div class="pager" />');
	
	this.$element.find('img').each(function(i){
		imagesData[i] = {
			url: $(this).attr('src')
		};
		that.$pager.append('<a href="#">' + i + '</a>');
	}).remove();
	
	this.$stillImage = $('<div />').css({
		position: 'absolute',
		zIndex: 5, 
		width: elementWidth, 
		height: elementHeight 	
	});
	
	this.$patches = $([]);
	
	var $patch;
	var patchCss = {
		position: 'absolute',
		zIndex: 10, 
		width: elementWidth / this.options.divisionX, 
		height: elementHeight / this.options.divisionY 
	};
	
	for(var i = 0, l = this.options.divisionX * this.options.divisionY; i < l; i++)
	{
		patchCss.left = (i % this.options.divisionX) * patchCss.width;
		patchCss.top = Math.floor(i / this.options.divisionX) * patchCss.height;
		patchCss.backgroundPosition =  '-' + patchCss.left + 'px ' + '-' + patchCss.top + 'px'; 
		$patch = $('<div />');
		$patch.css(patchCss);
		this.$patches = this.$patches.add($patch);
	}
	
	this.activeImage = 0;
	this.$element.append(this.$stillImage).append(this.$patches).append(this.$pager);

	this.$pager.delegate('a', 'click', function(){ return false; }).delegate('a', 'mousedown', $.proxy(this.clickPager, this));
}

kff.widgets.ImageCycler.prototype.setStillImage = function(i)
{
	this.$stillImage.css({ backgroundImage: 'url(' + this.imagesData[i].url + ')' });
}

kff.widgets.ImageCycler.prototype.hidePatches = function()
{
	this.$patches.css({ opacity: 0 });
}

kff.widgets.ImageCycler.prototype.setPatchedImage = function(i)
{
	this.$patches.css({ backgroundImage: 'url(' + this.imagesData[i].url + ')' });
}

kff.widgets.ImageCycler.prototype.pattern = function(i)
{
	return (i % this.options.divisionX) * 60 + (i / this.options.divisionX) * 200;
}

kff.widgets.ImageCycler.prototype.animatePatches = function()
{
	var that = this;
	this.$patches.each(function(i){
		$(this).delay(that.pattern(i)).fadeTo(800, 1);
	});
}

kff.widgets.ImageCycler.prototype.setPager = function(i)
{
	this.$pager.find('a').removeClass('active').eq(i).addClass('active');
}

kff.widgets.ImageCycler.prototype.clickPager = function(event)
{
	this.next(Number($(event.currentTarget).text()));
	clearTimeout(this.mainTimer);
	this.mainTimer = setTimeout($.proxy(this.interval, this), this.options.timeout);
	return false;
}

kff.widgets.ImageCycler.prototype.next = function(i)
{
	this.setStillImage(this.activeImage);
	this.activeImage = i % this.imagesData.length;
	this.hidePatches();
	this.setPatchedImage(this.activeImage);
	this.animatePatches();
	this.setPager(this.activeImage);
	this.$element.trigger('changed');
}

kff.widgets.ImageCycler.prototype.start = function()
{
	if(this.$element.size() == 0) return;
	var that = this;
	this.setStillImage(0);
	this.activeImage = 0;
	this.setPager(this.activeImage);
	clearTimeout(this.mainTimer);
	this.mainTimer = setTimeout($.proxy(this.interval, this), this.options.timeout);
}

kff.widgets.ImageCycler.prototype.interval = function()
{
	this.next(this.activeImage + 1);
	clearTimeout(this.mainTimer);
	this.mainTimer = setTimeout($.proxy(this.interval, this), this.options.timeout);
}