function alineaDerecha(objeto) {
	var ventana = 500;
	var margen = ventana - objeto.getStyle('width').toInt() - 25;
	if (margen < 0) margen = 0;
	objeto.setStyle('margin-left', margen);
}
function alineaFondo(objeto) {
	var ventana = $('items_container').getStyle('height').toInt();
	var margen = ventana - objeto.getStyle('height').toInt() - 24;
	if (margen < 0) margen = 0;
	objeto.setStyle('margin-top', margen);
}
window.addEvent('domready', function() {

	/* ----------Config Vars----------- */
	var slideTimer = 5000;  //time between slides (1 second = 1000), a.k.a. the interval duration
	var transitionTime = 750; //transition time (1 second = 1000)
	var items = $$('.slide_item');  //Get array of elements for sliding
	var itemsRotuloTL = $$('.slide_item .rotuloOfertaTL');  //Get array of elements for sliding
	var itemsRotuloTR = $$('.slide_item .rotuloOfertaTR');  //Get array of elements for sliding
	var itemsRotuloBL = $$('.slide_item .rotuloOfertaBL');  //Get array of elements for sliding
	var itemsRotuloBR = $$('.slide_item .rotuloOfertaBR');  //Get array of elements for sliding
	var numItems = items.length;  //get number of slider items
	var numNav = 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 isPaused = 0;
	var isSliding = 0;
	var numNavHolder = $('num_nav');
	var origColor;
	/* -------- end config vars -------- */
	
	$('divRotulo').innerHTML = titulosNav[0];
	
	//--------- setup stuff ---------//
	itemsRotuloTR.each(function(element, index) { alineaDerecha(element); });
	itemsRotuloBR.each(function(element, index) { alineaDerecha(element); alineaFondo(element); });
	itemsRotuloBL.each(function(element, index) { alineaFondo(element); });
	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', "714px");
		}
		
		//create numbered navigation boxes, and insert into the 'num_nav' ul)
		var numItem = new Element('div', {id: 'num'+index});

		var numLink = new Element('a', {
			'class': 'numbtn',
			'html': titulosNav[index]
		});
		numItem.adopt(numLink);
		numNavHolder.adopt(numItem);
		numNav.push(numLink);
    
        // colocacion del texto dependiendo del nº de líneas
        var lineas = numLink.getStyle('height').toInt() / 12;
        numLink.setStyle('padding-top', 2 - (0.5*(lineas-1)) + 'em'); 
        numLink.setStyle('height', 35+((lineas-1)*6)); 

	});
	
	if (numItems > 0) {
	
	//highlight initial slide's number box
	var initNum = numNav[itemNum];
//	origColor = initNum.getStyle('color');
	origColor = '#FFFFFF';
	initNum.setStyles({
		'color': '#E4F77F'
	});
	//--------- 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.Morph or Fx.Tween)
		var item_in = new Fx.Morph(newItem, {
			     duration: transitionTime, 
			     transition: Fx.Transitions.Cubic.easeOut, 
			     link: 'ignore',
			     
			     //click prevention functions
			     onStart: function(){
				    isSliding = 1;  //prevents extra clicks
			     	$('divRotulo').innerHTML = titulosNav[itemNum];
			     },
			     
			     onComplete: function(){ 
					isSliding = 0;  //allow clicks again
				}
		});
		
		var item_out = new Fx.Morph(curItem, {
			     duration: transitionTime, 
			     transition: Fx.Transitions.Cubic.easeOut, 
			     link: 'ignore'
		});
		
		var num_in = new Fx.Morph(newNumItem, {
			     duration: 100, 
			     transition: Fx.Transitions.linear, 
			     link: 'ignore'
		});
		
		var num_out = new Fx.Morph(curNumItem, {
			     duration: 100, 
			     transition: Fx.Transitions.linear, 
			     link: 'ignore'
		});
		
		if (direction == 0) {
		//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': [-714, 0]
		});
		
		//no beginning values needed, since we always want to push the old item out to the left
		item_out.start({
		'left': '714'
		});
		
		}
		
		else {
		//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': [714, 0]
		});
		
		//no beginning values needed, since we always want to push the old item out to the left
		item_out.start({
		'left': '-714'
		});		}
		num_in.start({
			'color': '#E4F77F'
		});
		
		num_out.start({
			'color': origColor
		});
		
	};
	//--------------- end slideMove ---------------------
		
	
	
	//call the slider function periodically
	var theTimer = slideMove.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, 0); 
			}				     
			slideMove(0);
		}
	});
	
	playBtn.addEvent('click', function(){
		if(isSliding == 0){
			if(isPaused == 0){
				isPaused = 1;
				$clear(theTimer);
				this.set('html', '<img src="images/play2.gif" />');
			}
			else{
				isPaused = 0;
				slideMove(1);
				theTimer = slideMove.periodical(slideTimer, this, 1); 
				this.set('html', '<img src="images/pause2.gif" />');
			}
		}
	 });
	/*  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);
						theTimer = slideMove.periodical(slideTimer, this, 1);
					}
					slideMove(2, index);
					//alert("index: " + index);
				}
			},
			'mouseenter' : function() {
				this.setStyle('cursor', 'pointer');
			}
		});
	
	});
	/*  end num_nav buttons */
}
	
});