/*

	Prototype & Scriptaculous slider

	This javascript is the main javascript for the sites actions.
	
*/

// --------------------------------------------------------------------------------------------------------------
// what to do on DOM ready
document.observe("dom:loaded", runOnDOMready);

function runOnDOMready() { 
	

	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ top slider funcs */
	
	// slider li/a/img hovers
	$$('ul#slides li').each(function(el){
		el.observe('mouseover', function(event) {
			var element = Event.element(event);
			element.addClassName('hover');
		});
		el.observe('mouseout', function(event) {
			var element = Event.element(event);
			element.removeClassName('hover');
		});
	});
	$$('ul#slides li img').each(function(el){
		el.observe('mouseover', function(event) {
			var element = Event.element(event);
			element.up().addClassName('hover');
		});
		el.observe('mouseout', function(event) {
			var element = Event.element(event);
			element.up().removeClassName('hover');
		});
	});
	$$('ul#slides li a').each(function(el){
		el.observe('mouseover', function(event) {
			var element = Event.element(event);
			element.up().up().addClassName('hover');
		});
		el.observe('mouseout', function(event) {
			var element = Event.element(event);
			element.up().up().removeClassName('hover');
		});
	});	
	
	// slider motion
	var sliderInner = $('slides');
	// get all the items in the slider list
	var listItems = $$('#slides li');
	// get the html of the list items into a var
	var listItemsHTML = $('slides').innerHTML;
	// is the slider moving
	var sliderMoving = false;
	// which bit of the slider are we working on?
	var currentSliderCount = 2;
	var currentSliderPos = -20;
	var slideAmount = 695;
	// a var to attach the autoscroller set interval to
	var doAutoScroll = null;
	
	// add some events to the slider buttons
	if ($('slider')) {
		$$('#slider p.prev a')[0].observe('click', function(event) {
			moveSlider('left');
			Event.stop(event);				
		});
		$$('#slider p.next a')[0].observe('click', function(event) {
			moveSlider('right');
			Event.stop(event);				
		});		
		// the slider functions
		function moveSlider(direction) {
			if (!sliderMoving) {
				clearInterval(doAutoScroll);
				calculateNextPosition(direction);
				sliderMoving = true;
				new Effect.Move (sliderInner,{ x: -currentSliderPos, y: 0, mode: 'absolute', duration: 0.99, transition: Effect.Transitions.sinoidal, afterFinish: checkForLoop });
			}
		}		
		// calculate the next position of the slider
		function calculateNextPosition(direction) {
			if(direction == 'right') {
				currentSliderCount ++;
				currentSliderPos += slideAmount;
			} else {			
				currentSliderCount--
				currentSliderPos -= slideAmount;
			}					
		}		
		// auto scroll
		function autoScroll() {
			moveSlider('right');	
		}
		// add extra list items into the dom!
		function addListItems() {
			// checl the amount of LIs
			if (listItems.length > 2 ) {
				// add in a copy of the LIs - twice
				// there are now 3 copies of the LIs and we want to mainly see the middle set,
				// and then over run onto one of the 2 copies, either left or right
				// before resetting back to showing the middle set
				$('slides').insert(listItemsHTML, { position: "bottom" } );
				$('slides').insert(listItemsHTML, { position: "bottom" } );	
				// sorts out positions and variables that other slider functions use
				resetSlider();
				// set up the prototype periodical executor
				//new PeriodicalExecuter(autoScroll, 5);
				// gah need to stop and start it, setInterval it is then...
				doAutoScroll = setInterval(autoScroll, 5000 );
			} else {
				// less than 2, dont do any auto scroll or any btn funcs
				$$('#slider p.next a')[0].style.display = 'none';
				$$('#slider p.prev a')[0].style.display = 'none';
			}
		}
		// check for loop, reset if need be
		function checkForLoop() {
			// if current is bigger than the amount plus one, then we're repeating the first 2 LIs, so we can just show the middle set again
			// or
			// if current is the same as negative amount minus 2, we've now gone backwards a full set, so we can just show the middle set again
			if( (currentSliderCount == (listItems.length+2)) || (currentSliderCount == (listItems.length-2)*-1) ) {
				resetSlider();
			}
			sliderMoving = false;
			doAutoScroll = setInterval(autoScroll, 5000 );
		}
		// reset slider position and variables
		function resetSlider() {
			// as default:
			currentSliderCount = 2;
			// working out the width of the original set of LIs
			var width = slideAmount * listItems.length;
			// then adjusting (so the left button doesnt obscure) - this var is dom ready wide and is defined and used elsewhere
			currentSliderPos = width - 20;
			// then need to sort the position out, so that the middle set of LIs is shown.
			var posAdjust = "-"+currentSliderPos+"px";
			// and adjust
			sliderInner.setStyle({ left: posAdjust });
		}		
		// need to make sure extra list items have been added if needed
		addListItems();		
	}
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Tab funcs */
	
	var Fabtabs = Class.create();
	Fabtabs.prototype = {
		initialize : function(element) {
        	this.element = $(element);
            var options = Object.extend({}, arguments[1] || {});
            this.menu = $A(this.element.getElementsByTagName('a'));
            this.show(this.getInitialTab());
          	this.menu.each(this.setupTab.bind(this));
		},
        setupTab : function(elm) {
        	Event.observe(elm,'click',this.activate.bindAsEventListener(this),false)
  		},
        activate :  function(ev) {
            var elm = Event.findElement(ev, "a");
			Event.stop(ev);
			this.show(elm);
			this.menu.without(elm).each(this.hide.bind(this));
        },
        hide : function(elm) {
            $(elm).up().removeClassName('active-tab');
            $(this.tabID(elm)).removeClassName('active-tab-body');
    	},
        show : function(elm) {
            $(elm).up().addClassName('active-tab');
            $(this.tabID(elm)).addClassName('active-tab-body');
  		},
        tabID : function(elm) {
        	return elm.href.match(/#(\w.+)/)[1];
      	},
        getInitialTab : function() {
			this.menu.each(this.hide.bind(this));
            if(document.location.href.match(/#(\w.+)/)) {
            	var loc = RegExp.$1;
                var elm = this.menu.find(function(value) { return value.href.match(/#(\w.+)/)[1] == loc; });
                return elm || this.menu.first();
          	} else {
               	return this.menu.first();
         	}
 		}
	}
	Event.observe(window,'load',function(){ new Fabtabs('tabs'); },false);

}