﻿$.fn.slideshow = function(settings, type, option){
	if (!type) {
		type = ['up', 'down', 'in', 'left', 'right'][Math.floor(Math.random()*5)]
	}
	
	return this.each(function(){
		var $this = $(this), node = this, offset = $this.offset(), clone, clones = $();
		
		if (clone = $this.data('slideNode')) {
			$this.nextAll('[slideNode]').stop().remove();
		}
		
		clone = $this;
		
		option = $.extend({
			line : Math.floor(Math.random()*2+3),
			column : Math.floor(Math.random()*2+3),
			delay : 50
		}, option);
		
		var height = $this.height() / option.line,
			width  = $this.width() / option.column;
		for(var i = 0; i < option.line;i++){
			for(var j = 0;j < option.column;j++){
				clone = clone.clone().attr('slideNode', 1).insertAfter(clone).pos('abs').css({left:node.offsetLeft,top:node.offsetTop,
					clip : 'rect('+[
						Math.floor(i*height)+'px', Math.floor((j+1)*width)+1+'px', Math.floor((i+1)*height)+1+'px', Math.floor(j*width)+'px'
					].join(',')+')'
				});
				clone.delay(i*option.delay).animate({opacity:0.5,clip:'rect('+$.fn.slideshow[type].apply(clone, [option, width, height]).join('px,')+'px)'}, function(){$(this).remove()});
			}
		}
		
		$.each(settings, function(key, val){
			$this[key](val);
		});
		
		$this.data('slideNode', clones).css({opacity:.5}).animate({opacity:1},1000);	
	});
}

$.extend($.fn.slideshow, {
	left : function(){
		var clip = getClip(this);
		clip[1] = clip[3];
		return clip;
	},
	right : function(){
		var clip = getClip(this);
		clip[3] = clip[1];
		return clip;
	},
	up : function(){
		var clip = getClip(this);
		clip[2] = clip[0];
		return clip;
	},
	down : function(){
		var clip = getClip($(this));
		clip[0] = clip[2];
		return clip;
	},
	'in' : function(settings, width, height){
		var clip = getClip($(this)),
			diffw = parseInt(width / 2),
			diffh = parseInt(height / 2);
		clip[0] = parseInt(clip[0])+diffh;
		clip[1] = parseInt(clip[1])-diffw;
		clip[2] = parseInt(clip[2])-diffh;
		clip[3] = parseInt(clip[3])+diffw;
		
		return clip;
	}
});

function getClip(elem, clip) {
	if (elem instanceof jQuery) {
		clip = elem.css('clip');
		clip == 'auto' || !clip ? clip = clip = [0, elem.width(), elem.height(), 0] : '';
	} else if(isString(elem)){
		clip = elem;
	} else {
		clip = [0, 0, 0, 0];
	}
	if (isString(clip) && clip.indexOf('rect') > -1) {
		clip = /([0-9]+).*?([0-9]+).*?([0-9]+).*?([0-9]+)/.exec(clip.replace(/\.[0-9]+/,''));
		clip.shift();
	}
	return clip;
}

jQuery.fx.step.clip = function(fx){
	if (! fx.start ) {
		fx.start = getClip($(fx.elem));
		fx.end = getClip(fx.end);
	}
	try{
	fx.elem.style.clip = 'rect('+[
		(parseInt(fx.start[0]) + strToInt(fx.pos * (fx.end[0] - fx.start[0]))) + 'px',
		(parseInt(fx.start[1]) + strToInt(fx.pos * (fx.end[1] - fx.start[1]))) + 'px',
		(parseInt(fx.start[2]) + strToInt(fx.pos * (fx.end[2] - fx.start[2]))) + 'px',
		(parseInt(fx.start[3]) + strToInt(fx.pos * (fx.end[3] - fx.start[3]))) + 'px'
	].join(',')+')';
	}catch(e){}
}
