/**
 * Simple Box
 */

var simplebox = new Class({
	options: {
		width: 250,
		height: 250,
		topPosition: 50,
		targetClass: '.simplebox'
	},

	initialize: function(options) {
		if( this.setup() ) {
			this.prepareElements();
			this.prepareEvents();
			this.prepareEffects();
		}
	},

	setup: function(){
		var elements = $$(this.options.targetClass);
		this.open = false;
		if( elements.length ) {
			$each(elements, function( element ){
					element.addEvent('click', function( event ) {
							event.preventDefault();
							if( this.open == false ){
								this.run(element);
							}
						}.bind(this));
				}.bind(this)
			);
			return true;
		} else {
			return false;	
		}
	},

	openBox: function( element ){
		this.open = true;
		this.initEfx();
	},

	closeBox: function(){
		this.open = false;
		this.releaseEfx();
	},

	run: function( element ){
		var rEpx = /\b(googlemaps|video)\b/;
		var result = rEpx.exec(element.rel);

		switch(result[0]){
			case 'googlemaps':
				this.options.width = 640;
				this.options.height = 480;

				this.container.addClass('simplebox-loading');

				var opts = {
					size: new GSize(this.options.width, this.options.height)	
				};

				var center = new GLatLng(parseFloat(document.getElementById("lat").innerHTML), 
										 parseFloat(document.getElementById("lng").innerHTML));

				var map = new GMap2(document.getElementById("contentContainer"), opts);
				map.setCenter(center, 16);
				map.addControl(new GSmallMapControl());

				var markerImage = [
					"http://esa.ilmari.googlepages.com/markeryellow.png",
					"http://www.google.com/uds/samples/places/temp_marker.png"
				];

				var yellowIcon = new GIcon();
				yellowIcon.image = markerImage[0];
				yellowIcon.iconSize = new GSize(20, 34);
				yellowIcon.iconAnchor = new GPoint(9, 34);
				yellowIcon.infoWindowAnchor = new GPoint(16, 9);

				var turqIcon = new GIcon();
				turqIcon.image = markerImage[1];
				turqIcon.iconSize = new GSize(20, 34);
				turqIcon.iconAnchor = new GPoint(9, 34);
				turqIcon.infoWindowAnchor = new GPoint(16, 9);

				var opened = {};

				GDownloadUrl(window.myBaseUrl + "maps.xml", function(response){
					var xml = GXml.parse(response);

					var marcadores = xml.documentElement.getElementsByTagName("marker");

					var manager = new GMarkerManager(map);
					var collection = [];

					for(var i = 0; i < marcadores.length; i++){
						var html = null;
						var nome = GXml.value(marcadores[i].getElementsByTagName("nome")[0]);
						var desc = GXml.value(marcadores[i].getElementsByTagName("descricao")[0]);
						var img = GXml.value(marcadores[i].getElementsByTagName("imagem")[0]);
						var pos = marcadores[i].getElementsByTagName("pos")[0];
						var tipo = pos.getAttribute("tipo");

						var latlng = new GLatLng(parseFloat(pos.getAttribute("lat")),
												 parseFloat(pos.getAttribute("lng")));

						html  = "<b>" + nome + "</b><br/><br/>";
						html += "<small>" + desc + "</small><br/><br/>";
						html += "<img src=\"" + window.myBaseUrl + 'imagens/update/thumb/' + img + "\" alt=\"\"/>";

						if (latlng.lat() == center.lat() && latlng.lng() == center.lng()) {
							opened.html = html;
							opened.point = latlng;
						}

						var markerOptions = {title: nome};

						switch(tipo){
							case '0':
								// pre-lancamentos
								markerOptions.icon = yellowIcon;
								break;
							case '1':
								// lancamentos
								markerOptions.icon = turqIcon;
								break;
						}

						var marker = new GMarker(latlng, markerOptions);
						marker.bindInfoWindowHtml(html);
						collection.push(marker);
					}
					manager.addMarkers(collection, 0);
					manager.refresh();
					map.openInfoWindowHtml(opened.point, opened.html);
				});
				break;

			case 'video':
				this.options.width = 328;
				this.options.height = 200;

				// Fix: baseURL is static :(
				var baseUrl = "http://192.168.254.1/gribel/";

				var SWFObject = new Swiff(baseUrl + 'flash/player.swf', {
						id: 'SWFObject',
						width: this.options.width,
						height: this.options.height,
						container: 'contentContainer',
						vars: { file: element.href }
					}
				);
				break;
		}

		var leftPosition = ($('overlay').getSize().x / 2 - this.options.width / 2 ).toInt() + 'px';

		this.container.setStyles({
			top: $(window).getScroll().y + this.options.topPosition,
			left: leftPosition,
			width: this.options.width,
			height: this.options.height
		});

		this.openBox();
	},

	prepareElements: function() {
		this.overlay = new Element('div', {id: 'overlay'});
		this.overlay.setStyles({
			height: $(window).getScrollSize().y,
			opacity: 0
		}).inject($(document.body));

		this.container = new Element('div', {id: 'contentContainer'})
		this.container.setStyle('opacity', 0).inject(this.overlay, 'after');
	},

	prepareEffects: function() {
		this.overlay.set('tween', {duration: 'short'});
		this.container.set('tween', {duration: 'short', link: 'cancel'});
	},

	prepareEvents: function() {
		this.overlay.addEvent('click', function(){
				this.closeBox();
			}.bind(this)
		);

		$(window).addEvent('resize', function() {
				if (this.overlay.getStyle('opacity') == 0) { return false; };

				this.overlay.setStyle('height', window.getScrollSize().y);

				var leftCalc = ($('overlay').getSize().x / 2) - (this.options.width / 2);
				this.container.tween('left', leftCalc);
			}.bind(this)
		);
	},

	initEfx: function() {
		this.overlay.tween('opacity', 0.5);
		(function(){
			this.container.tween('opacity', 1.0);
		}.bind(this)).delay(500);
	},

	releaseEfx: function(){
		this.container.empty().tween('opacity', 0);
		(function(){
			this.overlay.tween('opacity', 0);
		}.bind(this)).delay(250);
	}
});