var Slideshow = Class.create({
	
	initialize : function(containerId, interval) {    
    	this.containerId = containerId;
    	this.interval = interval || 4;
    	this.images = [];
    	Event.observe(document, 'dom:loaded', this.domLoaded.bindAsEventListener(this));
    },
    
    domLoaded : function() {
    	this.container = $(this.containerId);
		$$('#' + this.containerId + ' img').each(function(img) {
			this.images.push(img);						
		}.bind(this));		
	    if (this.images.length > 1) {
	        this.currentImg = 0;        
	        new PeriodicalExecuter(function(pe) {   
	            Effect.Fade(this.images[this.currentImg]);
	            this.currentImg++;
	            if (this.currentImg > this.images.length-1) { this.currentImg = 0};
	            //this.images[this.currentImg].setStyle({display:'block', opacity:0});
	            Effect.Appear(this.images[this.currentImg]);
	        }.bind(this),5)
	    }
    }
});






var ImageResizer = Class.create({
	
	initialize : function(divId, frameWidth, frameHeight, callbackDone, callbackCancel, mode) {
		
		this.divId = divId;
		
		this.mode = mode || 'slideshow';		
		
		this.imageDragbarSrc = '/images/admin/billed_resizer_dragbar.png';
		this.imageDraghandleSrc = '/images/admin/billed_resizer_draghandle.png';
		this.imageFitWidthSrc = '/images/admin/billed_resizer_fit_width.png';
		this.imageFitHeightSrc = '/images/admin/billed_resizer_fit_height.png';
		this.imageFitBothSrc = '/images/admin/billed_resizer_fit_both.png';
		
		this.dragbarHeight = 180;
		
		this.frameWidth = frameWidth;
		this.frameHeight = frameHeight;
				
		this.offsetX = 0;
		this.offsetY = 0;
		this.resizeFactor = 1;
		this.resizeFactorMax = 1;		
		this.resizeFactorMin = 0;
			
		Event.observe(document,'dom:loaded', this.domLoaded.bindAsEventListener(this));
		
		this.callbackDone = callbackDone;
		this.callbackCancel = callbackCancel;
		
	},
	
	domLoaded : function() {
		this.doDomStuff();					
	},
	
	doDomStuff : function() {
		this.container = $(this.divId);			
		// IFRAME
		this.iframe = new Element('iframe', {'class' : 'imageResizerIFRM', src: '/helper/imageResizerIframe?slideshowId=' + slideshowId, frameborder: 0}); 
		this.container.insert(this.iframe);		
		
		// RESIZER
		this.resizerDiv = new Element('div', {'class': 'imageResizerResizerDIV'});
		this.container.insert(this.resizerDiv);
		
		this.imageFrameDiv = new Element('div', {'class' : 'imageResizerFrameDIV'});		
		this.resizerDiv.insert(this.imageFrameDiv);
		this.imageFrameDiv.setStyle({
			width: this.frameWidth + 'px',
			height: this.frameHeight + 'px'
		});		
		
		var controlsDiv = new Element('div', {'class': 'imageResizerControlsDIV'});
		this.resizerDiv.insert(controlsDiv);
		controlsDiv.setStyle({		
			left: this.frameWidth + 12 + 'px'			
		});
				
		var dragbar = new Element('img',{src: this.imageDragbarSrc, 'class': 'imageResizerDragbar'});
		controlsDiv.insert(dragbar);
		
		this.draghandle = new Element('img',{src: this.imageDraghandleSrc, 'class' : 'imageResizerDraghandle'});	
		controlsDiv.insert(this.draghandle);
		
		//this.fitBoth = new Element('img',{src: this.imageFitBothSrc, 'class': 'imageResizerFitBoth'});
		//controlsDiv.insert(this.fitBoth);
		
		this.fitWidth = new Element('img',{src: this.imageFitWidthSrc, 'class': 'imageResizerFitWidth'});
		controlsDiv.insert(this.fitWidth);
		
		this.fitHeight = new Element('img',{src: this.imageFitHeightSrc, 'class': 'imageResizerFitHeight'});
		controlsDiv.insert(this.fitHeight);
		
		var  confirmDiv = new Element('div', {'class': 'imageResizerConfirmDiv'}).update('<h1>Beskær og skaler billedet</h1><br />');
		this.resizerDiv.insert(confirmDiv);
		
		this.godkendBTN = new Element('input', {type: 'button', value: 'Færdig'});
		this.annullerBTN = new Element('input', {type: 'button', value: 'Annuller'});
		
		confirmDiv.insert(this.godkendBTN).insert('&nbsp;&nbsp;&nbsp;').insert(this.annullerBTN);
		
		confirmDiv.setStyle({
			left: this.frameWidth + 52 + 'px'
		});
		
		
		// WAITING
		this.waitDiv = new Element('div', {'class' : 'imageResizerWaitDIV'}).update('<h1>Vent venligst</h1>');
		this.container.insert(this.waitDiv);
	},
	
	registerEvents : function() {				
		this.image.observe('mousedown',this.startDragImage.bindAsEventListener(this));
		this.draghandle.observe('mousedown',this.startDragHandle.bindAsEventListener(this));
		this.fitWidth.observe('click',this.doFitWidth.bindAsEventListener(this));
		this.fitHeight.observe('click',this.doFitHeight.bindAsEventListener(this));
		//this.fitBoth.observe('click',this.doFitBoth.bindAsEventListener(this));
		document.observe('mouseup',this.mouseup.bindAsEventListener(this));
		document.observe('mousemove',this.mousemove.bindAsEventListener(this))
		this.godkendBTN.observe('click', this.godkendClick.bindAsEventListener(this));
		this.annullerBTN.observe('click', this.annullerClick.bindAsEventListener(this));
	},
	
	iframeLoaded: function(iframeDocument) {
		this.iframeBody = iframeDocument.getElementsByTagName('body')[0];	
		this.fileUploadForm = iframeDocument.getElementsByTagName('form')[0];		
		this.uploadIPT = this.fileUploadForm.getElementsByTagName('input')[0];		
		Event.observe(this.uploadIPT, 'change', this.fileSelected.bindAsEventListener(this));	
	},
	
	fileSelected : function() {
		this.iframe.setStyle({display: 'none'});		
		this.waitDiv.setStyle({display: 'block'});
		this.fileUploadForm.submit();		
	},
	
	uploadResponse : function(response, width, height) {
		if (response == 'ok') {
			this.waitDiv.setStyle({display: 'none'});
			this.resizerDiv.setStyle({display: 'block'});
			this.image = new Element('img', {src : '/images/slideshow/temp.jpg?rand='+Math.random(99999)});	
			this.imageFrameDiv.insert(this.image);	
			this.orgImageWidth = width;
			this.orgImageHeight = height;
			this.makeBestFit();						
			this.adjustToFrame();
			this.drawImage();
			this.updateSlider();
			this.updateFitButtons();
			this.registerEvents();	
		}
	},
	
	godkendClick : function() {
		this.resizerDiv.setStyle({display: 'none'});
		this.waitDiv.setStyle({display: 'block'});
		new Ajax.Request(
			'/action/saveSlideshowImage',
			{
				method:'get',
				parameters: {
					offsetX : this.offsetX,
					offsetY : this.offsetY,
					resizeFactor : this.resizeFactor,
					slideshowId : slideshowId,
					billedId : 'new'
				},
				onSuccess : function(transport) {
					if (transport.responseText == 'success') {
						this.saveImageSuccess(transport);
					} else {
						this.saveImageFailure(transport);
					}
				}.bind(this),
				onFailure : this.saveImageFailure.bind(this)
			}
		);
	},
	
	saveImageSuccess : function(transport) {
		this.callbackDone();
	},
	
	saveImageFailure : function(transport) {
		alert('Der skete en fejl. Billedet er ikke gemt korrekt');
		this.callbackCancel();
	},
	
	annullerClick : function() {
		this.callbackCancel();
	},
	
	updateFitButtons : function() {
		if (this.orgImageWidth < this.frameWidth) {
			this.fitWidth.hide();
			//this.fitBoth.hide();
		}
		if (this.orgImageHeight < this.frameHeight) {
			this.fitHeight.hide();
			//this.fitBoth.hide();
		}
	},
	
	drawImage : function() {
		this.image.setStyle({
			left  : this.offsetX + 'px',
			top   : this.offsetY + 'px',
			width : Math.round(this.orgImageWidth * this.resizeFactor) + 'px',
			height: Math.round(this.orgImageHeight * this.resizeFactor) + 'px'
		});
	},
	
	updateSlider : function() {
		this.draghandle.setStyle({
			top: Math.round(this.dragbarHeight * (this.resizeFactor - this.resizeFactorMin) / (this.resizeFactorMax - this.resizeFactorMin)) + 'px'
		});
	},
	
	
	
	startDragImage : function(e) {
		this.movingImage = true;
		this.mouseDownX = e.pointerX();
		this.mouseDownY = e.pointerY();
		this.offsetXOnClick = this.offsetX;
		this.offsetYOnClick = this.offsetY;
		e.stop();
	},
	
	startDragHandle : function(e) {
		this.resizingImage = true;
		this.mouseDownY = e.pointerY();
		this.offsetXOnClick = this.offsetX;
		this.offsetYOnClick = this.offsetY;
		this.imageCoordAtFrameCenterX = Math.round((this.frameWidth/2 - this.offsetX)/this.resizeFactor);
		this.imageCoordAtFrameCenterY = Math.round((this.frameHeight/2 - this.offsetY)/this.resizeFactor);
		this.draghandleStartPos = this.draghandle.positionedOffset().top;
		e.stop();
	},
	
	makeBestFit : function() {
		this.resizeFactor = Math.min(this.frameWidth / this.orgImageWidth, this.frameHeight / this.orgImageHeight);
		if (this.resizeFactor > 1) { this.resizeFactor = 1; }
	},	
	
	doFitWidth : function(e) {
		this.resizeFactor = this.frameWidth / this.orgImageWidth;
		this.offsetX = 0;
		this.adjustToFrame();
		this.drawImage();
		this.updateSlider();	
	},
	
	doFitHeight : function(e) {
		this.resizeFactor = this.frameHeight / this.orgImageHeight;
		this.offsetY = 0;
		this.adjustToFrame();
		this.drawImage();
		this.updateSlider();
	},
	
	doFitBoth : function(e) {
		if (this.frameHeight / this.orgImageHeight > this.frameWidth / this.orgImageWidth) {
			this.resizeFactor = this.frameHeight / this.orgImageHeight;
		} else {
			this.resizeFactor = this.frameWidth / this.orgImageWidth;
		}
		this.adjustToFrame();
		this.drawImage();
		this.updateSlider();
	},
	
	mouseup : function(e) {
		if (this.movingImage) {
			this.movingImage = false;	
		}
		this.resizingImage = false;
		this.updateIPTs();
		e.stop();
	},
	
	updateIPTs : function() {
		/*$('offsetX').value = this.offsetX;
		$('offsetY').value = this.offsetY;
		$('resizeFactor').value = this.resizeFactor;*/
	},
	
	mousemove : function(e) {
		var deltaX = e.pointerX() - this.mouseDownX;
		var deltaY = e.pointerY() - this.mouseDownY;
		if (this.movingImage) {
			this.offsetX = this.offsetXOnClick + deltaX;
			this.offsetY = this.offsetYOnClick + deltaY;
			this.adjustToFrame();	
			this.drawImage();			
		}
		if (this.resizingImage) {
			var handlePos = this.draghandleStartPos + deltaY;
			if (handlePos < 0) { handlePos = 0; }
			if (handlePos > this.dragbarHeight ) { handlePos = this.dragbarHeight; }
			this.resizeFactor = this.resizeFactorMin + (this.resizeFactorMax - this.resizeFactorMin)*handlePos / this.dragbarHeight;
			this.draghandle.setStyle({
				top: handlePos + 'px'
			});
			
			this.offsetX = Math.round( this.frameWidth / 2 - this.imageCoordAtFrameCenterX * this.resizeFactor );
			this.offsetY = Math.round( this.frameHeight / 2 - this.imageCoordAtFrameCenterY * this.resizeFactor );
			this.adjustToFrame();
			this.drawImage();
		}
		e.stop();
	},
	
	mouseOverImage : function(event) {
		return (event.pointerX() > this.frameX && event.pointerX() < this.frameX + this.frameWidth && event.pointerY() > this.frameY && event.pointerY() < this.frameY + this.frameHeight);
	},
	
	adjustToFrame : function() {
		if (this.offsetX > 0 && this.orgImageWidth * this.resizeFactor >= this.frameWidth) {
			this.offsetX = 0;
		}
		if (this.offsetX + this.orgImageWidth * this.resizeFactor < this.frameWidth && this.orgImageWidth * this.resizeFactor >= this.frameWidth) {
			this.offsetX = Math.round(this.frameWidth - this.orgImageWidth * this.resizeFactor);
		}
		if (this.offsetY > 0 && this.orgImageHeight * this.resizeFactor >= this.frameHeight) {
			this.offsetY = 0;
		}
		if (this.offsetY + this.orgImageHeight * this.resizeFactor < this.frameHeight && this.orgImageHeight * this.resizeFactor >= this.frameHeight) {
			this.offsetY = Math.round(this.frameHeight - this.orgImageHeight * this.resizeFactor);
		}
		if (this.orgImageWidth * this.resizeFactor < this.frameWidth) {
			this.offsetX = Math.round((this.frameWidth - this.orgImageWidth * this.resizeFactor)/2);
		}
		if (this.orgImageHeight * this.resizeFactor < this.frameHeight) {
			this.offsetY = Math.round((this.frameHeight - this.orgImageHeight * this.resizeFactor)/2);
		}
	}
	
});


var GalleriImageResizer = Class.create({
	
	initialize : function(divId, frameWidth, frameHeight) {
		
		this.divId = divId;				
		
		this.imageDragbarSrc = '/images/admin/billed_resizer_dragbar.png';
		this.imageDraghandleSrc = '/images/admin/billed_resizer_draghandle.png';
		this.imageFitWidthSrc = '/images/admin/billed_resizer_fit_width.png';
		this.imageFitHeightSrc = '/images/admin/billed_resizer_fit_height.png';
		this.imageFitBothSrc = '/images/admin/billed_resizer_fit_both.png';
		
		this.dragbarHeight = 180;
		
		this.frameWidth = frameWidth;
		this.frameHeight = frameHeight;
				
		this.offsetX = 0;
		this.offsetY = 0;
		this.resizeFactor = 1;
		this.resizeFactorMax = 1;		
		this.resizeFactorMin = 0;
			
		Event.observe(document,'dom:loaded', this.domLoaded.bindAsEventListener(this));
		
	},
	
	domLoaded : function() {
		this.doDomStuff();					
	},
	
	doDomStuff : function() {
		this.container = $(this.divId);	
				
		
		// RESIZER
		this.resizerDiv = new Element('div', {'class': 'imageResizerResizerDIV'});
		this.container.insert(this.resizerDiv);
		this.resizerDiv.setStyle({display:'block'});
		
		this.imageFrameDiv = new Element('div', {'class' : 'imageResizerFrameDIV'});		
		this.resizerDiv.insert(this.imageFrameDiv);
		this.imageFrameDiv.setStyle({
			width: this.frameWidth + 'px',
			height: this.frameHeight + 'px'
		});		
		
		this.image = new Element('img', {src : '/images/galleri/temp.jpg?rand='+Math.random(99999)});	
		this.imageFrameDiv.insert(this.image);	
		this.orgImageWidth = width;
		this.orgImageHeight = height;
		
		
		var controlsDiv = new Element('div', {'class': 'imageResizerControlsDIV'});
		this.resizerDiv.insert(controlsDiv);
		controlsDiv.setStyle({		
			left: this.frameWidth + 12 + 'px'			
		});
				
		var dragbar = new Element('img',{src: this.imageDragbarSrc, 'class': 'imageResizerDragbar'});
		controlsDiv.insert(dragbar);
		
		this.draghandle = new Element('img',{src: this.imageDraghandleSrc, 'class' : 'imageResizerDraghandle'});	
		controlsDiv.insert(this.draghandle);
		
		//this.fitBoth = new Element('img',{src: this.imageFitBothSrc, 'class': 'imageResizerFitBoth'});
		//controlsDiv.insert(this.fitBoth);
		
		this.fitWidth = new Element('img',{src: this.imageFitWidthSrc, 'class': 'imageResizerFitWidth'});
		controlsDiv.insert(this.fitWidth);
		
		this.fitHeight = new Element('img',{src: this.imageFitHeightSrc, 'class': 'imageResizerFitHeight'});
		controlsDiv.insert(this.fitHeight);	
				
		if ($F('offsetX') != '') { this.offsetX = $F('offsetX'); }
		if ($F('offsetY') != '') { 
			this.offsetY = $F('offsetY'); 
		} else {
			this.doFitWidth();
		}
		if ($F('resizeFactor') != '') { this.resizeFactor = $F('resizeFactor'); }			
		this.drawImage();
		this.updateSlider();
		//this.updateFitButtons();
		this.registerEvents();	
	},
	
	registerEvents : function() {				
		this.image.observe('mousedown',this.startDragImage.bindAsEventListener(this));
		this.draghandle.observe('mousedown',this.startDragHandle.bindAsEventListener(this));
		this.fitWidth.observe('click',this.doFitWidth.bindAsEventListener(this));
		this.fitHeight.observe('click',this.doFitHeight.bindAsEventListener(this));
		//this.fitBoth.observe('click',this.doFitBoth.bindAsEventListener(this));
		document.observe('mouseup',this.mouseup.bindAsEventListener(this));
		document.observe('mousemove',this.mousemove.bindAsEventListener(this))	
	},
		
	updateFitButtons : function() {
		if (this.orgImageWidth < this.frameWidth) {
			this.fitWidth.hide();
			this.fitBoth.hide();
		}
		if (this.orgImageHeight < this.frameHeight) {
			this.fitHeight.hide();
			this.fitBoth.hide();
		}
	},
	
	drawImage : function() {
		this.image.setStyle({
			left  : this.offsetX + 'px',
			top   : this.offsetY + 'px',
			width : Math.round(this.orgImageWidth * this.resizeFactor) + 'px',
			height: Math.round(this.orgImageHeight * this.resizeFactor) + 'px'
		});
	},
	
	updateSlider : function() {
		this.draghandle.setStyle({
			top: Math.round(this.dragbarHeight * (this.resizeFactor - this.resizeFactorMin) / (this.resizeFactorMax - this.resizeFactorMin)) + 'px'
		});
	},
	
	
	
	startDragImage : function(e) {
		this.movingImage = true;
		this.mouseDownX = e.pointerX();
		this.mouseDownY = e.pointerY();
		this.offsetXOnClick = this.offsetX;
		this.offsetYOnClick = this.offsetY;
		e.stop();
	},
	
	startDragHandle : function(e) {
		this.resizingImage = true;
		this.mouseDownY = e.pointerY();
		this.offsetXOnClick = this.offsetX;
		this.offsetYOnClick = this.offsetY;
		this.imageCoordAtFrameCenterX = Math.round((this.frameWidth/2 - this.offsetX)/this.resizeFactor);
		this.imageCoordAtFrameCenterY = Math.round((this.frameHeight/2 - this.offsetY)/this.resizeFactor);
		this.draghandleStartPos = this.draghandle.positionedOffset().top;
		e.stop();
	},
	
	doFitWidth : function(e) {
		this.resizeFactor = this.frameWidth / this.orgImageWidth;
		this.offsetX = 0;
		this.adjustToFrame();
		this.drawImage();
		this.updateSlider();	
	},
	
	doFitHeight : function(e) {
		this.resizeFactor = this.frameHeight / this.orgImageHeight;
		this.offsetY = 0;
		this.adjustToFrame();
		this.drawImage();
		this.updateSlider();
	},
	
	doFitBoth : function(e) {
		if (this.frameHeight / this.orgImageHeight > this.frameWidth / this.orgImageWidth) {
			this.resizeFactor = this.frameHeight / this.orgImageHeight;
		} else {
			this.resizeFactor = this.frameWidth / this.orgImageWidth;
		}
		this.adjustToFrame();
		this.drawImage();
		this.updateSlider();
	},
	
	mouseup : function(e) {
		if (this.movingImage) {
			this.movingImage = false;	
		}
		this.resizingImage = false;
		this.updateIPTs();
		e.stop();
	},
	
	updateIPTs : function() {
		$('offsetX').value = this.offsetX;
		$('offsetY').value = this.offsetY;
		$('resizeFactor').value = this.resizeFactor;
	},
	
	mousemove : function(e) {
		var deltaX = e.pointerX() - this.mouseDownX;
		var deltaY = e.pointerY() - this.mouseDownY;
		if (this.movingImage) {
			this.offsetX = this.offsetXOnClick + deltaX;
			this.offsetY = this.offsetYOnClick + deltaY;
			this.adjustToFrame();	
			this.drawImage();			
		}
		if (this.resizingImage) {
			var handlePos = this.draghandleStartPos + deltaY;
			if (handlePos < 0) { handlePos = 0; }
			if (handlePos > this.dragbarHeight ) { handlePos = this.dragbarHeight; }
			this.resizeFactor = this.resizeFactorMin + (this.resizeFactorMax - this.resizeFactorMin)*handlePos / this.dragbarHeight;
			this.draghandle.setStyle({
				top: handlePos + 'px'
			});
			
			this.offsetX = Math.round( this.frameWidth / 2 - this.imageCoordAtFrameCenterX * this.resizeFactor );
			this.offsetY = Math.round( this.frameHeight / 2 - this.imageCoordAtFrameCenterY * this.resizeFactor );
			this.adjustToFrame();
			this.drawImage();
		}
		e.stop();
	},
	
	mouseOverImage : function(event) {
		return (event.pointerX() > this.frameX && event.pointerX() < this.frameX + this.frameWidth && event.pointerY() > this.frameY && event.pointerY() < this.frameY + this.frameHeight);
	},
	
	adjustToFrame : function() {
		if (this.offsetX > 0 && this.orgImageWidth * this.resizeFactor >= this.frameWidth) {
			this.offsetX = 0;
		}
		if (this.offsetX + this.orgImageWidth * this.resizeFactor < this.frameWidth && this.orgImageWidth * this.resizeFactor >= this.frameWidth) {
			this.offsetX = Math.round(this.frameWidth - this.orgImageWidth * this.resizeFactor);
		}
		if (this.offsetY > 0 && this.orgImageHeight * this.resizeFactor >= this.frameHeight) {
			this.offsetY = 0;
		}
		if (this.offsetY + this.orgImageHeight * this.resizeFactor < this.frameHeight && this.orgImageHeight * this.resizeFactor >= this.frameHeight) {
			this.offsetY = Math.round(this.frameHeight - this.orgImageHeight * this.resizeFactor);
		}
		if (this.orgImageWidth * this.resizeFactor < this.frameWidth) {
			this.offsetX = Math.round((this.frameWidth - this.orgImageWidth * this.resizeFactor)/2);
		}
		if (this.orgImageHeight * this.resizeFactor < this.frameHeight) {
			this.offsetY = Math.round((this.frameHeight - this.orgImageHeight * this.resizeFactor)/2);
		}
	}
});

var TekstboksEditor = Class.create({
	
	initialize : function(boks) {		
		this.width = boks.getDimensions().width;
		this.height = boks.getDimensions().height + 130;
		this.left = boks.viewportOffset().left;
		this.top = boks.viewportOffset().top - 130;
		var body = boks.up('body');
		var curtain = new Element('div', {'class': 'curtain'});
		curtain.setStyle({opacity: 0.4});
		body.insert(curtain);
		var editorDiv = new Element('div', {'class': 'editorDiv'});
		editorDiv.setStyle({
			position:'absolute',
			left: this.left + 'px',
			top: this.top + 'px'
		});
		body.insert(editorDiv);	
		var form = new Element('form', {method: 'post', action: '/action/gemTekst'});
		editorDiv.insert(form);
			
		var innerEditorDiv = new Element('div');
		form.insert(innerEditorDiv);		
		this.fck = new FCKeditor("tekst");
		this.fck.Width = this.width;
		this.fck.Height = this.height;	
		this.fck.BasePath = '/fckeditor/';
		this.fck.ToolbarSet = 'Basic';		
		this.fck.Value = tekstboks_content;
		innerEditorDiv.innerHTML = this.fck.CreateHtml();
		var gemKnap = new Element('input', {type: 'submit', value: 'Gem'});		
		var annullerKnap = new Element('input', {type: 'button', value: 'Annuller'});
		var url_text_IPT = new Element('input', {type: 'hidden', name: 'url_text', value: url_text});
		form.insert('<br />').insert(gemKnap).insert('&nbsp;&nbsp;').insert(annullerKnap).insert(url_text_IPT);
		annullerKnap.observe('click', this.annuller.bindAsEventListener(this));		
	},
	
	annuller : function() {
		document.location = document.location.href;
	}
	
})