var languageTable = {};
languageTable['da'] = {};
languageTable['da']['First image'] = 'Første billede';
languageTable['da']['Play Backward'] = 'Afspil baglæns';
languageTable['da']['Previous image'] = 'Forrige billede';
languageTable['da']['Stop'] = 'Stop';
languageTable['da']['Next image'] = 'Næste billede';
languageTable['da']['Play Forward'] = 'Afspil';
languageTable['da']['Last image'] = 'Sidste billede';
languageTable['da']['Speed'] = 'Hastighed';

languageTable['sv'] = {};
languageTable['sv']['First image'] = 'Første billede';
languageTable['sv']['Play Backward'] = 'Afspil baglæns';
languageTable['sv']['Previous image'] = 'Forrige billede';
languageTable['sv']['Stop'] = 'Stop';
languageTable['sv']['Next image'] = 'Næste billede';
languageTable['sv']['Play Forward'] = 'Afspil';
languageTable['sv']['Last image'] = 'Sidste billede';
languageTable['sv']['Speed'] = 'Hastighed';


var translate = new Translate(languageTable);

Slideshow = Class.create({
	
	initialize : function (slideshowId, firstImage, fileNames, billedTekster, imageSizes, directory, imgWidth, imgHeight, visKnapper, visCaptions, tekstHeight, font, fontSize, color) {
		this.slideshowId = slideshowId;
		this.imgHeight = imgHeight; 
		this.imgWidth = imgWidth;
		this.visCaptions = (visCaptions == 1);
		this.tekstHeight = tekstHeight;
		this.tekstfeltPadding = 2;
		this.font = font;
		this.fontSize = fontSize;
		this.color = color;
		//this.captionLineHeight = 20;
		this.visKnapper = visKnapper || false;
		this.knapBasePath = '/images/slideshow/';
		this.directory = directory;
		this.slideshowDIV = $('Slideshow_' + slideshowId);
		this.firstImage = this.slideshowDIV.down('img');
		this.fileNames = fileNames;
		this.billedTekster = billedTekster;
		this.imageSizes = imageSizes;
		this.speed = 31;
    	this.switchDivs = new Array();
    	this.currentDiv = 0;
    	//if (this.fileNames.length > 0) { this.createSwitchDivs(); }
    	this.createSwitchDivs();
    	if (this.visKnapper && this.fileNames.length > 0) this.createControls();
    	//if (this.fileNames.length > 0) {
			this.direction = 'forwards';
			this.startAnim();
			if (this.visKnapper) { this.setActiveButton('forwards'); }	
		//}
    },
    	
	createSwitchDivs : function() {
		var firstImage = this.firstImage.remove();
		var firstImageSize = this.imageSizes.shift();
		firstImage.setStyle({
			left: Math.round((this.imgWidth - firstImageSize[0]) / 2) +'px',
			top: Math.round((this.imgHeight - firstImageSize[1]) / 2) +'px'
		});
		this.addSwitchDiv(firstImage);
		this.fileNames.each(function(fileName) {
        	var IMG = new Element(
            	'img',
            	{
                	'src': this.directory + fileName
                }
        	);
        	var imageSize = this.imageSizes.shift();
        	IMG.setStyle({
				position:'absolute',
                left:Math.round((this.imgWidth - imageSize[0]) / 2 ) + 'px',
                top: Math.round((this.imgHeight - imageSize[1]) / 2 ) + 'px',
                width: imageSize[0] + 'px',
                height: imageSize[1]+ 'px',
                background:'none'
			});
        	//this.billeder.push(IMG);
        	this.addSwitchDiv(IMG);
    	}.bind(this));
	},
	
	addSwitchDiv : function(img) {
		var switchDiv = new Element('div');
		switchDiv.setStyle({
			position: 'absolute',
			display: 'none',
			top: '0',
			left: '0',
			width: this.imgWidth + 'px',
			height: this.imgHeight + (this.visCaptions ? this.tekstHeight : 0) + (this.visKnapper ? 25 : 0) + 'px'
		});
		this.slideshowDIV.insert(switchDiv);
		switchDiv.insert(img);
		if (this.visCaptions) {
			var captionDiv = new Element('div');
			captionDiv.setStyle({
				position: 'absolute',
				left: '0',
				top: this.imgHeight + 'px',
				width: this.imgWidth - this.tekstfeltPadding * 2 + 'px',
				height: this.tekstHeight - this.tekstfeltPadding * 2 + 'px',
				padding: this.tekstfeltPadding + 'px',
				overflow : 'hidden',
				fontFamily : this.font + ', arial, sans-serif',
				fontSize : this.fontSize + 'px',
				color : this.color
			});
			captionDiv.insert(this.billedTekster.shift());
			switchDiv.insert(captionDiv);
		}
		this.switchDivs.push(switchDiv);
	},
		
	createControls: function() {
		var controls = new Element('div');
		controls.addClassName('slideshowControls');
		controls.setStyle({
			position:'absolute',
			left: Math.round((this.imgWidth - 204) / 2) + 'px',
			top: this.imgHeight + (this.visCaptions ? this.tekstHeight : 0 ) + 3 + 'px',
			width: this.imgWidth +'px',
			height: '25px'
		});
		this.slideshowDIV.insert(controls);
		
		var first = new Element('img',{
			'src' : this.knapBasePath + 'slideshowFirst.gif', 
			'class' : "slideshowFirst",
			'alt' : translate._('First image'),
			'title' : translate._('First image')
		});
		first.setStyle({
			position: 'absolute',
			left: '0px',
			top: '0px',
			cursor : 'pointer'
		});
		controls.insert(first);
		
		var backwards = new Element('img',{
			'src': this.knapBasePath + 'slideshowBackwards.gif', 
			'class': "slideshowBackwards",
			'alt' : translate._('Backwards'),
			'title' : translate._('Backwards')
		});
		backwards.setStyle({
			position: 'absolute',
			left: '20px',
			top: '0px',
			cursor : 'pointer'
		});
		controls.insert(backwards);
		this.backwardsButton = backwards;
		
		var previous = new Element('img',{
			'src': this.knapBasePath + 'slideshowPrevious.gif', 
			'class': "slideshowPrevious",
			'alt' : translate._('Previous image'),
			'title' : translate._('Previous image')
		});
		previous.setStyle({
			position: 'absolute',
			left: '40px',
			top: '0px',
			cursor : 'pointer'
		});
		controls.insert(previous);
		this.previousButton = previous;
		
		var stop = new Element('img',{
			'src': this.knapBasePath + 'slideshowStop.gif', 
			'class': "slideshowStop",
			'alt' : translate._('Stop'),
			'title' : translate._('Stop')
		});
		stop.setStyle({
			position: 'absolute',
			left: '60px',
			top: '0px',
			cursor : 'pointer'
		});
		controls.insert(stop);
		this.stopButton = stop;
		
		var next = new Element('img',{
			'src': this.knapBasePath + 'slideshowNext.gif', 
			'class': "slideshowNext",
			'alt' : translate._('Next image'),
			'title' : translate._('Next image')
		});
		next.setStyle({
			position: 'absolute',
			left: '80px',
			top: '0px',
			cursor : 'pointer'
		});
		controls.insert(next);
		this.nextButton = next;
		
		var forwards = new Element('img',{
			'src':this.knapBasePath+'slideshowForwards.gif', 
			'class': "slideshowForwards",
			'alt' : translate._('Forwards'),
			'title' : translate._('Forwards')
		});
		forwards.setStyle({
			position: 'absolute',
			left: '100px',
			top: '0px',
			cursor : 'pointer'
		});
		controls.insert(forwards);
		this.forwardsButton = forwards;
		
		var last = new Element('img',{
			'src': this.knapBasePath + 'slideshowLast.gif', 
			'class': "slideshowLast",
			'alt' : translate._('Last image'),
			'title' : translate._('Last image')
		});
		last.setStyle({
			position: 'absolute',
			left: '120px',
			top: '0px',
			cursor : 'pointer'
		});
		controls.insert(last);
		
		var speed = new Element('div',{
			'alt' : translate._('Speed'),
			'title' : translate._('Speed')
		});
		speed.setStyle({
			position: 'absolute',
			left: '140px',
			top: '0',
			height: '16px',
			width: '64px',
			overflow: 'hidden',
			cursor : 'pointer',
			background: 'white',
			border: '1px solid black'
		});
		this.speedDIV = speed;
		
		var speedBack = new Element('div');
		speedBack.setStyle({
			position: 'absolute',
			width: '62px',
			height: '14px',
			background: '#aaa',
			left:'-30px',
			top: '1px',
			'zIndex':'1'
		});
		speedBack.id = 'speedBack';
		
		this.speedBack = speedBack;
		
		var speedFront = new Element('img',{ 'src': this.knapBasePath + 'slideshowSpeedFront.png' } );
		speedFront.setStyle({
			position:'absolute',
			top: '1px',
			left: '1px',
			'zIndex': '2'
		});
		
		speed.insert(speedFront);
		speed.insert(speedBack);
		
		controls.insert(speed);
		
		this.stopButton = stop;
		this.speedIndicator = speed;
		
		Event.observe(first, 'click',this.clickFirst.bindAsEventListener(this));
		Event.observe(backwards, 'click',this.clickBackwards.bindAsEventListener(this));
		Event.observe(previous, 'click',this.clickPrevious.bindAsEventListener(this));
		Event.observe(stop, 'click',this.clickStop.bindAsEventListener(this));
		Event.observe(next, 'click',this.clickNext.bindAsEventListener(this));
		Event.observe(forwards, 'click',this.clickForwards.bindAsEventListener(this));
		Event.observe(last, 'click',this.clickLast.bindAsEventListener(this));
		Event.observe(speed, 'mousedown',this.mousedownSpeed.bindAsEventListener(this));
		Event.observe(document,'mousemove',this.mouseMove.bindAsEventListener(this));
		Event.observe(document,'mouseup',this.mouseUp.bindAsEventListener(this));
	},
	
	clickFirst : function() {
		this.gotoNow(0);
	},
	
	clickBackwards : function() {
		this.direction = 'backwards';
		this.running = true;
		this.setActiveButton('backwards');
		this.showNext();
	},
	
	clickPrevious : function() {
		this.direction = 'backwards';
		this.running = false;
		this.setActiveButton('stop');
		this.showNext();
	},
	
	clickStop : function() {
		this.stopAnim();
		this.setActiveButton('stop');
	},
	
	clickNext : function() {
		this.direction = 'forwards';
		this.running = false;
		this.setActiveButton('stop');
		this.showNext();
	},
	
	clickForwards : function() {
		this.direction = 'forwards';
		this.running = true;
		this.setActiveButton('forwards');
		this.showNext();
	},
	
	clickLast : function() {
		this.gotoNow(this.switchDivs.length-1);
	},
	
	mousedownSpeed : function(e) {
		this.movingSpeed = true;
		this.speed = e.pointerX() - this.speedDIV.viewportOffset().left;
		this.speedBack.setStyle({ left: this.speed - 62 + 'px' });
		e.stop();
	},
	
	mouseMove : function(e) {
		if (this.movingSpeed) {
			this.speed = e.pointerX() - this.speedDIV.viewportOffset().left;
			if (this.speed < 0) { this.speed = 0; }
			if (this.speed > 62) { this.speed = 62; }
			this.speedBack.setStyle({left: this.speed - 62 +'px'});
		}
		e.stop();
	},
	
	mouseUp : function(e) {
		if (this.movingSpeed) {
			this.movingSpeed = false;
		}
	},
	
	stopAnim : function() {
		this.running = false;
		clearTimeout(this.timeout);
	},
	
	startAnim : function() {
		this.running = true;
		this.fadeIn(this.switchDivs[0]);
	},
	
	showNext: function() {
        if (this.direction == 'forwards') {
			this.currentDiv++;
			if (this.currentDiv >= this.switchDivs.length) { this.currentDiv = 0; }
		} else {
			this.currentDiv--;
			if (this.currentDiv < 0) { this.currentDiv = this.switchDivs.length -1; }
		}
        this.fadeIn(this.switchDivs[this.currentDiv]);
	},
	
	gotoNow : function(index) {
		this.currentDiv = index;
		this.fadeIn(this.switchDivs[index]);
	},
	
	fadeIn : function(div) {
		if (div == this.fadeInDiv) { return; }
		clearTimeout(this.timeout);
		if (this.fading) {
			this.fadeOutEffect.cancel();
			this.fadeOutDiv.hide();
			this.fadeInEffect.cancel();
		}
		if (this.fadeInDiv) { this.fadeOutDiv = this.fadeInDiv; }
		this.fadeInDiv = div;
		this.fadeInEffect = Effect.Appear(
			this.fadeInDiv,
			{
				afterFinish : this.fadeDone.bind(this)
			}
		);
		if (this.fadeOutDiv) { 
			this.fadeOutEffect = Effect.Fade(
				this.fadeOutDiv
			);
			this.fading = true;
		}	
	},
	
	fadeDone : function() {
		this.fading = false;
		if (this.running) {
			this.timeout = setTimeout(this.showNext.bind(this), this.getTimeoutTime())
		}
	},
	
	getTimeoutTime : function() {
		return 8000 - this.speed * 112.9; 
	},
	
	setActiveButton: function(button) {
		this.backwardsButton.src = this.knapBasePath + 'slideshowBackwards' + (button=='backwards'?'Active':'')+'.gif';
		this.stopButton.src = this.knapBasePath + 'slideshowStop' + (button=='stop'?'Active':'')+'.gif';
		this.forwardsButton.src = this.knapBasePath + 'slideshowForwards' + (button=='forwards'?'Active':'')+'.gif';
	}
		
});