document.addEvent('domready',function() {
	
	var colorItems = $$('.color-item');
		
	var colorDivName = $('color-name-container');
	var colorDivImage = $('color-image');
	var colorDivImageLoading = $('image-loading');
	
	function Bigger(from_size,to_size,time) {
		$('colors-preview-selector').getElements('img').each(function(item,index)
		{
			var working = new Array();
			var sizes = new Array();
			var arrays = new Array();

			item.setStyle('width',from_size);
			sizes[index] = item.getStyle('width');
			
			item.addEvent('mouseenter',function() // когда задеваем мышкой
			{					
				working[index] = 'true';
				
				arrays[index] = new Fx.Morph(item,{duration:time, wait:false}).start({'width':to_size, 'top': [-40, -60]}).addEvent('onComplete',function()
				{
					//alert(item.outerHTML);
					var tmp = item.src;
					item.src = item.alt;
					item.alt = tmp;
					working[index] = 'false';
				});
			});
							
			item.addEvent('mouseleave',function()
			{
									
				if(working[index] == 'true')
				{
					arrays[index].chain(function()
					{						
						new Fx.Morph(item,{duration:time, wait:false}).start({'width':sizes[index],'top': [-60, -40]}).addEvent('onComplete',function() {
							var tmp = item.src;
							item.src = item.alt;
							//item.style.backgroundImage = 'url("' + item.alt + '")';
							item.alt = tmp;
						});
					});
				}
				else
				{
					new Fx.Morph(item,{duration:time, wait:false}).start({'width':sizes[index], 'marginLeft': [-12,0], 'top': [-60, -40]}).addEvent('onComplete',function() {
						var tmp = item.src;
						item.src = item.alt;
						//item.style.backgroundImage = 'url("' + item.alt + '")';
						item.alt = tmp;
					});
				}
			});
		});
	}
	
	Bigger(26,43,100);

	
	function strpos(haystack, needle, offset) {
	    var i = (haystack+'').indexOf(needle, (offset || 0));
	    return i === -1 ? false : i;
	}
	
	function changeCar(carId, stealth) {
		if(stealth != true) {
			stealth = false;
		}
		
		colorDivName.innerHTML = aColors[carId]['name'];
		var imgToLoad = new Image();
		imgToLoad.onload = function(){return 'z';};
		if(imgToLoad.onload() == 'z') {
			if(stealth != true) {
				if(!imgToLoad.complete) {
					colorDivImageLoading.style.display = "block";
				}
			}
		}
		if(imgToLoad.onload() == 'z') {
			imgToLoad.onload = function() {
				if(stealth != true) {
					colorDivImageLoading.style.display = "none";
				}
				colorDivImage.src = imgToLoad.src;
			};
		} else {
			colorDivImage.src = aColors[carId]['url'];
		}
		imgToLoad.src = aColors[carId]['url'];
		
	}
	
	function hideToolbar() {
		new Fx.Morph('preview-list', {
			duration: 500, 
			transition: Fx.Transitions.Sine.easeOut
		}).start({
			'opacity': 0
		});
	}
	
	function showToolbar() {
		new Fx.Morph('preview-list', {
			duration: 500, 
			transition: Fx.Transitions.Sine.easeOut
		}).start({
			'opacity': 1
		});
	}
	
	$('colors-container').addEvent('mouseenter', function(){
		//showToolbar();
	});
	
	$('colors-container').addEvent('mouseleave', function(){
		//hideToolbar();
	});
	
	colorItems.each(function(item,index) {
		item.addEvent('click',function() {
			slideShow.stop();
			changeCar(item.rel);
			this.blur();
			return false;
		});
	});
	
	var SlideShow = new Class({
	
	    initialize: function(dateString){
	        this.start();
	    },
	    
	    getCar: function(){
			var carUrl = colorDivImage.src;
			var returnCar = 0;
			aColorsOrdered.each(function(item,index) {
				if(strpos(carUrl,item.url) > 0) {
					returnCar = item.id;
				}
			});
			
			return returnCar;
		},
		
		getNext: function(carId){
			var useNext = false;
			var returnCar = 0;
			aColorsOrdered.each(function(item,index) {
				if(useNext == true) {
					returnCar = item.id;
					useNext = false;
				}
				if(item.id == carId) {
					useNext = true;
				}
			});
			
			if(returnCar == 0) {
				returnCar = aColorsOrdered[0].id;
			}
			return returnCar;
		},
	
	    update: function(){
	        var curCar = this.getCar();
	        var nextCar = this.getNext(curCar);
	        changeCar(nextCar,true);
	    },
	
	    stop: function(){
	        $clear(this.periodicalTimer);
	    },
	
	    start: function(){
	        this.periodicalTimer = this.update.periodical(3000, this);
	    }
	
	});
	
	var slideShow = new SlideShow();
});