/**
 * jQuery Billboard v0.9
 *
 * Terms of Use - jQuery Billboard
 * under the MIT (http://www.opensource.org/licenses/mit-license.php) License.
 *
 * Copyright 2010 relishinteractive.com All rights reserved.
 * (http://passtherelish.com/)
 * 
 * Based on: Simple JavaScript Rotating Banner Using jQuery
 * http://www.mclelun.com/blog/2010/01/jquery-rotating-banner/
 *
 */


jQuery.fn.billboard = function(settings){
	var wrapper = jQuery(this);
	var numSlides = $("> ul > li", wrapper).size() - 1; // -1 for max array index
	var firstSlide = $("> ul > li:first", wrapper);
	
	var curSlide = 0;
	var interval = 0;
	var dir = 0;
	var paused = false;
	var xpos = 0;
	var ypos = 0;
	var title;
	
	// default options
	var options = jQuery.extend({
		ease: "easeInOutExpo",
		width: 0,
		height: 0,
		speed: 1000,			// duration of transitions in milliseconds
		duration: 5000,			// time between slide changes
		autoplay: 1,
		transition: "left", 	// "fade", "up", "down", "left", "right"
		nav: "list", 			// "controls", "list", "both" or "none"
		style_nav: true
	}, settings);
	
	// extra elements
	var footer = 				jQuery('<div class="footer"></div>');
	var caption = 				jQuery('<div class="caption"></div>');
	var listNav_wrapper = 		jQuery('<div class="nav_wrapper list"></div>');
	var controlsNav_wrapper = 	jQuery('<div class="nav_wrapper controls"></div>');
	
	// style nav
	if(options.style_nav) {
		$(listNav_wrapper).addClass("styled");
		$(controlsNav_wrapper).addClass("styled");
	}
	
	// control elements
	var nav_next = 				jQuery('<div class="control next" title="Next">Next</div>');
	var nav_prev = 				jQuery('<div class="control prev" title="Previous">Previous</div>');
	var nav_pause = 			jQuery('<div class="control play pause" title="Pause/Play">Pause/Play</div>');
	
	// set width/height to first image dimensions (detection needs work)
	if(!options.width && wrapper.css("width") == wrapper.parent().width()) 		wrapper.width(firstSlide.width());
	if(!options.height && wrapper.css("height") == wrapper.parent().height()) 	wrapper.height(firstSlide.height());
	
	// init first slide position
	if(options.transition == "left") 
		$("> ul > li:first", wrapper).css("left", wrapper.width()+"px");
	if(options.transition == "right") 
		$("> ul > li:first", wrapper).css("left", -wrapper.width()+"px");
	if(options.transition == "up") 
		$("> ul > li:first", wrapper).css("top", -wrapper.height()+"px");
	if(options.transition == "down") 
		$("> ul > li:first", wrapper).css("top", wrapper.height()+"px");
		
	// add footer, caption and nav
	footer.appendTo(wrapper);
	caption.appendTo(footer);
	
	// hide all images
	$("> ul > li", wrapper).hide();
	
	// build nav
	switch(options.nav) {	
		case "controls":
			addNavControls();
			break;
		case "list":
			addNavList();
			break;
		case "both":
			addNavControls();
			addNavList();
			break;
		case "none":
			// none
			break;
	}
	function addNavControls() {
		// prev/pause/next
		controlsNav_wrapper.appendTo(footer);
		nav_next.appendTo(controlsNav_wrapper);
		nav_pause.appendTo(controlsNav_wrapper);
		nav_prev.appendTo(controlsNav_wrapper);	
	}
	function addNavList() {
		// clickable button for each slide
		listNav_wrapper.appendTo(footer);
		var item;
		$("> ul > li", wrapper).each(function(i) {
			item = jQuery('<div class="dot" rel="' + i + '">' + (i+1) + '</div>').click(function() {
				curSlide = parseInt($(this).attr("rel"));
				play();
			});
			item.prependTo(listNav_wrapper);
		});
	}
	
	// button behaviours
	$(nav_pause).click(function() {
		if(paused){
			resume();
		} else {
			pause();
		}
	});
	$(nav_next).click(function() {
		nextSlide();
	});
	$(nav_prev).click(function() {
		prevSlide();
	});
	
	// public methods
    arguments.callee.pause = function() {
    	pause();
    };		
    arguments.callee.resume = function() {
		resume();
    };		
	
	// reset autoplay interval
	function reset(){
		if(options.autoplay) {
			clearInterval(interval);
			interval = setInterval(nextSlide, options.duration);
		}
	}
	
	// go to next slide
	function nextSlide() {
		curSlide == numSlides ? curSlide = 0 : curSlide++;
		play();	
	}
	
	// go to prev slide
	function prevSlide() {
		curSlide == 0 ? curSlide = numSlides : curSlide--;
		play();
	}
	
	function pause() {
		if(!paused) {
			if(options.autoplay) clearInterval(interval);
			paused = true;	
			$(nav_pause).removeClass("pause");
		}
	}
	
	function resume() {
		if(paused) {
			reset();
			paused = false;
			$(nav_pause).addClass("pause");
		}
	}
	
	// load slide
	function play(){
		// animate slides
		$("> ul > li", wrapper).each(function(i) { 
			// set caption
			if(i == curSlide){
				title = $(this).attr("title");
				$(".caption", wrapper).animate({ opacity: "hide", "left": "-30px"}, options.speed, function(){
					$(".caption", wrapper).html(title).animate({ opacity: "show", "left": "0px"}, {
						duration: options.speed
					});
				});
			} 
			switch(options.transition) {
				case "fade":
					if(i == curSlide){
						$(".caption", wrapper).text($(this).attr("title"));
						$(this).animate({ opacity: "show" },{
								duration: options.speed
		                    });
					} else {
						$(this).animate({ opacity: "hide" }, {
								duration: options.speed
		                    });
					}
					break;
				case "left":
				case "right":
					xpos = (i - curSlide) * wrapper.width();
					if(options.transition == "right") xpos *= -1;
					if(i == curSlide) $(this).show();
					$(this).animate({ "left": xpos + "px" }, {
							duration: options.speed,
							easing: options.ease
			            });
					break;
				case "up":
				case "down":
					ypos = (i - curSlide) * wrapper.height();
					if(options.transition == "up") ypos *= -1;
					if(i == curSlide) $(this).show();
					$(this).animate({ "top": ypos + "px" }, {
							duration: options.speed,
							easing: options.ease
			            });
					break;					
			}
			// set current item in list nav
			if(i == curSlide) {
				$("div[rel=" + i + "]", listNav_wrapper).addClass("selected");
			} else {
				$("div[rel=" + i + "]", listNav_wrapper).removeClass("selected");			
			}
		});
		reset();
	}
	
	// load first slide
	$(wrapper).addClass("activated");
	play();
}