var LAHAAG_NUM_VISIBLE_LAYERS = 10;

Event.observe(
	window,
	'load',
	function(event){
		new Lahaag();
	}
);

var Lahaag = Class.create({

	initialize: function(){
	
		var self = this;
		this.currentLayerIndex;
		this.selectedKeyword = '';
		this.selectedKeywordId;
		
		this.adminHomeUrl = 'admin';
		if(location.href.indexOf('localhost') != -1){
			this.adminHomeUrl = 'admin/index.php';
		}
		
		Event.observe(
			'prev',
			'click',
			function(event){
				if(self.hasPrevLayer()){
					self.removeHighestLayer();
					var nextLowestLayerIndex = self.getNextLowestLayerIndex(); 
					self.addLayer(nextLowestLayerIndex);
					self.currentLayerIndex --;
					self.updateLayers();
					self.updateNav();
					self.updateKeywords();
				}
			}
		);
		Event.observe(
			'next',
			'click',
			function(event){
				if(self.hasNextLayer()){
					self.removeLowestLayer();
					var nextHighestLayerIndex = self.getNextHighestLayerIndex(); 
					self.addLayer(nextHighestLayerIndex);
					self.currentLayerIndex ++;
					self.updateLayers();
					self.updateNav();
					self.updateKeywords();
				}
			}
		);
		
		Event.observe(
			'numbers',
			'click',
			function(event){
				var source = Event.element(event);
				var number;
				if(source.hasClassName('number')){
					number = source;
				} else {
					number = source.up('.number');
				}
				if(number){
					var layerId = parseInt(number.innerHTML);
					var currentLayerId = self.availableLayerIds[self.currentLayerIndex];
					if(layerId == currentLayerId){
						return;
					}
					var layerIndex = parseInt(number.getAttribute('layerindex'));
					for(var i = layerIndex + 1; i <= self.currentLayerIndex; i ++){
						self.removeLayer(i);
					}
					for(var i = layerIndex - LAHAAG_NUM_VISIBLE_LAYERS + 1; i < layerIndex; i ++){
						if(i < 0 || $('layer' + i)){
							continue;
						}
						self.addLayer(i);
					}
					self.currentLayerIndex = layerIndex;
					self.updateLayers();
					self.updateNav();
					self.updateKeywords();
				}
			}
		);
		
		Event.observe(
			window,
			'resize',
			function(event){
				self.setContainerDimensions();
				self.setLayerDimensions();
				self.positionKeywords();
			}
		);

		Event.observe(
			'keywords',
			'click',
			function(event){
				var source = Event.element(event);
				var keyword;
				if(source.hasClassName('keyword')){
					keyword = source;
				} else {
					keyword = source.up('.keyword');
				}
				if(keyword){
					var selectedKeyword = keyword.innerHTML;
					var selectedKeywordId = keyword.getAttribute('keywordid');
					self.setSelectedKeyword(selectedKeyword, selectedKeywordId);
				}
			}
		);
		
		Event.observe(
			'clearSelectedKeyword',
			'click',
			function(event){
				self.clearSelectedKeyword();
			}
		);
		
		this.setMode('chronologic');

	},
	
	setMode: function(mode){
	
		
		var self = this;

		if(mode == 'chronologic'){

			var url = this.adminHomeUrl + '/layers/js_ids';
			var ajaxRequest = new Ajax.Request(
				url, {
					method: 'get',
					onSuccess: function(transport){
						self.availableLayerIds = eval(transport.responseText);
						self.startup();
					}
				}
			);
		
		} else if(mode == 'keyword'){
		
			this.startup();
		
		}
		
	},
	
	startup: function(){
	
		this.removeAllLayers();
	
		this.currentLayerIndex = this.getHighestLayerIndex();
		var lowestLayerIndex = this.availableLayerIds.length - LAHAAG_NUM_VISIBLE_LAYERS;
		for(var layerIndex = this.currentLayerIndex; layerIndex >= lowestLayerIndex; layerIndex --){
			this.addLayer(layerIndex);
		}
		this.updateLayers();
		
		this.updateNav();
		this.updateKeywords();

		this.setContainerDimensions();
		this.setLayerDimensions();
		this.positionKeywords();
		
	},
	
	addLayer: function(layerIndex){
	
		var layerId = this.availableLayerIds[layerIndex];
		var url = 'layers/' + layerId + '.html?random=' + Math.random();
		
		var width = document.viewport.getWidth();
		var height = document.viewport.getHeight();
		
		var self = this;
		
		var ajaxRequest = new Ajax.Request(
			url, {
				method: 'get',
				onSuccess: function(transport){
					var layerHtml = transport.responseText;
					layerHtml = '<div id="layer' + layerIndex + '" class="layer" style="z-index: ' + layerIndex + '; width: ' + width + 'px; height: ' + height + 'px;" >' + layerHtml + '</div>';
					$('container').innerHTML += layerHtml;
					self.updateLayers();
				}
			}
		);
	
	},
	
	updateLayers: function(){
	
		for(var layerIndex = 0; layerIndex <= this.currentLayerIndex; layerIndex ++){

			var layer = $('layer' + layerIndex);
			if(!layer){
				continue;
			}
			var objects = layer.getElementsByTagName('object');
			for(var i = 0; i < objects.length; i ++){
				var object = objects[i];
				if(!object.readAttribute('orginalWidth')){
					object.writeAttribute('orginalWidth', object.width);
					object.writeAttribute('orginalHeight', object.height);
				}
				if(layerIndex != this.currentLayerIndex){
					object.width = 0;
					object.height = 0;
				} else {
					object.width = object.readAttribute('orginalWidth');
					object.height = object.readAttribute('orginalHeight');
				}
			}

		}
	
	},
	
	removeAllLayers: function(){
	
		var layers = $$('#container .layer');
		for(var i = 0; i < layers.length; i ++){
			var layer = layers[i];
			layer.remove();
		}
	
	},
	
	removeLayer: function(layerIndex){
		var layer = $('layer' + layerIndex);
		layer.remove();
	},
	
	removeLowestLayer: function(){
		var removeLayerId = this.currentLayerIndex - LAHAAG_NUM_VISIBLE_LAYERS + 1;
		if(removeLayerId >= 0 && $('layer' + removeLayerId)){
			this.removeLayer(removeLayerId);
		}
	},
	
	removeHighestLayer: function(){
		this.removeLayer(this.currentLayerIndex);
	},
	
	setContainerDimensions: function(){

		var viewportHeight = document.viewport.getHeight();
		$('container').style.height = viewportHeight + 'px';

	},
	
	setLayerDimensions: function(){
	
		var width = document.viewport.getWidth();
		var height = $('container').getHeight();
		var layers = $$('#container .layer');
		for(var i = 0; i < layers.length; i++){
			var layer = layers[i];
			layer.style.width = width + 'px';
			layer.style.height = height + 'px';
		}
	
	},
	
	positionKeywords: function(){
		var height = $('container').getHeight();
		$('keywords').style.top = (height - 40) + 'px';		
	},
	
	getHighestLayerIndex: function(){
		var highestLayerIndex = this.availableLayerIds.length - 1;
		return highestLayerIndex;
	},
	
	getNextLowestLayerIndex: function(){
		var nextLowestLayerIndex = this.currentLayerIndex - LAHAAG_NUM_VISIBLE_LAYERS;
		return nextLowestLayerIndex;
	},
	
	 getNextHighestLayerIndex: function(){
		var nextHighestLayerIndex = this.currentLayerIndex + 1;
		return nextHighestLayerIndex;
	},
	
	hasPrevLayer: function(){
		var nextLowestLayerIndex = this.getNextLowestLayerIndex();
		var hasPrevLayer = (nextLowestLayerIndex >= 0);
		return hasPrevLayer;
	},
	
	hasNextLayer: function(){
		var nextHighestLayerIndex = this.getNextHighestLayerIndex();
		var highestLayerIndex = this.getHighestLayerIndex();
		var hasNextLayer = (nextHighestLayerIndex <= highestLayerIndex);
		return hasNextLayer;
	},
	
	updateNav: function(){
	
		var hasPrev = this.hasPrevLayer();
		if(hasPrev){
			$('prev').addClassName('active');
		} else {
			$('prev').removeClassName('active');
		}
	
		var hasNext = this.hasNextLayer();
		if(hasNext){
			$('next').addClassName('active');
		} else {
			$('next').removeClassName('active');
		}
	
		var numbersHtml = '';
		for(var layerIndex = this.currentLayerIndex - LAHAAG_NUM_VISIBLE_LAYERS + 1; layerIndex <= this.currentLayerIndex; layerIndex ++){
			if(layerIndex < 0){
				continue;
			}
			var extraClass = '';
			if(layerIndex != this.currentLayerIndex){
				extraClass = ' active';
			}
			var layerId = this.availableLayerIds[layerIndex];
			numbersHtml += '<span class="number ' + extraClass + '" layerindex="' + layerIndex + '">' + (layerIndex + 1) + '</span> ';
		}
		$('numbers').innerHTML = numbersHtml;
	
	},
	
	updateKeywords: function(){
	
		var layerId = this.availableLayerIds[this.currentLayerIndex];
		var url = this.adminHomeUrl + '/layers/js_tags/' + layerId;
		var ajaxRequest = new Ajax.Request(
			url, {
				method: 'get',
				onSuccess: function(transport){
				
					var keywords = eval(transport.responseText);
					
					var keywordsHtml = '';	
					for(var i = 0; i < keywords.length; i++){
						var keyword = keywords[i];
						var keywordTitle = keyword.Tag.title;
						var keywordId = keyword.Tag.id;
						var keywordCount = keyword.Tag.count;
						var extraClasses = [];
						if(keywordTitle != this.selectedKeyword){
							extraClasses.push('active');
						}
						if(keywordCount > 1){
							extraClasses.push('large');
						}
						var extraClass = '';
						if(extraClasses.length > 0){
							extraClass = ' ' + extraClasses.join(' ');
						}
						keywordsHtml += '<span class="keyword' + extraClass + '" keywordid="' + keywordId + '">' + keywordTitle + '</span> ';
					}
					$('keywords').innerHTML = keywordsHtml;
					
				}
			}
		);
	
	},
	
	setSelectedKeyword: function(keyword, keywordId){
	
		this.selectedKeyword = keyword;
		this.selectedKeywordId = keywordId;
		
		var self = this;
		
		var url = this.adminHomeUrl + '/tags/js_layers/' + this.selectedKeywordId;
		var ajaxRequest = new Ajax.Request(
			url, {
				method: 'get',
				onSuccess: function(transport){
				
					var layers = eval(transport.responseText);
					self.availableLayerIds = [];
					for(var i = 0; i < layers.length; i ++){
						var layer = layers[i];
						self.availableLayerIds.push(layer.Layer.id);
					}
					
					$('selectedKeyword').innerHTML = keyword;
					
					$('clearSelectedKeyword').show();
					
					self.setMode('keyword');
					
				}
			}
		);
	
	},

	clearSelectedKeyword: function(){
	
		this.selectedKeyword = '';
		this.selectedKeywordId = null;
		
		$('selectedKeyword').innerHTML = '';
	
		$('clearSelectedKeyword').hide();

		this.setMode('chronologic');

	}
		
});

// enable links in deeper layers
Event.observe(
	window,
	'load',
	function(event){
		Event.observe(
			'container',
			'mousemove',
			function(event){
				var links = $$('#container a');
				var linkFound = false;
				for(var i = 0; i < links.length; i ++){
					var link = links[i];
					if(hitTest(event.pointerX(), event.pointerY(), link)){
						$('container').style.cursor = 'pointer';
						linkFound = true;
						break;
					}
				}
				if(!linkFound){
					$('container').style.cursor = '';
				}
			}
		);
		Event.observe(
			'container',
			'click',
			function(event){
				var links = $$('#container a');
				for(var i = 0; i < links.length; i ++){
					var link = links[i];
					if(hitTest(event.pointerX(), event.pointerY(), link)){
						if(link.target && link.target == '_blank'){
							window.open(link.href);
						} else {
							window.location = href;
						}
						break;
					}
				}
			}
		);
	}
);

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/geral/hittest [v1.1]
hitTest = function(o, l){
    function getOffset(o){
        for(var r = {l: o.offsetLeft, t: o.offsetTop, r: o.offsetWidth, b: o.offsetHeight};
            o = o.offsetParent; r.l += o.offsetLeft, r.t += o.offsetTop);
        return r.r += r.l, r.b += r.t, r;
    }
    var a = arguments, j = a.length;
    j > 2 && (o = {offsetLeft: o, offsetTop: l, offsetWidth: j == 5 ? a[2] : 0,
    offsetHeight: j == 5 ? a[3] : 0, offsetParent: null}, l = a[j - 1]);
    for(var b, s, r = [], a = getOffset(o), j = isNaN(l.length), i = (j ? l = [l] : l).length; i;
        b = getOffset(l[--i]), (a.l == b.l || (a.l > b.l ? a.l <= b.r : b.l <= a.r))
        && (a.t == b.t || (a.t > b.t ? a.t <= b.b : b.t <= a.b)) && (r[r.length] = l[i]));
    return j ? !!r.length : r;
};