var ctSlides = {
	slideSpeed: 5000, //5 seconds
	timerOn: true, //Should the slideshow play by default.
	reverseThumbs: false, //Are thumbs shown in reverse of the slides in the HTML? Usually done when they are floated right
	createControls: function(slides) {
		var div = $("<div>").attr("id","ctSlides-controls");
		$("<a>").attr("href","#timer").attr("id","ctSlides-timer").html("Timer").appendTo(div);
		var ul = $("<ul>");
		for(i=1;i<=slides.length;i++) {
			if (i == 1) {
				$("<li>").html('<a href="#ctSlide-'+i+'" class="ctSlide-thumb ctSlide-current" id="ctSlide-'+i+'-thumb">'+i+'</a>').appendTo(ul);
			} else {
				$("<li>").html('<a href="#ctSlide-'+i+'" class="ctSlide-thumb" id="ctSlide-'+i+'-thumb">'+i+'</a>').appendTo(ul);
			}
		}
		ul.appendTo(div);
		div.prependTo($("#wrap"));
	},
	next: function() {
		if(ctSlides.currentSlide >= (ctSlides.thumbs.length-1)) var nextSlide = 0; 
		else var nextSlide = ctSlides.currentSlide+1;
		
		//Swap slides & reset timer
		ctSlides.swap(nextSlide);
		if(ctSlides.timerOn) { //Reset the timer if it is currently on
			clearTimeout(ctSlides.t);
			ctSlides.setTimer();
		}
	},
	previous: function() {
		if(ctSlides.currentSlide === 0) var nextSlide = ctSlides.thumbs.length-1 
		else var nextSlide = ctSlides.currentSlide-1;
		
		//Swap slides & reset timer
		ctSlides.swap(nextSlide);
		if(ctSlides.timerOn) { //Reset the timer if it is currently on
			clearTimeout(ctSlides.t);
			ctSlides.setTimer();
		}
	},
	setTimer: function() {
		this.t = setTimeout(this.next,this.slideSpeed);
		this.timerOn = true;
	},
	stopTimer: function() {
		clearTimeout(ctSlides.t);
		$("#ctSlides-timer").addClass("play");
		ctSlides.timerOn = false;
	},
	swap: function(slide) {
		//Set thumbnail styles
		if(this.reverseThumbs) {
			var r_slide = this.thumbs.length - slide -1;
			$(".ctSlide-current").removeClass("ctSlide-current");
			$(this.thumbs[r_slide]).addClass("ctSlide-current");
		} else {
			$(this.thumbs[this.currentSlide]).removeClass("ctSlide-current");
			$(this.thumbs[slide]).addClass("ctSlide-current");
		}
		
		//Next slide gets z-index of 1 and make sure the slide is visible
		$(this.slides[slide]).css("z-index","1").show();
		//Set z-index of 2 for current slide and fade out while reseting z-index to 0 when done
		$(this.slides[this.currentSlide]).css("z-index","2").fadeOut("slow", function () {
			$(this).css("z-index","0");
		});
		
		if(ctSlides.timerOn) { //Reset the timer if it is currently on
			clearTimeout(ctSlides.t);
			ctSlides.setTimer();
		}
		this.currentSlide = slide;
	},
	init: function(e) {
		this.slides = $("#masthead-container div");
		if(this.slides.length > 1) {
			ctSlides.createControls(this.slides);
			this.thumbs = $(".ctSlide-thumb");
			//this.slideWidth = this.slides[0].offsetWidth;
			//$("#masthead-container")[0].style.width = this.slideWidth*this.slides.length+"px";
			this.currentSlide = 0;
			
			//Set initial z-index on first slide
			$(this.slides[0]).css("z-index","2");
			
			for(i=this.thumbs.length-1; i>=0; i--) {
				$(this.thumbs[i]).click(function(e) {
					e.preventDefault();
					//Stop Timer
					if(ctSlides.timerOn) ctSlides.stopTimer();
					
					var s = this.id.split("-");
					var t = parseInt(s[1]) - 1;
					ctSlides.swap(t);
				});
			}
			
			//Setup Timer
			$("#ctSlides-timer").click(function(e) {
				e.preventDefault();
				if(this.className === "play") {
					ctSlides.setTimer();
					ctSlides.timerOn = true;
				} else {
					clearTimeout(ctSlides.t);
					ctSlides.timerOn = false;
				}
				$(this).toggleClass("play");
			});
			
			//Start slides timer
			if(this.timerOn) {
				this.setTimer();
			} else {
				$("#ctSlides-timer").toggleClass("play");
			}
		}
	}
}

$(function() {
	ctSlides.init();
});