var overlayOpacity = 0.8;	// controls transparency of shadow overlay

var animate = true;			// toggles resizing animations
var resizeSpeed = 3;		// controls the speed of the image resizing animations (1=slowest and 10=fastest)

var borderSize = 10;		//if you adjust the padding in the CSS, you will need to update this variable
var testAdvAnimation = true;
// -----------------------------------------------------------------------------------

//
//	Global Variables
//
var imageArray = new Array;
var activeImage = -1;

if(animate == true){
	overlayDuration = 0.2;	// shadow fade in/out duration
	if(resizeSpeed > 10){ resizeSpeed = 10;}
	if(resizeSpeed < 1){ resizeSpeed = 1;}
	resizeDuration = (11 - resizeSpeed) * 0.25;
} else { 
	overlayDuration = 0;
	resizeDuration = 0;
}
var pictures = ['d_bg_car2-0.jpg','d_bg_maybach-0.jpg','d_bg_mclaren-0.jpg','d_bg_mercedes-0.jpg'];
var text = ['ccc1','ccc2','ccc3','ccc4'];
var time1 = [10,10,10,10];
var time2 = [4,4,4,4];
var time3 = [4,4,4,4];
var aktiv;

// -----------------------------------------------------------------------------------

//
//	Additional methods for Ellement added by SU, Couloir
//	- further additions by Lokesh Dhakar (huddletogether.com)
//
Object.extend(Ellement, {
	getWidth: function(element) {
	   	element = $(element);
	   	return element.offsetWidth; 
	},
	setWidth: function(element,w) {
	   	element = $(element);
    	element.style.width = w +"px";
	},
	setHeight: function(element,h) {
   		element = $(element);
    	element.style.height = h +"px";
	},
	setTop: function(element,t) {
	   	element = $(element);
    	element.style.top = t +"px";
	},
	setLeft: function(element,l) {
	   	element = $(element);
    	element.style.left = l +"px";
	},
	setSrc: function(element,src) {
    	element = $(element);
    	element.src = src; 
	},
	setHref: function(element,href) {
    	element = $(element);
    	element.href = href; 
	},
	setInnerHTML: function(element,content) {
		element = $(element);
		element.innerHTML = content;
	}
});

// -----------------------------------------------------------------------------------

//
//	Extending built-in Array object
//	- array.removeDuplicates()
//	- array.empty()
//
Array.prototype.removeDuplicates = function () {
    for(i = 0; i < this.length; i++){
        for(j = this.length-1; j>i; j--){        
            if(this[i][0] == this[j][0]){
                this.splice(j,1);
            }
        }
    }
}

// -----------------------------------------------------------------------------------

Array.prototype.empty = function () {
	for(i = 0; i <= this.length; i++){
		this.shift();
	}
}
var AdvAnimation = Class.create();

AdvAnimation.prototype = {
	
	// initialize()
	// Constructor runs on completion of the DOM loading. Calls updateImageList and then
	// the function inserts html at the bottom of the page which is used to display the shadow 
	// overlay and the image container.
	//
	initialize: function() {	
		
		this.updateImageList();
		if (testAdvAnimation) this.start();

	},


	//
	// updateImageList()
	//
	updateImageList: function() {	
        for (var i = 0; i < pictures.length; i++) {
            o = new Image();
            o.src = "http://danya.biz/danya/fileadmin/template/d_images/" + pictures[i];
            imageArray[pictures[i]] = o;
        }
	},
	
	//
	//	start()
	//
	start: function() {	

		Ellement.Fshow('center-image0');
		
		this.changeImage(0);
	},

	//
	//	changeImage()
	//
	changeImage: function(imageNum) {	
		
        if (imageNum < 0 || imageNum >= pictures.length) imageNum = 0;
        if (activeImage >= 0) {
            img = imageArray[pictures[activeImage]].src;
            document.getElementById('center-image1').childNodes[1].src = img;
        }
        window.setTimeout("myAdvAnimation.changeImage2(" + imageNum + ")", 500);
	},
	changeImage2: function(imageNum) {	
		
		Ellement.hide('center-image0');
        window.setTimeout("myAdvAnimation.changeImage3(" + imageNum + ")", 500);
	},
	
	changeImage3: function(imageNum) {	
		
    	activeImage = imageNum;	// update global var
        img = imageArray[pictures[imageNum]].src;
        document.getElementById('center-image0').childNodes[1].src = img;
        this.showImage();
        for (var i = 0; i < pictures.length; i++) {
            if (i == activeImage) Ellement.Fshow("ccc"+(i+1));
            else Ellement.hide("ccc"+(i+1));
        }
        window.setTimeout("myAdvAnimation.changeImage(activeImage+1)", time1[imageNum]*1000);
	},
	
	
	//
	//	showImage()
	//	Display image and begin preloading neighbors.
	//
	showImage: function(){
		new Effect.Appear('center-image0', { duration: resizeDuration, queue: 'end', afterFinish: function(){ } });
	},


	//
	//	end()
	//
	end: function() {
	}
}

// -----------------------------------------------------------------------------------

function initAdvAnimation() { 
    myAdvAnimation = new AdvAnimation(); 
}
Event.observe(window, 'load', initAdvAnimation, false);