window.addEvent('domready', function() {
	
	/* ----------Config Vars----------- */
	var slideTimer = 4000;  //time between slides (1 second = 1000), a.k.a. the interval duration
	var transitionTime = 2000; //transition time (1 second = 1000)
	var items = $$('.slide_item');  //Get array of elements for sliding
	var items_2 = $$('.slide_item2');  //Hämta array för högersliden
	var numItems = items.length;  //get number of slider items
	var numItems_2 = items.length;  //Hämta antal slider för högersliden
	var numNav = new Array();  //create an array to hold our dynamically created number navigation
	var numNav_2 = new Array();  //create an array to hold our dynamically created number navigation
	//var prevBtn = $('prevbtn');
	//var playBtn = $('playbtn');
	//var nextBtn = $('nextbtn');
	var itemNum = 0;  //initialize a variable to hold the current slide index
	var itemNum_2 = 0;  //initialize a variable to hold the current slide index för den högra sliden
	var isPaused = 0;
	var isSliding = 0;
	var numNavHolder = $('num_nav');
	/* -------- end config vars -------- */
	
	
	
	//--------- setup stuff ---------//
	items.each(function(element, index) {
		
		//since the viewer obviously has javascript on, we can remove the 'first_item' class
		if(index == 0){
			element.removeClass('first_item');
			element.setStyle('left', "0");
		}
		else{
			element.setStyle('left', "675px");
			element.setStyle('opacity', "0");
		}
		
		//create numbered navigation boxes, and insert into the 'num_nav' ul)
	
		var numItem = new Element('li', {'id': 'num'+index});
		var numLink = new Element('a', {
			'class': 'numbtn'
		});
		
		numLink.setHTML(index+1);
		numItem.adopt(numLink);
		numNavHolder.adopt(numItem);
		numNav.push(numLink);
	});
	
	
	//highlight initial slide's number box
	var initNum = numNav[itemNum];
	origColor = initNum.getStyle('color');
	
	initNum.setStyles({
		'color': '#000000'
	});
	//--------- end setup stuff ---------//
	
	
	
	//---------------------------------------------------------------------------------------------------------
	//	function: slideMove
	//	description: moves the appropriate slides in/out of view
	//	parameters:
	//		int direction - specifies type of movement (0=back, 1=forward, 2=jump to frame
	//		int passedID (optional) - index value to jump to when direction = 2
	//---------------------------------------------------------------------------------------------------------
	var slideMove = function(direction, passedID){ 
		
		//get item to slide out
		var curItem = items[itemNum]; 
		var curNumItem =  numNav[itemNum];
		
		//change index based on value of 'direction' parameter
		if(direction == 1){
			if(itemNum < (numItems - 1)){
				itemNum++; 
			}
			else{
				itemNum = 0;
			}
		}
		else if(direction == 0){
			if(itemNum > 0){
				itemNum--; 
			}
			else{
				itemNum = (numItems - 1);
			}
		}
		else {
			if(itemNum != passedID){
				itemNum = passedID;
			}
		}
		
		//now get item to slide in using new index
		var newItem = items[itemNum];
		var newNumItem = numNav[itemNum];
		
		
		//set up our animation stylings for out and in motions (note:  Fx.Styles does NOT exist in moo 1.2, so we must use Fx.Styles or Fx.Tween)
		var item_in = new Fx.Styles(newItem, {
				 wait: false,
			     duration: transitionTime, 
			     transition: Fx.Transitions.Quad.easeOut, 
			     link: 'ignore',
			     
			     //click prevention functions
			     onStart: function(){
				    isSliding = 1;  //prevents extra clicks
			     },
			     
			     onComplete: function(){ 
					isSliding = 0;  //allow clicks again
				}
		});
		
		var item_out = new Fx.Styles(curItem, {
				 wait: false,
			     duration: transitionTime, 
			     transition: Fx.Transitions.Quad.easeOut, 
			     link: 'ignore'
		});
		
		var num_in = new Fx.Styles(newNumItem, {
			     duration: 100, 
			     transition: Fx.Transitions.linear, 
			     link: 'ignore'
		});
		
		var num_out = new Fx.Styles(curNumItem, {
			     duration: 100, 
			     transition: Fx.Transitions.linear, 
			     link: 'ignore'
		});
		
		//we will set a beginning value here
		//this is so that it gives the illusion of continuous motion from one direction, even after the first cycle of items
		item_in.start({
		'left': [675, 0],
		'opacity':[0,1]
		});
		
		//no beginning values needed, since we always want to push the old item out to the left
		item_out.start({
		'left': '-675',
		'opacity':[0]
		});

		num_in.start({
			'color': '#000000'
		});
		
		num_out.start({
			'color': origColor
		});
		
	};
	//--------------- end slideMove ---------------------
	
	//---------------------------------------------------------------------------------------------------------
	//	function: slideMove 2
	//	description: moves the appropriate slides in/out of view
	//	parameters:
	//		int direction - specifies type of movement (0=back, 1=forward, 2=jump to frame
	//		int passedID (optional) - index value to jump to when direction = 2
	//---------------------------------------------------------------------------------------------------------
	var slideMove_2 = function(direction, passedID){ 
		
		//get item to slide out
		var curItem_2 = items_2[itemNum_2]; 
		var curNumItem_2 =  numNav_2[itemNum_2];
		
		//change index based on value of 'direction' parameter
		if(direction == 1){
			if(itemNum_2 < (numItems_2 - 1)){
				itemNum_2++; 
			}
			else{
				itemNum_2 = 0;
			}
		}
		else if(direction == 0){
			if(itemNum_2 > 0){
				itemNum_2--; 
			}
			else{
				itemNum_2 = (numItems_2 - 1);
			}
		}
		else {
			if(itemNum_2 != passedID){
				itemNum_2 = passedID;
			}
		}
		
		//now get item to slide in using new index
		var newItem_2 = items_2[itemNum_2];
		var newNumItem_2 =  numNav_2[itemNum_2];
		
		
		//set up our animation stylings for out and in motions (note:  Fx.Styles does NOT exist in moo 1.2, so we must use Fx.Styles or Fx.Tween)
		var item_in_2 = new Fx.Styles(newItem_2, {
				 wait: false,
			     duration: transitionTime, 
			     transition: Fx.Transitions.Quad.easeOut, 
			     link: 'ignore',
			     
			     //click prevention functions
			     onStart: function(){
				    isSliding = 1;  //prevents extra clicks
			     },
			     
			     onComplete: function(){ 
					isSliding = 0;  //allow clicks again
				}
		});
		
		var item_out_2 = new Fx.Styles(curItem_2, {
				 wait: false,
			     duration: transitionTime, 
			     transition: Fx.Transitions.Quad.easeOut, 
			     link: 'ignore'
		});
		
		var num_in_2 = new Fx.Styles(newNumItem_2, {
			     duration: 100, 
			     transition: Fx.Transitions.linear, 
			     link: 'ignore'
		});
		
		var num_out_2 = new Fx.Styles(curNumItem_2, {
			     duration: 100, 
			     transition: Fx.Transitions.linear, 
			     link: 'ignore'
		});
		
		//we will set a beginning value here
		//this is so that it gives the illusion of continuous motion from one direction, even after the first cycle of items
		item_in_2.start({
		'top': [354, 0]
		});
		
		//no beginning values needed, since we always want to push the old item out to the left
		item_out_2.start({
		'top': '-354'
		});
				
	};
	//--------------- end slideMove 2 ---------------------
	
	
	//call the slider function periodically
	var theTimer = slideMove.periodical(slideTimer, this, 1); 
	var theTimer_2 = slideMove_2.periodical(slideTimer, this, 1);
	
	
	/* control buttons 
	nextBtn.addEvent('click', function(){
		if(isSliding == 0){
			if(isPaused == 0){
				$clear(theTimer);
				theTimer = slideMove.periodical(slideTimer, this, 1);
			}
			slideMove(1);
		}
	});
	
	prevBtn.addEvent('click', function(){
		if(isSliding == 0){
			if(isPaused == 0){
				$clear(theTimer);
				
				// note: you could change the third parameter to 0 if you wanted to switch the direction here
				theTimer = slideMove.periodical(slideTimer, this, 1); 
			}				     
			slideMove(0);
		}
	});
	
	playBtn.addEvent('click', function(){
		if(isSliding == 0){
			if(isPaused == 0){
				isPaused = 1;
				$clear(theTimer);
				this.getElement('a').set('html', 'play');
			}
			else{
				isPaused = 0;
				slideMove(1);
				theTimer = slideMove.periodical(slideTimer, this, 1); 
				this.getElement('a').set('html', 'pause');
			}
		}
	 });
	 end control buttons */
	
	
	/*  num_nav buttons */
	 numNav.each(function(element, index) {
		var origColor = element.getStyle('color');
		
		element.addEvents({
			'click' : function(){
				if(isSliding == 0 && itemNum != index){
					if(isPaused == 0){
						$clear(theTimer);
						$clear(theTimer_2);
						theTimer = slideMove.periodical(slideTimer, this, 1);
						theTimer_2 = slideMove_2.periodical(slideTimer, this, 1);
					}
					slideMove(2, index);
					slideMove_2(2, index);
					//alert("index: " + index);
				}
			},
			'mouseenter' : function() {
			this.setStyle('cursor', 'pointer');
			}
		});
	
	}); 
	/*  end num_nav buttons */

	
});