/*******USAGE********
HTML CODE
<ul id="unique_id">
	<li title=""><a href=""><img src=""/></a></li>
	<li title="">.....
</ul>

JAVASCRIPT CODE
$('#unique_id').clickAndMoveItems({options});

--- OPTIONS ---
duration: (integer / ms) icon moving speed
easing: (string) easing effect for moving (jquery.easing.js required. http://gsgd.co.uk/sandbox/jquery/easing/)
controller: (object) style of the controller at bottom
	height: (integer / px)
	bgColor: (string / color code #) background color
	fontColor: (string / color code #)
	arrowColor: (string / color code #)
	fontWeight: (string)
	fontSize: (integer / px)
	marginTop: (integer / px) margin top for text on the controller
reflection: (object or false)
	strength: (Number 0-1) reflection strength
	length: (Number 0-1) reflection length scaled by original image
	space: (integer / px) space between original and reflection
	
*******************/
(function($) {
	$.fn.clickAndMoveItems = function(userArgs) {
		if(!this.length) return false;
		if(!this.is('ul') && !this.is('ol')) return this;
		
		var args = {
			duration:1000,
			easing:'',
			controller:{height:35,bgColor:'#ccc',fontColor:'#333',arrowColor:'#55f',fontWeight:'normal',fontSize:16,marginTop:8},
			reflection:{strength:0.5,length:0.5,space:1}
		};
		$.extend(true, args, userArgs);
		
		var mainIndex = 0;
		var frame = this.css({'overflow':'hidden','position':'relative','padding':0});
		var liH = frame.height()-args.controller.height;
		var total = frame.find('li').length;
		
		var topLi = $('<li></li>');
		var itemsLi = $('<ol></ol>').css({'position':'absolute','top':0,'left':0,'list-style':'none','padding':0,'width':frame.width()+'px','height':frame.height()-args.controller.height+'px','overflow':'hidden','margin':0}).appendTo(topLi);
		var titleLi = $('<ol></ol>').css({'position':'absolute','top':liH+'px','left':0,'list-style':'none','padding':0,'width':frame.width()+'px','height':args.controller.height+'px','background-color':args.controller.bgColor,'font-size':args.controller.fontSize+'px','color':args.controller.fontColor,'font-weight':args.controller.fontWeight,'margin':0,'overflow':'hidden'}).appendTo(topLi);
	
		$(window).load( function() {
			frame.find('li').each( function(index) {
				var img = $(this).find('img'); 
				if(img.length) {
					var imgW = img.width();
					if(!jQuery.support.leadingWhitespace) imgW += 4; //Unknown IE bug
					var marLt = (frame.width()-imgW)*0.5;
					var imgH = img.height();
					var marTp = (liH-imgH)*0.5;
				}
			
				$(this).css({'position':'absolute','top':0,'left':frame.width()+'px','width':frame.width()+'px','height':liH+'px','padding':0,'margin':0}).appendTo(itemsLi);
			
				if(img.length) {
					var parent = img.parent();
					var span = $('<span></span>').append(img);
					parent.append(span);
				
					if(args.reflection) setReflection(span, args.reflection, imgW, imgH, marTp, marLt);
					else img.css({'margin-top':marTp+'px','margin-left':marLt+'px'});
				}
			
				var title = $('<li></li>').css({'position':'absolute','top':args.controller.height+'px','left':0,'width':frame.width()+'px','height':args.controller.height+'px','text-align':'center','overflow':'hidden'}).html('<span style="margin-top:'+args.controller.marginTop+'px;display:block;">'+$(this).attr('title')+'</span>').appendTo(titleLi);
				parent = null;
				span = null;
				img = null;
				title = null;
				imgW = null;
				imgH = null;
				marLt = null;
				marTp = null;
			});
		
			itemsLi.find('li').eq(0).css('left',0);
			titleLi.find('li').eq(0).css('top',0);
			frame.append(topLi);
		
			//CONTROLLER SETTING
			var top = frame.height()-args.controller.height+Math.round(args.controller.height*0.1);
			var arrLeft = $('<li></li>').css({'position':'absolute','top':top+'px','left':'8px','border-top':Math.round(args.controller.height*0.4)+'px solid transparent','border-bottom':Math.round(args.controller.height*0.4)+'px solid transparent','border-right':Math.round(args.controller.height*0.6)+'px solid '+args.controller.arrowColor,'width':0,'height':0,'cursor':'pointer'});
			var arrRight = $('<li></li>').css({'position':'absolute','top':top+'px','right':'8px','border-top':Math.round(args.controller.height*0.4)+'px solid transparent','border-bottom':Math.round(args.controller.height*0.4)+'px solid transparent','border-left':Math.round(args.controller.height*0.6)+'px solid '+args.controller.arrowColor,'width':0,'height':0,'cursor':'pointer'});
			if(!window.XMLHttpRequest) {
				arrLeft.css({'border':'none','width':'30px','height':args.controller.height+'px','font-size':args.controller.fontSize*1.5+'px','font-weight':'bold','color':args.controller.arrowColor}).text('<');
				arrRight.css({'border':'none','width':'30px','height':args.controller.height+'px','font-size':args.controller.fontSize*1.5+'px','font-weight':'bold','color':args.controller.arrowColor}).text('>');
			}
			arrLeft.click( function() {
				itemMove(1)
			});
			arrRight.click( function() {
				itemMove(-1);
			});
			
			//FOR MOBILE DEVICE
			arrLeft.bind('touchstart', function(e) {
				e.preventDefault();
				itemMove(1);
			}, false);
			arrRight.bind('touchstart', function(e) {
				e.preventDefault();
				itemMove(-1);
			}, false);
			
			frame.append(arrLeft).append(arrRight);
		});
		
		function itemMove(direction) {
			itemsLi.find('li').eq(mainIndex).stop(true, true).animate({'left':frame.width()*direction}, args.duration, args.easing);
			titleLi.find('li').eq(mainIndex).stop(true,true).animate({'top':args.controller.height*direction},args.duration,args.easing);
			mainIndex = adjustIndex(mainIndex-1*direction);
			itemsLi.find('li').eq(mainIndex).css('left',frame.width()*direction*-1).stop(true, true).animate({'left':0}, args.duration, args.easing);
			titleLi.find('li').eq(mainIndex).css('top',args.controller.height*direction*-1).stop(true,true).animate({'top':0},args.duration,args.easing);
		}
		
		function adjustIndex(index) {
			if(index >= total) return 0;
			else if(index < 0) return total-1;
			else return index;
		}
		
		//FUNCTION SET REFLECTION
		function setReflection(span, args, imgW, imgH, marTp, marLt) {	
			
			var imgItem = span.find('img');
			
				var refH = Math.ceil(imgH*args.length);
				var totalH = imgH+refH+args.space; 
				span.css({'display':'block', 'width':imgW+'px', 'height':totalH+'px', 'overflow':'hidden','float':'left','margin-top':marTp+'px','margin-left':marLt+'px'}).find('img').css({'float':'left'});
				if(!window.XMLHttpRequest) span.css('margin-left',marLt*0.5+'px');
				
				//Browser recognizing Canvas
				if(jQuery.support.leadingWhitespace) {	
					var canvas = document.createElement('canvas');
					canvas.setAttribute('width', imgW);
					canvas.setAttribute('height', refH);
					canvas.style.marginTop = args.space+'px';
					var ctx = canvas.getContext('2d');
							
					var img = new Image();
					img.src = imgItem.attr('src')+'?r='+Math.random();
					img.onload = function() {
								
						ctx.translate(0, refH);
						ctx.scale(1, -1);
						ctx.drawImage(img, 0, imgH-refH, imgW, refH, 0, 0, imgW, refH);
								
						var grad = ctx.createLinearGradient(0, 0, 0, refH);
						grad.addColorStop(1, 'rgba(255,255,255,'+(1-args.strength)+')');
						grad.addColorStop(0, 'rgba(255,255,255,1)');
					
						ctx.globalCompositeOperation = 'destination-out';
						ctx.fillStyle = grad;
						ctx.fillRect(0,0,imgW, refH);				
					}
					span.append(canvas);
						
				//IE 6 - 8	
				}else{
					var img = $('<img />');
					var imgurl = imgItem.attr('src')+'?r='+Math.random();
					img.attr('src', imgurl);
					img.addClass('reflectionimage');
					img.load( function() {
				
						$(this).css({'margin-top':args.space+'px','filter':'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+args.strength*100+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(refH/imgH)*100+')'});
						span.append(img);
					});
				}
			
			return false;
		}
	}
})(jQuery);