document.observe("dom:loaded", function() {
	
	// ---------- homepage slideshow --------------
	if($('slider')){		
		// init slide script
		new smPanelEffects({effect:'fade', autoscrolldelay:7, speed:0.2});
	}

});


/* ---------------------- smPanelSlider Class v0.11 by Rob Mills - updated 17/08/2009 ----------------------------------
- needs prototype.js 1.6 and effects.js from scriptaculous 1.8.1 or latest version of protoculous-effects-shrinkvars.js

version history:
- 0.2 added play/pause and moved abstracted next/previous functionality so the buttons can be moved anywhere
- 0.11 added next previous functionality and event queue(11/11/2008) 
- 0.1  created on 07/11/2008

info:
- slides panels

options info:
- available transitions are:
Effect.Transitions.sinoidal
Effect.Transitions.linear
Effect.Transitions.reverse // doesn't seem to work, maybe because reverse is a reserved word
Effect.Transitions.wobble
Effect.Transitions.flicker
Effect.Transitions.pulse
Effect.Transitions.spring
Effect.Transitions.none
Effect.Transitions.full
*/

var currentPanel = 1;																			// stores current panel being shown
var animating = false;																			// stores whether animation taking place
var automating = false;																			// stores whether automation in process
var timeout;																					// stores timeout object
var totalpanels;																				// stores total panels
var eventQueue = [];																			// stores event queue

var smPanelEffects = Class.create({
	initialize: function(options) {
        this.options = {
            effect: 'panel',                                                                    // typeof effect - panel / fade
            controls: 'slideshow_controls',														// CLASS of each scroll control
			controltag: 'dd',																	// tag used by individual scroll controls
			controltagid: 'dd',																	// ID used on each control element without number - i.e. dd (to represent dd1,dd2 etc)
            contEvent: 'click',                                                                 // event that triggers transition
            skipbutton: 'skip',																	// class of skip buttons
            skipnext: 'next',																	// class of button for skipping to next
            skipprev: 'previous',																// class of button for skipping to previous
            hoverpause: false,                                                                  // should slideshow pause/play on hover/mouseout
            playpause: 'playpause',                                                             // class of play / pause container
            pause: 'pause',                                                                     // id of pause button
            play: 'play',                                                                       // id of play button
            controlsel: 'selected',																// class applied to selected scroll control
            container: 'slideshow',																// ID of panel container
            panels: 'slide',																	// CLASS used on each panel
            panelid: 'slide',																	// ID used on each panel without number - i.e. slide (to represent slide1,slide2)
            initpanel: 'slide1',																// used for calculating panel width
            speed: 0.7,																			// speed of transition
            transition: Effect.Transitions.sinoidal,											// transition type
            auto: true,                                                                         // enable auto transitions
            autoscrolldelay: 4,																	// seconds between panel animations
            eventQueue: true,																	// queue events
            DEBUG: false,																		// debugging ? needs FF with FireBug
            extend: null
        }
		Object.extend(this.options, options || {});												// copies from source to object
		totalpanels = $$('.'+this.options.panels).length;										// store totalpanels for use throughout
        if(this.options.effect == 'panel'){
            var fullwidth = ($(this.options.initpanel).getWidth()) * totalpanels;               // width of all panels combined
            $(this.options.container).setStyle({width:fullwidth+'px'});                         // this div needs the total width of all panels side by side
        }
        if(this.options.hoverpause){
            $(this.options.container).observe("mouseover",function() {this.doPlayPause("pause")}.bindAsEventListener(this));
            $(this.options.container).observe("mouseout",function() {this.doPlayPause("play")}.bindAsEventListener(this));
        }
        if($(this.options.playpause)) this.clickPlayPause();
		$$('.'+this.options.controls+' a').each(function(e){         							// prepare main navigational buttons
            $(e).observe(this.options.contEvent, function(){ this.animateAction(e,'');}.bindAsEventListener(this));
        }.bindAsEventListener(this))
        $$('.'+this.options.skipbutton).each(function(elmnt){
            $(elmnt).observe('click', function(){ this.buttonAction(elmnt);}.bindAsEventListener(this));
        }.bindAsEventListener(this))
        timeout = setTimeout(function() { this.animateAuto();}.bindAsEventListener(this),(this.options.autoscrolldelay * 1000));
	},
    buttonAction: function(e){
		console.log('clicked');
        var skipTo;
        if($(e).hasClassName(this.options.skipnext)){
            skipTo = ((currentPanel +1) <= totalpanels) ? (currentPanel +1) : 1;
        }else{
            skipTo = ((currentPanel -1) != 0) ? (currentPanel -1) : totalpanels;
        }
        this.doShowHidePlayPause("pause");
        this.clearAuto();this.animateAction('',skipTo);
    },
	animateAuto: function(){																	// automatic transitions
		if(this.options.auto){
			if(this.options.DEBUG) console.log('totalpanels: '+ totalpanels);
			automating = true;
            newp = (currentPanel < totalpanels) ? (currentPanel+1) : 1;
			if(this.options.DEBUG) console.log('newpanel: '+ newp);
			this.animateAction('',newp);
			timeout = setTimeout(function() { this.animateAuto();}.bindAsEventListener(this),(this.options.autoscrolldelay * 1000));
		}
	},
	clearAuto: function(){																		// stops automatic transitions
		automating = false;
        if(typeof(timeout) == 'number') clearTimeout(timeout);
        this.doShowHidePlayPause("pause");
	},
	animateAction: function(e,v){																// animates to reveal chosen panel either by fading or sliding panel
		var newpanel;
        if(!animating){
			if(e){                                                                              // was a click or hover - not an automation
                this.clearAuto();
				newpanel = parseInt($(e).up(this.options.controltag).id.replace(this.options.controltagid,""));
			}else{
				newpanel = v;
			}
			var diff = (currentPanel - newpanel);
			if(this.options.DEBUG) console.log('currentPanel: '+currentPanel+' newpanel: '+newpanel+' |diff: '+diff);
			animating = true;
			if(this.options.effect == 'panel'){
                var distance = diff * ($(this.options.initpanel).getWidth());
                if(this.options.DEBUG) console.log('distance: '+ distance);
                new Effect.Move($(this.options.container), { x: distance, y: 0, mode: 'relative',duration: this.options.speed,transition: this.options.transition,afterFinish: function(){ animating = false;this.checkEventQueue(); }.bindAsEventListener(this)});
            }else{
                if(currentPanel != newpanel){
                    new Effect.Fade(this.options.panelid+currentPanel,{duration: this.options.speed});
                    new Effect.Appear(this.options.panelid+newpanel,{duration: this.options.speed,afterFinish: function(){ animating = false;this.checkEventQueue(); }.bindAsEventListener(this)});
                }else{
                    if(this.options.DEBUG) console.log('ignoring click');
                    animating = false;
                    this.checkEventQueue();
                }
            }
            currentPanel = newpanel;
			this.setSelected(newpanel);
            if(this.options.DEBUG) console.log(' --------- ');
		}else{
			if(this.options.eventQueue){
				if(this.options.DEBUG) console.log('adding to event queue');
				if(e){
					newpanel = parseInt($(e).up(this.options.controltag).id.replace(this.options.controltagid,""));
				}else{
					newpanel = v;
				}
				eventQueue.push(newpanel);
			}
		}
	},
	checkEventQueue: function(){
		if(this.options.DEBUG) console.log('checking event queue');
		if(eventQueue.length > 0){
			if(this.options.DEBUG) console.log('using the event queue');
			var newp = eventQueue.shift();
			this.animateAction('',newp);
		}
	},
    clickPlayPause: function(){
        if(($(this.options.pause).visible()) && ($(this.options.play).visible())){
            var val = (this.options.auto == true) ? 'play' : 'pause';
            this.doShowHidePlayPause(val);
        }
        $(this.options.pause).observe("click",function(){this.doPlayPause("pause");}.bind(this));
        $(this.options.play).observe("click",function(){this.doPlayPause("play");}.bind(this));
    },
    doPlayPause: function(status){
        this.doShowHidePlayPause(status);
        if(this.options.DEBUG) console.log(status);
        if(status == 'pause'){
            this.clearAuto();
        }else{
            this.options.auto = true;
            this.clearAuto();
            timeout = setTimeout(function() { this.animateAuto();}.bindAsEventListener(this),(this.options.autoscrolldelay * 1000));
        }
        this.doShowHidePlayPause(status);
    },
    doShowHidePlayPause: function(status){
        if(status == 'play'){
            if($(this.options.play)) $(this.options.play).hide();
            if($(this.options.pause)) $(this.options.pause).show();
        }else{
            if($(this.options.pause)) $(this.options.pause).hide();
            if($(this.options.play)) $(this.options.play).show();
        }
    },
    setSelected: function(sel){																	// sets selected state on buttons
		if(this.options.DEBUG) console.log("setting selected " + sel);
		$$('.'+this.options.controls+' a').each(function(el){
			var ddid = parseInt($(el).up(this.options.controltag).id.replace(this.options.controltagid,""));
			if(ddid == sel){
				$(el).addClassName(this.options.controlsel);
			}else{
				if($(el).hasClassName(this.options.controlsel)){
					$(el).removeClassName(this.options.controlsel);
				}
			}
		}.bindAsEventListener(this));
	}
});