/**
 * Public variables
 */
var menuOverlay;			// div overlay fx handler
var menuDragger; 			// public drag handler
var menuClone;				// Menu drag clone
var menuPos = 'right'		// remember menu position
var portfolioItems;
var portfolio;
var showPortfolio;
var portfolioPaginator;


/**
 * insertCoolClock()
 * 
 * Inserta el reloj en el DOM. 
 * Lo inserto desde Javascript para que valide XHTML Strict ya que <canvas> no es estandar
 */
function insertCoolClock() {
	var coolClock = new Element('canvas', {
						'id': 'ourCoolClock',  
						'class': 'CoolClock::20:noSeconds:-3'
					}
				);
	coolClock.inject($('ourClock'));
}


/**
 * noobSlidePortfolio()
 * 
 * Inicializa el efecto del portfolio solo en el home
 */
function noobSlidePortfolio() {
	portfolio = new noobSlide({
		box: $('portfolioBox'),
		mode: 'vertical',
		items: $$('#portfolioBox div'),
		size: 260,
		handles: $$('#portfolioThumbs span'),
		handle_event: 'click',
		interval: 10000,
		autoPlay: true,
		fxOptions: {
			duration: 1000,
			transition: Fx.Transitions.Back.easeOut,
			wait: false
		}
	});
}


/**
 * cleanDrag()
 * 
 * Limpia el layout de los elementos y estilos que se generan al iniciar el Drag&Drop del menu
 */
function cleanDrag() {
	menuOverlay.removeEvents();
			
	if($('contentOverlay')) {
		$('contentOverlay').remove();
	}
	if($('menuClone')) {
		$('menuClone').remove();
	}
}

/**
 * switchMenu()
 * 
 * Mueve el menu de izquierda a derecha y viceversa.
 */
function switchMenu() {
	// Right to left
	if(menuPos == 'right') {
		$('menu').setStyles( {'left': 50, 'right': 'auto'} );
		$('menuExtend').setStyles( {'left': 50, 'right': 'auto'} );
		$('topContent').setStyles( {'margin-left': 260, 'margin-right': 50} );
		$('content').setStyles( {'margin-left': 260, 'margin-right': 50} );
		$('footerContent').setStyles( {'margin-left': 260, 'margin-right': 50} );
						
		menuPos = 'left';
		
	} else {
		// Left to right 
		$('menu').setStyles( {'right': 50, 'left': 'auto'} );
		$('menuExtend').setStyles( {'right': 50, 'left': 'auto'} );
		$('topContent').setStyles( {'margin-right': 260, 'margin-left': 50} );
		$('content').setStyles( {'margin-right': 260, 'margin-left': 50} );
		$('footerContent').setStyles( {'margin-right': 260, 'margin-left': 50} );
						
		menuPos = 'right';
	}
	
	Cookie.set('menuPos', menuPos, 365);
}


/**
 * menuDrag(e)
 * 
 * Handler del evento onMouseDown del menu que activa el drag and drop.
 * Crea un clon del menu para mostrar mientras se mueve.
 */
function menuDrag(e) {
	e = new Event(e).stop();
	
	// Clono el menu y lo inserto en el DOM
	menuClone = $('menu').clone()
		.setProperty('id', 'menuClone')
		.setStyles($('menu').getCoordinates()) // this returns an object with left/top/bottom/right, so its perfect
		.setStyles({'opacity': 0.6, 'position': 'absolute'})
		.addEvent('emptydrop', cleanDrag).inject(document.body);
	
	
	// Creo un 'overlay' con transparencia para dar el efecto onmouseover al drag del menu
	menuOverlay = new Element('div');
	menuOverlay.setProperty('id', 'contentOverlay');  // Le cambio el Id
	
	menuOverlay.setStyles({	'opacity': 0.2, 
						'position': 'absolute', 
						'z-index': '200',
						'top': 0,
						'height': '100%',
						'width': 250,
						'background-color': $('menu').getStyle('background-color')
					});
	
	if(menuPos == 'right') {
		menuOverlay.setStyle('left', 0);
	} else {
		menuOverlay.setStyle('right', 0);
	}
	
	menuOverlay.addEvents( {
						'click': cleanDrag,
						'drop': switchMenu,
						'over': function() {
									menuOverlay.setStyle('background-color', $('footer').getStyle('background-color'));
								},
						'leave': function() {
									menuOverlay.setStyle('background-color', $('menu').getStyle('background-color'));
								}
						}
					);
	
	// Hago que el clon del menu se pueda draggear
	menuDragger = menuClone.makeDraggable({
					droppables: menuOverlay,
					onStart: function() {
						menuOverlay.setStyle('display', 'none');  //hack
						menuOverlay.inject(document.body);
						menuOverlay.setStyle('display', 'block'); // hack
					},
					onComplete: cleanDrag
				}
			); // this returns the dragged element
	
	menuDragger.start(e); // start the event manual
}


/**
 * zoomPortfolio()
 * 
 * Realiza el efecto del zoom en el portfolio ocultando el contenido y mostrando lo que recibe por parametro.
 * 
 * @param (String) zoom		HTML a usar para mostrar como zoom.
 */
function zoomPortfolio(zoom) {
	var closeLink = 'Klik om te sluiten';
	
	if(location.href.substr(7,2) == 'en') {
		closeLink = 'Click to close';
	} else {
		if(location.href.substr(7,2) == 'es') {
			closeLink = 'Haga click para cerrar';
		}
	}

	$('portfolioIndex').setStyle('display', 'none');
	$('portfolioShow').setStyle('display', 'none');
	
	var portfolioOverlay = new Element('div');
	portfolioOverlay.setStyles({
							position: 'relative',
							cursor: 'pointer',
							'text-align': 'center'
					});
	portfolioOverlay.setHTML('<p style="text-align:center;font-weight:bold;margin-bottom:2em;">' + closeLink + '</p>' + zoom + ' <br /><br /><br />');
	portfolioOverlay.addEvent('click', function(e) { 
											portfolioOverlay.remove();
											$('portfolioIndex').setStyle('display', 'block');
											$('portfolioShow').setStyle('display', 'block'); 
										}
								);
	portfolioOverlay.inject($('portfolioDisplay'));
}


/**
 * portfolioSlide()
 * 
 * Portfolio slide and paginator.
 */
function portfolioSlide() {
	/*
	 * Slide
	 */
	if($('portfolioImage')) {
		// Limpio la imagen que pongo por las dudas.
		$('portfolioImage').setHTML('');

		var obj = {
			wait: 10000, 
			effect: 'fade',
			duration: 300, 
			loop: true, 
			thumbnails: true,
			backgroundSlider: false,
			onClick: function(i) {
							zoomPortfolio('<img src="' + showPortfolio.images[i].replace('/gallery/medium_', '/gallery/') + '" style="text-align:center;margin:auto;display:block;" alt="Zoom" />');
					}
		}
		showPortfolio = new SlideShow('portfolioImage','slideshowThumbnail',obj);
		showPortfolio.play();
	} else {
		if($('portfolioBanner')) {
			// Limpio la imagen que pongo por las dudas.
			$('portfolioBanner').setHTML('');
			
			var obj = {
				wait: 10000, 
				effect: 'fade',
				duration: 300, 
				loop: true, 
				thumbnails: true,
				backgroundSlider: false,
				onClick: function(i) {
								zoomPortfolio($('banner' + i).getProperty('rel'));
						}
			}
			showPortfolio = new SlideShow('portfolioBanner','slideshowThumbnail',obj);
			showPortfolio.play();
		}
	}
	
	/*
	 * Paginator
	 */
	portfolioPaginator = new noobSlide({
		box: $('portfolioPageWrapper'),
		mode: 'vertical',
		items: $$('.portfolioPage'),
		size: 550,
		handles: $$('.portfolioPageIndex'),
		handle_event: 'click',
		fxOptions: {
			duration: 1000,
			transition: Fx.Transitions.Back.easeOut,
			wait: false
		},
		button_event: 'click',
		onWalk: function(currentItem, currentHandle) {
					// Coloreo la página actual.
					$$('.portfolioPageIndex').each( function(el) { el.setStyle('color', '#ffffff'); } );
					currentHandle.setStyle('color', '#2e70a7');
		}
	});
	
	// Lo muevo adelante y atras para dar efecto y para que coloree el indice.
	portfolioPaginator.next();
	portfolioPaginator.previous();
	
	if(portfolioIndexPageOffset) {
		for(i = 1; i < portfolioIndexPageOffset; i++) {
			portfolioPaginator.next();
		}
	}
}


/**
 * initLayout()
 * 
 * Funcion de inicialización de los efectos
 */
function initLayout() {
	/* Last menu position */
	var cookieMenuPos = Cookie.get('menuPos');
	if(cookieMenuPos == 'left') {
		switchMenu();
	}
	
	/* Inicializo toolTips */
	var toolTips = new Tips($$('.toolTip'), {
							initialize:function(){
								this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
							},
							onShow: function(toolTip) {
								this.fx.start(1);
							},
							onHide: function(toolTip) {
								this.fx.start(0);
							}
						});
	
	/* Home Portfolio only in home */
	if($('portfolioBox')) {
		noobSlidePortfolio();
	}
	
	/* Porfolio slide only in portfolio */
	if($('portfolioShow')) {
		portfolioSlide();
	}
	
	/* Menu draggable */
	$('topDragMenu').setStyle('cursor', 'move');
	$('topDragMenu').addEvent('mousedown', menuDrag);
	$('topDragMenu').addEvent('mouseup', function() {
									cleanDrag();
									menuDragger.stop();
								}
							);
	
	

	
	$$('.menuBox .external').each(function(el, count) {el.target='_blank'});
	
	/* Cool Clock */
	insertCoolClock();
}


/**
 * Inicializo la ejecucion.
 * La estoy inicializando al final del body por el IE que tira error en el 'domready'
 */
//window.addEvent('domready', initLayout);