window.addEvent('domready',function(){

// RENT Slider
	
	var handles_bottom = $$('#handles_bottom .content');	// Define the bottom info handles
	
	// Define all the needed variables and functions
	
	var slider_rent = new noobSlide({
		box: $('content_rent'),	// Slideshowarea
		items: $$('#content_rent .content'), // Items
		size: 576, // Slider area size
		interval: 5000,	// Slider interval
		fxOptions: {	// Slider change animation options
			duration: 0,
			transition: Fx.Transitions.Bounce.easeOut,
			wait: false
		},
		handles: $$('#handles .thumb img'),	// Top handles
		
		// Define the "moving" functions
		
		onWalk: function(currentItem,currentHandle){
			
			// Define the thumbnail scroller function
			
			var item_width = 158;
			$$('.holder').setStyle('width', item_width*this.items.length + 'px');
			$$(this.handles).set('morph', {duration: 250, transition: 'linear'}).morph({'opacity': 1, 'background-color': null}).addEvents({
				mouseenter: function(){
					this.morph({
						'opacity': 0.25
					});
				},
				mouseleave: function(){
					this.morph({
						'opacity': 1
					});
				}
			});
			
			var myFx = new Fx.Scroll($('handles'), {offset: {'x': -228, 'y': 0}}).toElement(currentHandle);
			
			// Define the top handles functions
			
			$$(currentHandle).set('morph', {duration: 250, transition: 'linear'}).morph({'opacity': 1, 'background-color': '#ccc'}).removeEvents('mouseenter');
			$$(currentHandle).set('myFx');

			// Define the bottom handles functions
			
			$$(handles_bottom).set('morph', {duration: 500, transition: 'linear'}).morph({'background-color': '#f2f2f2'}).addEvents({
				mouseenter: function(){
					this.morph({
						'background-color': '#ccc'
					});
				},
				mouseleave: function(){
					this.morph({
						'background-color': '#f2f2f2'
					});
				}
			});
			
			$$(handles_bottom[this.currentIndex]).set('morph', {duration: 500, transition: 'linear'}).morph({'background-color': '#ccc'}).removeEvents('mouseleave');
			
			// Define the items functions
			
			$$(this.items).set('morph', {duration: 500, transition: 'linear'}).morph({'opacity': [1, 0]});
			$$(currentItem).set('morph', {duration: 500, transition: 'linear'}).morph({'opacity': [0, 1]});
			
			// Define the items photo fading variables and functions
			
			var Fader = new Class({
			  Implements: Options,
			  options: {
			    pause: 2000,	// Photo standing still (2 seconds)
			    duration: 500,	// Photo fading speed (0.5 seconds)
			    loop: true,	// Photos looping automatically
			    onComplete: Class.empty,
			    onStart: Class.empty
			  },
			  initialize: function(container,options) {
			    this.setOptions(options);
			    this.container = $(container);
			    this.imgs = this.container.getElements('img');
			    this.imgs.setStyles({
			      'position': 'absolute',
			      'top': '0px',
			      'left': '0px',
			      'opacity': '0'
			    });
			    this.imgs[0].setStyle('opacity', 1);
			    this.el = new Element('div', {'styles': {
			      'position': 'relative'
			    }});
			    this.el.injectInside(this.container);
			    this.el.adopt(this.imgs);
			      this.next = 0;
			      this.start();
			  },
			  start: function() {
			    this.show();
			    this.periodical = this.show.bind(this).periodical(this.options.pause);
			  },
			  stop: function() {
					$clear(this.periodical);
			  },
			  show: function() {
			  	if (!this.options.loop && this.next==this.imgs.length-1) this.stop();
			    this.next = (this.next == this.imgs.length-1) ? 0:this.next+1;
			    var prev = (this.next==0) ? this.imgs.length-1 : this.next-1;
			
			    this.imgs[this.next].fade('in');
			    this.imgs[prev].fade('out');
			  }
			
			});
			
			// Define the items photo area IDs
			
			$$(this.items).getElement('.images div').set('id','');
			$$(currentItem).getElement('.images div').set('id','car_image');
			
			// Define the items photo fading area
			
			var fader = new Fader('car_image');
			$$(currentItem).set('fader');
			
		}
	});

	// START THE SLIDESHOW
	
	slider_rent.addHandleButtons(handles_bottom);
	slider_rent.walk(0, false, true); // Define the starting point

});