var projectCard = {
							
	inicialize: function(options){
		
		this.options = Object.extend({
			resizeDuration: 400,
			resizeTransition: Fx.Transitions.sineInOut,
			container: document.body,
			opacity: 0.7,
			href: '',
			content: ''
		}, options || {});
		
		
		// Get project thumbnails
		this.anchors = [];
		$each(document.links, function(el){
			if (el.rel && el.rel.test(/^thumbnail/i)){
				el.onclick = this.click.pass(el, this);
				this.anchors.push(el);
			}
		}, this);
		
		// Get project videos
		this.video_anchors = [];
		$each(document.links, function(el){
			if (el.rel && el.rel.test(/^video/i)){
				el.onclick = this.clickVideo.pass(el, this);
				this.video_anchors.push(el);
			}
		}, this);
		
		// Get project list with href
		this.project_anchors = [];
		$A($$('.link_projecte')).each(function(el) {
			this.project_anchors.push(el.href);
		}, this);
		
		// Dòna la volta a l'array perque tingui el mateix ordre que la llista
		//this.project_anchors = this.project_anchors.reverse();
		
		// Get the current project

		this.current_project = $('gallery').className;
				
		this.content = $('gallery_cont');
		
		this.setup();
		if ( $('image_cont') ) {
			if ( $('image_cont').getText().contains('swf') ) {
				this.writePlayer($('image_cont').getText().trim());
			}
		}
		
		//this.writeFlash();
		  
		this.fx = {
			//hide: 	$('gallery').effect('opacity', { duration:500, wait: false }).hide(),
			appear: 	$('gallery').effect('opacity', { duration: 500 })
		};		

	},
	
	clickVideo: function(link) {
		
		//this.hideImage(link.href, link.title);
		this.hidePlayer(link.href);
		this.changeCurrentThumbnail(link);
		
		return false;
	},
	
	
	click: function (link) {
		
		this.hideImage(link.href, link.title);
		this.changeCurrentThumbnail(link);
		
		return false;
		
	},
	
	
	/**
	 * setup
	 * 
	 * Make ready the horitzontal navigation for projects
	 * Puts in the lateral arrows the next a the previous projects
	 *
	 */
	setup: function() {
		
		// Setup the slideCursor
		this.slideCursor();
		
		this.project_anchors.each( function(item,index) {
			
			var project_key = item.split('/')[5];

			if ( project_key == this.current_project ) {
			
				if ( index == 0 ) {				
					this.next_index = index + 1;
					this.prev_index = this.project_anchors.length - 1;
				}
				else if ( index == (this.project_anchors.length - 1) ) {
					this.next_index = 0;
					this.prev_index = index - 1;
				}
				else {
					this.next_index = index + 1;
					this.prev_index = index - 1;
				}
			}
				
			if ( $('nav_esq') ) $('nav_esq').href = this.project_anchors[this.prev_index];
			if ( $('nav_drt') ) $('nav_drt').href = this.project_anchors[this.next_index];
						
		}.bind(this));
		
	},
	
	
	/**
	 * write Player
	 * 
	 * Put the swfObject in the html
	 * Most swfobject variable are fixed in this case
	 * Except video_name
	 *
	 */
	writePlayer: function(file) {
	
		//alert(file.contains("http://www.grapa.ws"));
		//var expReg = /^(\h*)([\W\w]*)(\bs\/*$)/;
		//if (expReg.test(file)) { this.video = file.replace(expReg, '$2');alert('troba'); }
		this.video = file.replace("http://www.grapa.ws", "");
		this.video = file.replace("http://grapa.ws", "");
		
		
		$('image_cont').empty();
		
		this.show();
		
		var embed_cont = new Element('div').setProperty('id','embed_cont').injectInside('image_cont');
				
		if ( $('embed_cont') ) {
			/*var interactive_flash = new FlashObject("/swf/.swf", "header", "548", "425", "8", "#ffffff", true);
			interactive_flash.addParam("wmode", "opace");
			interactive_flash.addParam("scale", "noscale");
			interactive_flash.addVariable("file", this.video);
			interactive_flash.write("embed_cont");*/	
			var so = new SWFObject('/swf/mediaplayer.swf','mpl','548','425','7','');
			so.addParam('allowfullscreen','true');
			so.addParam('allowscriptaccess','always');
			so.addVariable('displayheight','425');
			so.addVariable('file',this.video); //LA PELI A MOSTRAR
			so.addVariable('height','425');
			//so.addVariable('image','http://www.grapa.ws/images/projects/strela01.jpg'); //aquesta és la img que es mostra per defecte per a cada projecte, que la treus de la BBDD
			so.addVariable('width','548');
			so.addVariable('autostart',true);
			so.addVariable('frontcolor','0xcccccc');
			so.addVariable('backcolor','0x000000');
			so.addVariable('lightcolor','0x000000');
			so.addVariable('logo','http://www.grapa.ws/images/logovideos.png');
			so.write('embed_cont');
		}
		
		return false;
		
	},
	
	
	/**
	 * write Flash
	 * 
	 * Put the swfObject in the html
	 *
	 */
	writeFlash: function() {
		
		var embed_cont = new Element('div').setProperty('id','embed_cont').injectInside('image_cont');


		var interactive_flash = new FlashObject("/swf/try.swf", "header", "895", "470", "8", "#ffffff", true);
		interactive_flash.addParam("wmode", "transparent");
		interactive_flash.addParam("scale", "noscale");
		interactive_flash.addVariable("idioma", '');
		interactive_flash.write("embed_cont");		

		
	},
	
	
	/**
	 * change current active thumbail
	 * 
	 * It remove the current class for the previous current thumbnail
	 * and assign a the current class to the new selected thumbnail
	 *
	 */	
	changeCurrentThumbnail: function(link) {
		
		var newCurrentTnIndex;		
		
		$each(document.links, function(el){
			if (el.rel && (el.rel.test(/^thumbnail/i) || el.rel.test(/^video/i)) ) {
				if ( el.className == 'current' ) { el.className = ''; }
				if ( el.href == link ) { el.className = 'current'; }
			}
		}, this);
		
		/*this.anchors.each( function(item,index) {
			item.getChildren().removeClass('current');
			if ( link == item ) newCurrentTnIndex = index;
		}.bind(this));
		
		this.anchors[newCurrentTnIndex].getChildren().addClass('current');*/
		
		return false;
	
	},
	
	
	/**
	 * hideImage
	 * 
	 * Hide the big image using a fade effect
	 *
	 */	
	hideImage: function(url, title){
		
		this.href = url;
		
		var hide = new Fx.Style('shadow_cont', 'opacity',{duration:500});
		hide.start(1,0).addEvent('onComplete',function() {
			this.content.className = 'loading';
			this.changeImage();
		}.bind(this));
		
		//return this.open([[url, title]], 0);
		return false;
	},
	
	
	/**
	 * hidePlayer
	 * 
	 * Hide the flash using a fade effect
	 *
	 */	
	hidePlayer: function(url, title){
		
		this.href = url;
		
		var hide = new Fx.Style('shadow_cont', 'opacity',{duration:500});
		hide.start(1,0).addEvent('onComplete',function() {
			//this.content.className = 'loading';
			//var writePlayer = this.writePlayer.pass(this.href,this);
			//setTimeout( writePlayer,5000);
			this.writePlayer(this.href);
		}.bind(this));
		
		//return this.open([[url, title]], 0);
		return false;
	},
	
	
	/**
	 * changeImage
	 * 
	 * Change the src of the big image and preload it
	 *
	 */	
	changeImage: function(url, title){
		this.loadImage();
		// Si la capa id=image no exiteix
		// perquè s'ha creat el flash al damunt, la crea de nou
		if ( !$('image') ) {
			$('image_cont').empty();
			var image = new Element('img').setProperty('id','image').injectInside('image_cont');
		}
		$('image').src = this.preload.src;
	},
	
	
	/**
	 * loadImage
	 * 
	 * Preload the image
	 *
	 */		
	loadImage: function(){
		this.preload = new Image();
		this.preload.onload = this.show.bind(this);
		this.preload.src = this.href;
	},
	
	
	/**
	 * show
	 * 
	 * Show the big image when it have been loaded
	 * It uses a fade appear effect
	 *
	 */	
	show: function(url, title){
		this.content.className = '';
		var show = new Fx.Style('shadow_cont', 'opacity',{duration:500});
		show.start(0,1);
	},
	
	
	slideCursor: function() {
		
		var slide_gallery_crnt = new Fx.Slide('gallery', {mode: 'horizontal'});
		
		if ( $('nav_esq') ) {
			$('nav_esq').addEvent('click', function(e){
				e = new Event(e);
				this.href = $('nav_esq').href;
				slide_gallery_crnt.slideOut().addEvent('onComplete', function() {
					$('section_cont').className = 'loading';	
					this.loadContents(this.href);															  
				}.bind(this));
				e.stop();
			}.bind(this));
		}
		
		if ( $('nav_drt') ) {
			$('nav_drt').addEvent('click', function(e){
				e = new Event(e);
				this.href = $('nav_drt').href;
				slide_gallery_crnt.slideOutRight().addEvent('onComplete', function() {
					$('section_cont').className = 'loading';	
					this.loadContents(this.href);															  
				}.bind(this));
				e.stop();
			}.bind(this));
		}		
		
	},
	
	
	loadContents: function (url) {
		
		// check to see if there are specified dimensions
		// if not, fall back to default values
		//var aDim = this.rel.match(/[0-9]+/g);
		//this.options.contentsWidth = (aDim && (aDim[0] > 0)) ? aDim[0] : this.options.defContentsWidth;
		//this.options.contentsHeight = (aDim && (aDim[1] > 0)) ? aDim[1] : this.options.defContentsHeight;
						
		//this.bottom.setStyles({opacity: '0', height: '0px', display: 'none'});
		//this.center.className = 'mb_loading';
		//	Forma bona, però que no funciona
		//this.fx.hide;
		
		// Insert the ajax folder to call an ajax controller
		url = url.replace(".ws/ca/", ".ws/ajax/");		
		url = url.replace(".ws/es/", ".ws/ajax/");		
		this.url = url.replace(".ws/en/", ".ws/ajax/");
		

		//*
		//* The simple way for an Ajax request, use onRequest/onComplete/onFailure
		//* to do add your own Ajax depended code.
		var showContents = this.showContents.bind(this);
		 
		var ajaxOptions = {
			method: 'get',
			update: $('section_cont'),
			onComplete: showContents
			};
			
		this.ajaxRequest = new Ajax(this.url, ajaxOptions).request();
			
		return false;
	},
	
	
	showContents: function () {
		
		// Mode sense precarrega d'imatges
		/*$('section_cont').className = '';
				
		var apareix = new Fx.Style('gallery', 'opacity',{duration:500});
		apareix.start(0,1);
		
		projectCard.inicialize();*/
		
		
		this.images = [];
		$A($ES('img','gallery')).each(function(el) {
			this.images.push(el.getProperty('src'));	
		}, this);
		
		new Asset.images(this.images, {
			onComplete: function(){
		
				$('section_cont').className = '';
				
				var apareix = new Fx.Style('gallery', 'opacity',{duration:500});
				apareix.start(0,1);
				
				projectCard.inicialize();
				
			}.bind(this)
		});
		
	}
		
};