/**
 * jQuery.PaceBannerSlider
 * Date: 3/20/2009
 *
 * @projectDescription Animated scrolling banners
 * @author Chad Hayton
 * @version 1.0
 *
 * @id jQuery.PaceBannerSlider
 * @id jQuery.fn.PaceBannerSlider
 * @param {Object} settings Hash of settings, some of which are passed in to jQuery.ScrollTo, none are required.
 * @return {jQuery} Returns the same jQuery object, for chaining.
 *
 * Notes:
 *	- The plugin requires jQuery.ScrollTo and jQuery.serialScroll
 */
jQuery.fn.PaceBannerSlider =  function(options) {
	var $this = $(this);
	
	//plugin properties default settings
	var settings = {
		autoplay: true,
		interval: 6000,
		reps: 1,
		height: 320,
		width: 980,
		offset: 0,
		duration: 350,
		prevNext: false,
		container: jQuery('.scrollContainer', $this),
		scrollPane: jQuery('.scroll', $this), 
		panels: jQuery('.scrollContainer > div', $this),
		sliderNav: null,
		sliderNavClass: '',
		controls: {
					vertical: 'default',
					horizontal: 'default',
					spacing: 0
		},
		isIE: navigator.userAgent.indexOf('MSIE') != -1		//IE Hack
	}
	
	//override defaults
    if(options) jQuery.extend(settings, options);
	settings.offset = parseInt(settings.container.css('paddingTop') || 0) * -1;
	
	//set height and width of slider elements
	$this.css({height: settings.height + 'px', width: settings.width + 'px'});
	settings.scrollPane.css({height: settings.height + 'px', width: settings.width + 'px'});
	settings.panels.css({height: settings.height + 'px', width: settings.width + 'px'});
	
	//set number of reps to cycle slider
	$this.attr({'reps': settings.reps });
	
	// calculate a new width for the container (so it holds all panels)
	settings.container.css('width', settings.panels[0].offsetWidth * settings.panels.length);

	//display overlay blue box buttons to control nav otherwise
	settings.scrollPane.after('<div class="banner-slider-nav ' + settings.sliderNavClass + '"></div>');	
	settings.panels.each(function(i, panel) {
		var displayClass = "";
		if(!window.location.hash && i == 0) {
			displayClass = "selected";
			displayStyle = "";  //style application to fix bugs in IE
		}
		settings.sliderNav = jQuery('.banner-slider-nav', $this);
		
		if(settings.isIE) displayStyle = "padding-top:0px; padding-bottom:0px;"	//IE Hack
		
		settings.sliderNav.append('<a id="' + this.id + '-link" href="#' + this.id + '" title="' + this.title 
									+ '" class="' + displayClass + '" style="' + displayStyle + '"><img src="/images/1x1.gif" border="0" /></a>');
	});
	
	
	//position controls	if passed in.  Otherwise honor the CSS
	var controlPosition = 0;
	if( (settings.controls.vertical == 'top' || settings.controls.vertical == 'bottom') 
			&& (settings.controls.horizontal == 'left' || settings.controls.horizontal == 'center' || settings.controls.horizontal == 'right')) {		
		
		//override default padding and alignment
		settings.sliderNav.css( { 'padding-left': '0px', 'text-align': settings.controls.horizontal } );
		
		//override default top positioning
		if(settings.controls.vertical == 'top' && typeof settings.controls.spacing == 'number')
			controlPosition = settings.controls.spacing *= -1;
		else if(settings.controls.vertical == 'bottom' && typeof settings.controls.spacing == 'number')
			controlPosition = settings.height + settings.controls.spacing - parseInt(settings.sliderNav.css('height'));
		
		settings.sliderNav.css( { top: controlPosition + 'px' } );
	}
	
	//set mouseover on slider panel to pause autoplay
	//if they click on the panel, stop autoplay altogether
	settings.panels
		.hover(
			function () { $this.attr({'pause' : 'true'}) }, 
			function () { $this.attr({'pause' : 'false'}) }
		)
		.click(function(){				
			window.clearInterval($this.attr('intveralid'));
			$this.removeAttr('intveralid');
		});
	
	//also kill auto play on click of slider nav
	settings.sliderNav.children('a').click(function(){				
		window.clearInterval($this.attr('intveralid'));
		$this.removeAttr('intveralid');
	})
	
	//if the panel ID is passed in on the hash, trigger that panel
    if (window.location.hash && jQuery('div#' + window.location.hash.substr(1), settings.scrollPane).length != 0) 
        trigger({ id : window.location.hash.substr(1) });	
    else 
		jQuery('.banner-slider-nav a:first', $this).addClass('selected');
	
	function goToFirstPanel(){
		jQuery('.banner-slider-nav a:first', $this).click();
	}
	
    //handle nav selection
    function selectNav() {
        $(this).parent()
			.find('a').removeClass('selected').end()
			.end()
            .addClass('selected');
    }

    jQuery('div.banner-slider-nav', $this).find('a').click(selectNav);

    // go find the navigation link that has this target and select the nav
    function trigger(data) {
        var el = jQuery('div.banner-slider-nav', $this).find('a[href$="' + data.id + '"]').get(0);
        selectNav.call(el);
    }

    var scrollOptions = {
        target: settings.scrollPane, 		// the element that has the overflow
        items: settings.panels,				// can be a selector which will be relative to the target
        navigation: '.banner-slider-nav a',

        // selectors are NOT relative to document; make sure they are unique
        prev: 'img.banner-slider-left', 
        next: 'img.banner-slider-right',

        axis: 'xy',	// allow the scroll effect to run both directions
        onAfter: trigger, // our final callback
        offset: settings.offset,

        // duration of the sliding effect
        duration: settings.duration,
        easing: 'swing'
    };

    // apply serialScroll to the slider
    $this.serialScroll(scrollOptions);
    
    //once everything is activated, start the interval
    startSliderInterval();

    
    function startSliderInterval() {   	
    	if(settings.autoplay && !settings.prevNext) {
        	var intervalId = window.setInterval(function(){
        		var targetLink;
        		var firstLink = jQuery('.banner-slider-nav a:first', $this)
        		var nextLink = jQuery('.banner-slider-nav a.selected', $this).next();
        	
        		var hasIntervalId = $this.attr('intervalId') != 'undefined';
        		var isPaused = $this.attr('pause') == 'true';
        	
        		if(hasIntervalId && !isPaused) {
        			if(nextLink.length) {
        				targetLink = nextLink;
        			} else {
        				targetLink = firstLink;
        				$this.attr({'reps': (parseInt($this.attr('reps')) - 1) });
        			}
        			targetLink.click();
        			
        			if(parseInt($this.attr('reps')) > 0 ) {
        				startSliderInterval();
        			}
        		}

        	}, settings.interval);
       	
        	$this.attr({'intveralid': intervalId});
    	}
    }
    

	
	return this;
};