/*
This plugin function needs the following files
- jquery
- jquery ui slider

PARAMETERS
slideHandleColor: Array(#Handle border color, #Handle base color, #Rail border color, #Rail background color)	
reflection: Boolean: true->show reflection
photoSideMargin: int: side Margin for images
topMargin: int: Margin top from the images
reflectionArray: Array(strength(0~1), length(0~1), space(px))
*/
(function($) {
	
/////////////////////////////////////
//GALLERY WITH SLIDER PLUGIN//
/////////////////////////////////////
	$.fn.galleryWithSlider = function(slideHandleColor, reflection, photoSideMargin, topMargin, reflectionArray) {
		
		if(!slideHandleColor) var slideHandleColor = new Array('#aaa','#ddd','#aaa','#eee');
		if(reflection == null) var reflection = true;
		if(!photoSideMargin) var photoSideMargin = 10;
		if(!topMargin) var topMargin = 10;
		if(!reflectionArray) var reflectionArray = new Array(0.4, 0.4, 1);
		
		var frame = this.css({'overflow':'hidden','padding':0});
		//document.getElementById(frame.attr('id')).scrollTop = 0;;
		
		$(window).load( function() {
			
			var center = frame.width()*0.5;
			var totalNums = frame.find('li').length;
			var ulTotalWidth = 0;
			var slideTotalWidth = 0;
			var maxHeight = 0;
			var startPosi;
			
			var inner = $('<ul class="inner"></ul>');
			var descriptionInner = $('<ul class="descriptionInner"></ul>').css({'position':'absolute','top':0,'left':0,'list-style':'none','padding':0,'width':frame.width()*totalNums+'px'});
			
			frame.find('li').each( function(index) {
				
				var imgW = $(this).find('img').width();
				var imgH = $(this).find('img').height();
				ulTotalWidth += imgW+photoSideMargin*2;
				if(index < totalNums-1)	slideTotalWidth += imgW+photoSideMargin*2;
				if(imgH > maxHeight) maxHeight = imgH;
				if(index == 0) startPosi = center-imgW*0.5-photoSideMargin;
				
				var imgspan = $('<span></span>').css({'display':'block','width':imgW+'px','margin-left':photoSideMargin+'px','margin-right':photoSideMargin+'px'});
				if($(this).find('img').parent().is('a')) {
					$(this).find('img').parent().append(imgspan);
				}else{
					$(this).append(imgspan);
				}
				imgspan.append($(this).find('img'));
				inner.append($(this));
				
				var li = $('<li></li>').css({'width':frame.width()+'px','float':'left','text-align':'center'});
				li.append($(this).find('.description'));
				descriptionInner.append(li);
			});
			
			inner.css({'position':'absolute','top':0,'left':startPosi+'px','list-style':'none','margin':0,'padding':0,'width':ulTotalWidth+'px'});
			frame.append($('<li></li>')).find('li').css({'position':'relative','margin-top':topMargin+'px','overflow':'hidden','width':frame.width()+'px','height':maxHeight+'px'}).append(inner);
		
			if(reflection === true) {
				
				inner.find('li').find('span').each( function() {
					$(this).effectReflection(reflectionArray);
				});
				var newheight = maxHeight+maxHeight*reflectionArray[1];
				inner.parent().css({'height':newheight+'px'});
			}
			
			var sliderUI = $('<li id="slider_galleryWithSlider"></li>');
			frame.append(sliderUI);
			sliderUI.slider({
				max:slideTotalWidth*0.25,
				slide:function(event, ui) {
					
					var curPosi = (ui.value*4-startPosi)*-1;
					inner.css({'left':curPosi+'px'});
					if(descriptionInner.find('.description').length > 0) {
						var curDescNum = Math.floor(((ui.value*4/slideTotalWidth)*frame.width()*(totalNums-1))/frame.width())
						//console.log(curDescNum);
						var curPosiDesc = curDescNum*frame.width()*-1;
						descriptionInner.css({'left':curPosiDesc+'px'});
					}
				}
			}).css({'position':'relative','width':'90%','border':'1px solid '+slideHandleColor[2],'height':'6px','margin-top':topMargin+'px','margin-left':'5%','_margin-left':'2%','-moz-border-radius':'3px','-webkit-border-radius':'3px','border-radius':'3px','-o-border-radius':'3px','background-color':slideHandleColor[3]}).find('a').css({'position':'absolute','display':'block','width':'18px','height':'18px','top':'-8px','border':'1px solid '+slideHandleColor[0],'background-color':slideHandleColor[1],'-moz-border-radius':'10px','-webkit-border-radius':'10px','border-radius':'10px','-o-border-radius':'10px','margin-left':'-10px','outline':'none','-moz-box-shadow':'2px 1px 2px rgba(0,0,0,0.4)','-webkit-box-shadow':'2px 1px 2px rgba(0,0,0,0.4)','-o-box-shadow':'2px 1px 2px rgba(0,0,0,0.4)','box-shadow':'2px 1px 2px rgba(0,0,0,0.4)'});
			if(!window.XMLHttpRequest) sliderUI.css('margin-left','3%');		

			if(descriptionInner.find('.description').length > 0) {
				var descriptionFrame = $('<li id="descriptionFrame"></li>').css({'position':'relative','width':frame.width()+'px','margin-top':'10px','overflow':'hidden'});
				frame.append(descriptionFrame);
				descriptionFrame.append(descriptionInner);
				var descHeight = descriptionInner.height();
				//console.log(descHeight);
				descriptionFrame.css({'height':descHeight+'px'});
				descriptionInner.find('.description').each( function() {
					$(this).css({'height':descHeight+'px'});
				});
			}
			
			
		});
		return this;
	}
	
////////////////////////////////////
//REFLECTION EFFECT FUNCTION
////////////////////////////////////
	$.fn.effectReflection = function(setArr) {
		
		var imgItem = this;

		var image = imgItem.find('img');	
		var imgW = image.width();
		var imgH = image.height();
		var refH = Math.ceil(imgH*setArr[1]);
		var totalH = imgH + refH + setArr[2];
		imgItem.css({'height':totalH+'px', 'overflow':'hidden'}).find('img').css({'float':'left','-moz-box-shadow':'0 3px 5px rgba(0,0,0,0.7)','-webkit-box-shadow':'0 3px 5px rgba(0,0,0,0.7)','-o-box-shadow':'0 3px 5px rgba(0,0,0,0.7)','box-shadow':'0 3px 5px rgba(0,0,0,0.7)'});
						
		//Browser recognizing Canvas
		if(jQuery.support.leadingWhitespace) {
						
			var canvas = document.createElement('canvas');
			canvas.setAttribute('width', imgW);
			canvas.setAttribute('height', refH);
			canvas.style.marginTop = setArr[2]+'px';
			var ctx = canvas.getContext('2d');		
			var img = new Image();
			img.src = image.attr('src');
			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-setArr[0])+')');
				grad.addColorStop(0, 'rgba(255,255,255,1)');	
				ctx.globalCompositeOperation = 'destination-out';			
				ctx.fillStyle = grad;
				ctx.fillRect(0,0,imgW, refH);								
			}					
			imgItem.append(canvas);
						
		//IE 6 - 8	
		}else{	
			var img = $('<img />');
			img.attr('src', image.attr('src'));
			img.addClass('reflectionimage');
			var reflect = imgItem.append(img).find('.reflectionimage').css({'margin-top':setArr[2]+'px'});		
			reflect.css({'filter':'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+setArr[0]*100+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(refH/imgH)*100+')'});		
		}
		return this;	
	}
	
})(jQuery);