/**
 * @author Kelvin Delmonte kdelmonten@gmail.com
 * slideShow.js (jQuery plugin)
 * Make a div a slider like this = $('#myDiv').slideShow('horizontal',5000,505,1000,false,true);
 * You may need to tweak the css a little to get everything looking right
 * but this should...
 */

(function( $ ) {
	$.fn.slideShow = function(_images,_direction,_timeout,_height,_width,_rollback,_wrap) {
		for(var i = 0; i < this.length; i++) {
			var _n_slr = new slider(_direction,_timeout,_height,_width,_rollback,_wrap);
			_n_slr.init(_images,this[i]);
			_n_slr.start();
		}

		function slider(direction,timeout,height,width,rollback,wrap) {
			var imageDirectory = 'http://digitalyogis.com/assets/templates/webdeveloper/images/';
			var imgLeftSrc = imageDirectory + 'leftArr.png';
			var imgRightSrc = imageDirectory + 'rightArr.png';
			var imgDownSrc = imageDirectory + 'downArr.png';
			var imgUpSrc = imageDirectory + 'upArr.png';
			this.slideHeight = height;
			this.slideWidth = width;
			this.currentpos_x = 0;
			this.currentpos_y = 0;
			this.direction = direction;
			this.slideContainer = document.createElement('div');
			this.slideContainer.className = 'slideContainer';
			this.scrollerControl = document.createElement('span');
			this.scrollerControl.className = 'scrollerControl';
			this.animationId = 0;
			this.timeout = timeout;
			this.totalSlides = 0;
			this.currentSlideIndex = 1;
			this.rollback = rollback;
			this.wrap = wrap;
			this.start = function() {
				var self = this;
				clearInterval(this.animationId);
				this.animationId = setInterval( function() {
					self.forward();
				},this.timeout)
			}
			this.stop = function() {
				clearInterval(this.animationId);
			}
			this.forward = function() {
				this.stop();
				if((this.totalSlides) > this.currentSlideIndex) {
					switch(this.direction.toLowerCase()) {
						case "horizontal":
							this.currentpos_x -= this.slideWidth;
							$(this.slideContainer).animate({
								'left': this.currentpos_x + 'px'
							});
							break;
						case "vertical":
							this.currentpos_y -= this.slideHeight;
							$(this.slideContainer).animate({
								'top': this.currentpos_y + 'px'
							});
							break;
					}
					this.currentSlideIndex++;
				} else {
					if(!this.wrap) {
						this.stop();
						return;
					}
					var sldr = this;
					if(this.rollback) {
						switch(this.direction.toLowerCase()) {
							case "horizontal":
								this.currentpos_x = 0;
								$(this.slideContainer).animate({
									'left': sldr.currentpos_x + 'px'
								});
								break;
							case "vertical":
								this.currentpos_y = 0;
								$(this.slideContainer).animate({
									'top': sldr.currentpos_y + 'px'
								});
								break;
						}
					} else {
						var fx = function() {
							$(sldr.slideContainer).children().css('display','inline');
						}
						switch(this.direction.toLowerCase()) {
							case "horizontal":
								this.currentpos_x -= this.slideWidth;
								$(this.slideContainer).animate({
									'left': this.currentpos_x + 'px'
								},500, function() {
									sldr.currentpos_x = 0;
									$(sldr.slideContainer).children().css('display','none');
									$($(sldr.slideContainer).children()[0]).css('display','inline');
									$(sldr.slideContainer).css('left',sldr.slideWidth);
									$(sldr.slideContainer).animate({
										'left': sldr.currentpos_x + 'px'
									},500,fx);
								});
								break;
							case "vertical":
								this.currentpos_y -= this.slideHeight;
								$(this.slideContainer).animate({
									'top': this.currentpos_y + 'px'
								},500, function() {
									sldr.currentpos_y = 0;
									$(sldr.slideContainer).children().css('display','none');
									$($(sldr.slideContainer).children()[0]).css('display','inline');
									$(sldr.slideContainer).css('top',sldr.slideHeight);
									$(sldr.slideContainer).animate({
										'top': sldr.currentpos_y + 'px'
									},500,fx);
								});
								break;
						}
					}

					this.currentSlideIndex = 1;
				}
				this.updateScrollerControl();
				this.start();

			}
			this.back = function() {
				this.stop();
				if(this.currentSlideIndex != 1) {
					this.currentSlideIndex--;
					switch(this.direction.toLowerCase()) {
						case "horizontal":
							this.currentpos_x += this.slideWidth;
							$(this.slideContainer).animate({
								'left': this.currentpos_x + 'px'
							});
							break;
						case "vertical":
							this.currentpos_y += this.slideHeight;
							$(this.slideContainer).animate({
								'top': this.currentpos_y + 'px'
							});
							break;
					}

				} else if(this.wrap) {
					var sldr = this;
					switch(this.direction.toLowerCase()) {
						case "horizontal":
							this.currentpos_x += this.slideWidth;
							$(this.slideContainer).animate({
								'left': this.currentpos_x + 'px'
							},500, function() {
								sldr.currentpos_x = (-1 * (sldr.slideWidth * sldr.totalSlides)) + sldr.slideWidth;
								$(sldr.slideContainer).css('left',(-1 * (sldr.slideWidth * sldr.totalSlides)) - sldr.slideWidth);
								$(sldr.slideContainer).animate({
									'left': sldr.currentpos_x + 'px'
								},500);
							});
							break;
						case "vertical":
							this.currentpos_y += this.slideHeight;
							$(this.slideContainer).animate({
								'top': this.currentpos_y + 'px'
							},500, function() {
								sldr.currentpos_y = (-1 * (sldr.slideHeight * sldr.totalSlides)) + sldr.slideHeight;
								$(sldr.slideContainer).css('top',(-1 * (sldr.slideHeight * sldr.totalSlides)) - sldr.slideHeight);
								$(sldr.slideContainer).animate({
									'top': sldr.currentpos_y + 'px'
								},500);
							});
							break;
					}
					this.currentSlideIndex = sldr.totalSlides;
				}
				this.start();
				this.updateScrollerControl();
			}
			this.goToSlide = function(slideIndex) {

				this.stop();
				var diff = slideIndex - this.currentSlideIndex;
				switch(this.direction.toLowerCase()) {
					case "horizontal":
						if(diff > 0) {
							this.currentpos_x -= (diff) * this.slideWidth;
						} else {
							this.currentpos_x += (-1 * diff) * this.slideWidth;
						}
						$(this.slideContainer).animate({
							'left': this.currentpos_x + 'px'
						});
						break;
					case "vertical":
						if(diff > 0) {
							this.currentpos_y -= (diff) * this.slideHeight;
						} else {
							this.currentpos_y += (-1 * diff) * this.slideHeight;
						}
						this.currentpos_y += this.slideHeight;
						$(this.slideContainer).animate({
							'top': this.currentpos_y + 'px'
						});
						break;
				}
				this.currentSlideIndex = slideIndex;
				this.start();
				this.updateScrollerControl();
			}
			this.updateScrollerControl = function() {
				$(this.scrollerControl).children().css('color','#C9C3E6');
				$($(this.scrollerControl).children()[this.currentSlideIndex - 1]).css('color','#36AFEE');
			}
			this.init = function(images,appendToElement) {
				this.totalSlides = images.length;
				for(var i = 0; i < images.length; i++) {
					var img = images[i];
					var slide = document.createElement('div');
					slide.className = 'slide';
					slide.style.height = this.slideHeight + 'px';
					slide.style.width = this.slideWidth + 'px';
					slide.style.backgroundImage = 'url(' + img + ')';
					$(this.slideContainer).append(slide);
				}
				var imgBack = document.createElement('img');
				imgBack.className = 'slideControl backControl';

				var imgForward = document.createElement('img');
				imgForward.className = 'slideControl forwardControl';

				var sldr = this;
				$(imgBack).click( function() {
					sldr.back();
				});
				$(imgForward).click( function() {
					sldr.forward();
				});
				for(var x = 0; x < images.length; x++) {
					var dot = document.createElement('span');
					dot.innerHTML = '&bull;';
					dot.className = 'dot';
					if(!x) {
						dot.style.color = '#36AFEE';
					}
					$(dot).click( function() {
						var dots = $(sldr.scrollerControl).children();
						for(var d = 0; d < dots.length; d++) {
							var dot = dots[d];
							if(dot == this) {
								sldr.goToSlide(d+1);
								break;
							}
						}
					});
					this.scrollerControl.appendChild(dot);
				}

				switch(this.direction.toLowerCase()) {
					case "horizontal":
						var totWidth = this.slideWidth * images.length;
						$(this.slideContainer).css('width', totWidth + 'px');
						imgBack.src = imgLeftSrc;
						imgForward.src = imgRightSrc;
						
						break;
					case "vertical":
						var totHeight = this.slideHeight * images.length;
						$(this.slideContainer).css('height', totHeight + 'px');
						imgBack.src = imgDownSrc;
						imgForward.src = imgUpSrc;
						break;
				}
				
				$(appendToElement).css({width:this.slideWidth + 'px',height: this.slideHeight + 'px',position:'absolute'});

				$(appendToElement).css('overflow','hidden').append(imgBack).append(this.slideContainer).append(imgForward).append(this.scrollerControl).mouseenter( function() {
					if($(sldr.slideContainer).css('display').toLowerCase() != 'none') {
						$(imgForward).fadeIn();
						$(imgBack).fadeIn();
					}

				}).mouseleave( function() {
					$(imgForward).fadeOut();
					$(imgBack).fadeOut();
				});
			}
		}

	};
})( jQuery );