var htmlBox = new Class({
    Implements: [Options, Events],
    
    options: {
        htmlFile: null,
		closeElement: false,
		width: null,
		height: null
    },
    
	initialize: function(options) {
		this.setOptions(options);
		window.htmlFile = this.options.htmlFile;
		window.closeElement = this.options.closeElement;
		window.width = this.options.width;
		window.height = this.options.height;
	},
	
	display: function() {
		var that = this;		
		
        var overlay = new Element('div', {
            'styles': {
                'width': '100%',
                'height': '100%',
                'background': '#000',
                'filter': 'alpha(opacity=0)',
                '-moz-opacity': '0',
                '-khtml-opacity': '0',
                'opacity': '0',
                'position': 'fixed',
                'z-index': '100'
            }
		})
        $$('body')[0].grab(overlay, 'top');
		
        var overlayTween = new Fx.Tween(overlay, {
            onComplete: function() {
				var htmlBoxContainer = new Element('div', {
					'id': 'htmlBoxContainer',
					'styles': {
						'position': 'fixed',
						'z-index': '1000',
						'overflow': 'hidden'
					}
				})
				$$('body')[0].grab(htmlBoxContainer, 'top');
				that.resizeContainer(htmlBoxContainer);
				htmlBoxContainer.setStyles({
					'width': 0,
					'height': 0,
					'background': '#fff',
					'display': 'block'
				})
				
				var htmlFrame = new Element('iframe', {
					'src': htmlFile,
					'styles': {
						'width': width,
						'height': height,
						'border': 'none'
					}
				})
				htmlBoxContainer.grab(htmlFrame);
				
				var htmlOverlay = new Element('div', {
					'id': 'htmlOverlay',
					'styles': {
						'width': width,
						'background': '#fff',
						'z-index': '2000',
						'position': 'absolute',
						'top': 0,
						'left': 0
					}
				});
				var overlayButton = new Element('div', {
					'id': 'overlayButton',
					'styles': {
						'width': '100%',
						'height': 20,
						'background': '#CF480C',
						'color': '#fff',
						'cursor': 'pointer'
					},
					'events': {
						'click': function() {
							var contentMorph = new Fx.Morph($('overlayContent'));
							if ($('overlayContent').getSize().y == 0) {
								contentMorph.start({'height': height - 70});
								buttonContent.set('html', '<img src="images/pfeil_oben.png" alt="oben" /> <span style="margin: 0 70px;">Zur&uuml;ck zum Film</span> <img src="images/pfeil_oben.png" alt="unten" />');
							} else {
								contentMorph.start({'height': 0});
								buttonContent.set('html', '<img src="images/pfeil_unten.png" alt="oben" /> <span style="margin: 0 70px;">Mehr Filme</span> <img src="images/pfeil_unten.png" alt="unten" />');
							}
						}
					}
				});
				var buttonContent = new Element('div', {
					'styles': {
						'width': 290,
						'margin': '0 auto'
					},
					'html': '<img src="images/pfeil_unten.png" alt="oben" /> <span style="margin: 0 70px;">Mehr Filme</span> <img src="images/pfeil_unten.png" alt="unten" />'
				});
				overlayButton.grab(buttonContent);
				var overlayContent = new Element('div', {
					'id': 'overlayContent',
					'styles': {
						'width': '100%',
						'height': 0,
						'overflow': 'hidden'
					}
				});
				
				var contentRequest = new Request.HTML({
					method: 'get',
					url: 'content.html',
					onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
						var contentDIV = new Element('div', {
							'id': 'contentDIV',
							'html': responseHTML
						});
						var movieButtons = contentDIV.getElements('a');
						var searchField = contentDIV.getFirst('div').getFirst('input');
						var movielist = contentDIV.getFirst('div').getFirst('div');
						var movies = movielist.getElements('a').get('html');
						var movieLinks = movielist.getElements('a').getProperty('href');
						var movieUL = new Element('ul');
						movielist.grab(movieUL);
						movieliste = $(movielist.getElement('ul'));
						searchField.addEvent('keyup', function() {
							var findMovies = in_array(searchField.value, movies);
							movielist.set('html', '');
							findMovies.each(function(item, index) {
								var mlink = new Element('a', {
									'href': movieLinks[index],
									'onclick': 'javascript:return false;',
									'html': '<li>' + item + '</li>'
								})
								movielist.grab(mlink);
							})
							var movieButtons = contentDIV.getElements('a');
							movieButtons.addEvent('click', function() {
								htmlFrame.set('src', this.get('href'));
								var contentMorph = new Fx.Morph($('overlayContent'));
								contentMorph.start({'height': 0});
								buttonContent.set('html', '<img src="images/pfeil_unten.png" alt="oben" /> <span style="margin: 0 70px;">Mehr Filme</span> <img src="images/pfeil_unten.png" alt="unten" />');
							})
							
						})
						movieButtons.addEvent('click', function() {
							htmlFrame.set('src', this.get('href'));
							var contentMorph = new Fx.Morph($('overlayContent'));
							contentMorph.start({'height': 0});
							buttonContent.set('html', '<img src="images/pfeil_unten.png" alt="oben" /> <span style="margin: 0 70px;">Mehr Filme</span> <img src="images/pfeil_unten.png" alt="unten" />');
						})
						overlayContent.grab(contentDIV);
					}
				}).send();
				htmlOverlay.grab(overlayContent);
				htmlOverlay.grab(overlayButton);
				
				if (closeElement == true) {
					var closeButton = new Element('span', {
						'html': '<img src="images/close.png" alt="close" /> close',
						'styles': {
							'cursor': 'pointer',
							'position': 'absolute',
							'bottom': 10,
							'left': 20
						},
						'events': {
							'click': function() {
								htmlBoxContainer.destroy();
								overlay.destroy();
							}
						}
					})
					htmlBoxContainer.grab(closeButton);
				}
				
				var containerMorph = new Fx.Morph(htmlBoxContainer, {
					duration: 'long',
					transition: Fx.Transitions.Sine.easeOut,
					onComplete: function() {
						htmlBoxContainer.grab(htmlOverlay);
					}
				});
				containerMorph.start({
					'width': width,
					'height': height
				});
				window.addEvent('resize', function() {
					that.resizeContainer(htmlBoxContainer)
				})
			}
        });
        overlayTween.start('opacity', '0.9');
		
        overlay.addEvent('click', function() {
            var htmlBoxContainer = $('htmlBoxContainer');
            htmlBoxContainer.destroy();
            overlay.destroy();
			window.removeEvents('resize');
        })
	},
	
    resizeContainer: function(element) {
        var container = element;
		var containerSize= container.getSize();
        var windowSize = window.getSize();
        
        if (windowSize.x > width)
			container.setStyle('left', (windowSize.x - width) / 2);
		else
			container.setStyle('left', 0);
        if (windowSize.y > height)
			container.setStyle('top', (windowSize.y - height) / 2);
		else
			container.setStyle('top', 0);
    }

})

function in_array(needle,arr) {
	var findMovies = new Array();
	for(p=0;p<arr.length;p++) {
		if (arr[p].toLowerCase().indexOf(needle.toLowerCase()) != -1) findMovies.push(arr[p]);
	}
	
	return findMovies;
}

window.addEvent('domready', function() {
	var htmlOverlay = new htmlBox({
		htmlFile: 'edit3/edit3.html',
		closeElement: true,
		width: 850,
		height: 600
	})
	
	var videoBoxButton = $('videoBox');
	videoBoxButton.addEvent('click', function() {
		htmlOverlay.display();
	})
	
	
	var infoCloseButtons = $$('span.InfoLink');
	infoCloseButtons.addEvent('click', function() {
		var button = this;
		button.getParent('div').setStyle('display', 'none');
		(function() { button.getParent('div').erase('style') }).delay(10);
	})
})