$(document).ready(function() {
		var currentSlide = 0;
		var previousSlide = -1;
		var totalSlides = $('.slide').length;
		var delayTime = 5000;
		var timeOutInterval;
		var currentTime = 0;
		var direction = "right";
		var slidesArray = new Array();
		var animationStarted = false;
		var doLaterInt;
		
		function setSlidePosition(){
			slidesArray = jQuery.makeArray($('.slide'));
			$('.slide').each(function(index) {
				//$('.slideNav').append('<div class="slideNavOff" id="slideNav'+index+'"></div>');
				$('#slideNav'+index).click(function(){
					if (currentSlide != index){
							if (!animationStarted){
								displayCertainSlide(index);
							} else {
								clearInterval(doLaterInt);
								doLater(function (){displayCertainSlide(index)});
							}
					}
				});
				$(this).css("z-index", totalSlides-index);
				$('.slideRight',this).css('padding-left',25*index).css('opacity','0.7');
				$('.slideRight',slidesArray[currentSlide]).animate({'opacity':'1'},100);
				$('.slideLeft',this).hide();
				$('.slideRight',this).click(function(){
						if (currentSlide == index){
							window.open($('.slideLink a',$(this).parent()).attr('href'),'','');
							
						} else {
							if (!animationStarted){
								displayCertainSlide(index);
							} else {
								clearInterval(doLaterInt);
								doLater(function (){displayCertainSlide(index)});
							}
						}
				});
				/*if (!$.browser.msie || ($.browser.msie && $.browser.version.substr(0, 1) >= 9)){
					$('.slideRight img',this).hide();
					$('.slideRight',this).append('<canvas id="canvas'+index+'" width="330" height="268"></canvas>');
					skewpic($('#canvas'+index),$('.slideRight img',this).attr('src'),[[0,20],[330,0],[0,241],[330,268]]);
				} else {
					$('.slideRight img',this).css('margin-top','20px');	
				}*/
			});
		}
		setSlidePosition();
		displaySlide();
		function displayCertainSlide(slide){
			previousSlide = currentSlide;
			currentSlide = slide;
			displaySlide();
		}
		function doLater(fn){
			clearInterval(timeOutInterval);
			clearInterval(doLaterInt);
			if (!animationStarted){
				fn.call();	
			} else {
				doLaterInt = setInterval(doLater(fn),100);
			}
		}
		function displaySlide(){
			$('[id^=slideNav]').attr('class','slideNavOff');
			$('#slideNav'+currentSlide).attr('class','slideNavOn');
			clearInterval(timeOutInterval);
			animationStarted = true;
			if (previousSlide!=-1) {
				if (direction == 'left'){
					$('.slideRight',slidesArray[currentSlide]).css('margin-left','-500px').css('padding-left',0).css('z-index',totalSlides+1).css('opacity',1);
					$('.slideLeft',slidesArray[previousSlide]).animate({'z-index':1}, 300, function(){
						$(this).css('margin-left','43px').hide();
						$('.slideLeft',slidesArray[currentSlide]).fadeIn();
						for (var index=currentSlide;index<totalSlides;index++){
							$(slidesArray[index]).css("z-index", totalSlides-index+currentSlide);
							$('.slideRight',slidesArray[index]).css('margin-left','302px').css('opacity','0.7').animate({'padding-left':25*(index-currentSlide)},100);
						}
						for (var index=currentSlide-1;index>=0;index--){
							$(slidesArray[index]).css("z-index", currentSlide-index);
							$('.slideRight',slidesArray[index]).css('margin-left','302px').css('opacity','0.7').animate({'padding-left':25*(totalSlides-currentSlide+index)},100);
						}
						$('.slideRight',slidesArray[currentSlide]).animate({'opacity':'1'},100);
					});
					$('.slideRight',slidesArray[currentSlide]).animate({'margin-left':'302px'}, 450, function(){
						animationStarted = false;
					});
				} else {
					$('.slideRight',slidesArray[previousSlide]).animate({'margin-left':'-300px'}, 450, function(){
						$('.slideLeft',slidesArray[currentSlide]).fadeIn();
						for (var index=currentSlide;index<totalSlides;index++){
							$(slidesArray[index]).css("z-index", totalSlides-index+currentSlide);
							$('.slideRight',slidesArray[index]).css('margin-left','302px').css('opacity','0.7').animate({'padding-left':25*(index-currentSlide)},100);
						}
						
						for (var index=currentSlide-1;index>=0;index--){
							$(slidesArray[index]).css("z-index", currentSlide-index);
							$('.slideRight',slidesArray[index]).css('margin-left','302px').css('opacity','0.7').animate({'padding-left':25*(totalSlides-currentSlide+index)},100);
						}
						$('.slideRight',slidesArray[currentSlide]).animate({'opacity':'1'},100);
					});
					$('.slideLeft',slidesArray[previousSlide]).delay(100).animate({'margin-left':'-300px'}, 450, function(){
						$(this).css('margin-left','43px').hide();
						animationStarted = false;
					});
				}
				
				
			} else {
				$('.slideLeft',slidesArray[currentSlide]).fadeIn();
				animationStarted = false;
			}
			
			currentTime = 0;
			timeOutInterval = setInterval(whenWaiting, 10);
			previousSlide = currentSlide;
		}
		function whenWaiting(){
			if (currentTime < delayTime) {
				currentTime += 10;
			} else {
				if (direction == "right"){
					doNext();	
				} else {
					doPrev();	
				}
			}
			if (direction == "left"){
				$('.slideNavBar').css('left',$('.slideNav').width()-$('.slideNavBar').width());
			}
			$('.slideNavBar').width(currentTime / delayTime * $('.slideNav').width());
		}
		function doNext(){
			if (!animationStarted){
				if (currentSlide < totalSlides-1){
					currentSlide++;
				} else {
					currentSlide = 0;	
				}
				direction = "right";
				displaySlide();
			}
		}
		function doPrev(){
			if (!animationStarted){
				if (currentSlide > 0){
					currentSlide--;
				} else {
					currentSlide = totalSlides-1;	
				}
				direction = "left";
				displaySlide();
			}
		}
		$('.slideNavLeft').click(function(){doPrev()});
		
		$('.slideNavRight').click(function(){doNext()});
    });
	CanvasRenderingContext2D.prototype.skew=function(src, co){
		this.save();
		
		this.globalAlpha = 0.5;
		this.shadowBlur = 0.5;
		this.shadowOffsetX = 1;
		this.shadowOffsetY = 1;
		this.shadowColor = "#ffffff";
		this.lineWidth = 1;
		
		var height=src.height;
		var width=src.width;
		var cr8ctx=document.createElement('CANVAS').getContext('2d');

		var leftSpace=Math.min(co[0][0], co[2][0]);//topleftX or bottmleftX return smallest
		var totalWidth=Math.max(co[1][0], co[3][0])-leftSpace;// top right or bottom right return biggest - smallest
		cr8ctx.canvas.setAttribute('width', totalWidth);//biggest-smallest
		cr8ctx.canvas.setAttribute('height', height+20);// actual image height

		cr8ctx.globalAlpha = 0.2;
		for (var i=height-20; i<height; i+=1){
			cr8ctx.globalAlpha = 0.2-(height-i)/100;
			cr8ctx.drawImage(src, 0, i, width, 1, 0, height*2-i, totalWidth, 1);
		}
		cr8ctx.globalAlpha = 1;
		if (co[2][0]<co[0][0]) cr8ctx.translate(co[0][0]-co[2][0], 0);// if BL<TL  translate(TL-BL,0)
		var topWidth=co[1][0]-co[0][0];//TR-TL
		var botWidth=co[3][0]-co[2][0];//BR-BL
		var leftChange=co[2][0]-co[0][0];//BL-TL
		
		this.globalAlpha = 1;
		
		for (var i=0; i<height; i+=1)
			cr8ctx.drawImage(src, 0, i, width, 1, leftChange*i/height, i, Math.abs((topWidth*(height-i)+botWidth*i)/height), 1);
		for (var i=height-20; i<height; i+=1)
			//cr8ctx.drawImage(src, 0, i, width, 1, 0, height*2-i, width, 1);
		var leftTop=co[0][1]-(co[1][1]-co[0][1])*(co[0][0]-leftSpace)/(co[1][0]-co[0][0]);
		var rightTop=co[1][1]+(co[1][1]-co[0][1])*(leftSpace+totalWidth-co[1][0])/(co[1][0]-co[0][0]);
		var leftBot=co[2][1]-(co[3][1]-co[2][1])*(co[2][0]-leftSpace)/(co[3][0]-co[2][0])-leftTop;
		var rightBot=co[3][1]+(co[3][1]-co[2][1])*(leftSpace+totalWidth-co[3][0])/(co[3][0]-co[2][0])-rightTop;
		for (var i=0; i<totalWidth; i+=1) {
			this.drawImage(cr8ctx.canvas, i, 0, 1, height+20, leftSpace+i, (leftTop*(totalWidth-i)+rightTop*i)/totalWidth, 1, (leftBot*(totalWidth-i)+rightBot*i)/totalWidth);
		}
		this.restore();	
	}
	
	function skewpic(element,src,dot){
		var pic=new Image();
		pic.src=src;
		jQuery(pic).one("load", function() {
			var canvas=element[0].getContext('2d');
			for (var i=0; i<4; i++) {canvas.skew(pic, dot);}	
		}).each(function(){
			if(this.complete) jQuery(this).trigger("load");
		});
		
	}