var Site = new Class (
{
	data: null,
	home: null,
	navitems: null,
	idnav1: null,
	idnav2: null,
	idnav3: null,
	slideshow: null,
	langitems: null,
	lang: null,
	mode: null,
	init: null,
	
	initialize: function(lang, idnav1, idnav2, idnav3, mode)
	{		
		this.lang = lang;
		this.idnav1 = idnav1;
		this.idnav2 = idnav2;
		this.idnav3 = idnav3;
		this.mode = mode;
		if(this.mode == 1) this.init = true;
		else this.init = false;
		
		window.addEvent
		(
			'domready', 
			function() 
			{	
				this.langitems = [{'id': 'Es', 'name': 'Castellano'}, {'id': 'Ca', 'name': 'Catala'}];
				//this.idnav1 = null;
				//this.idnav2 = null;
				//this.idnav3 = null;
				//if(!$chk(this.lang)) this.setNavLang();
				//else this.loadNav();

				this.loadNav();
			}.bind(this)
		);
	},
	
	setAlpha: function(element, alpha)
	{
		element.setStyle('opacity', alpha);
	},
	
	displayNavLang: function()
	{
		var ul = new Element('ul');
		
		var toggler = $('nav1');
		this.setAlpha(toggler, 0);
		
		/* REMEMBER REMOVING EVENTS
		toggler.removeEvent('click', destroy);*/
		
		$each
		(	
			this.langitems,
			function(langitem, index)
			{
				var langitem_name = langitem.name;
				
				if(index == 0)
				{
					var s = new Element
					(
						'span',
						{
							'html': '<a href="#">'+langitem_name+'</a>',
							'events':
							{
								'click': function(e)
								{
									e.stop();
									this.clearContent();
									this.lang = this.langitems[index].id;
									this.loadNav();
								}.bind(this)
							}
						}
					);

					s.inject(toggler);
				}
				else
				{
					var li = new Element
					(
						'li', 
						{
							'html': '<a href="#">'+langitem_name+'</a>',
							'events':
							{
								'click': function(e)
								{
									e.stop();
									this.clearContent();
									this.lang = this.langitems[index].id;
									this.loadNav();
								}.bind(this)
							}
						}
					);
				
					li.inject(ul);
				}	
			},
			this
		);
			
		ul.inject(toggler);
			
		this.setNavSlideEvents(toggler);
		
		toggler.fade('in');
	},
	
	displayLang: function()
	{
		var toggler = $('navlang');
		toggler.set('html', '');
		
		var index = 0;
		if(this.lang == 'Es') index = 1;
		
		var itemout = this.langitems[index];	
		
		var options = 
		{
			'html': '<a href="#">'+itemout.name+'</a>',
			'events':
			{
				'click': function(e)
				{
					e.stop();
					this.clearContent();
					this.idnav1 = null;
					this.idnav2 = null;
					this.idnav3 = null;
					this.lang = this.langitems[index].id;
					$('nav2').set('html', '');
					$('nav3').set('html', '');
					this.loadNav();
				}.bind(this)
			}
		};

		var s = new Element
		(
			'span',
			options
		);
		
		s.inject(toggler);
	},
	
	loadNav: function()
	{	
		var request = new Request.JSON
		(
			{
				url: 'json/json_nav.php?lang='+this.lang,
				onComplete: function(jsonObj) 
				{
					this.data = jsonObj;
					this.navitems = this.data.navitems;
					this.home = this.data.home;
					//this.setNav1Init();
					
					if(this.home.medias != null)
					{
						var slideshow = new Element('div', {'id': 'slideshow'});
						slideshow.inject($('content'));
						this.slideshow = new SlideShow(this.home.medias);
					}
					
					this.displayNav1();
					
					if(this.mode == 1 && this.init) 
					{
						this.displayNav2();
						this.displayNav3();
						this.init = false;
					}
					
					this.displayLang();
				}.bind(this)
			}
		).send();
	},
	
	displayNav1: function()
	{
		var ul = new Element('ul');
		var navlist1 = $('navlist1');
		if(navlist1.getStyle('display') == 'none') navlist1.setStyle('display', 'block');
		
		var toggler = $('nav1');
		toggler.set('html', '');
		//toggler.empty();
		this.setAlpha(toggler, 0);
		
		/* REMEMBER REMOVING EVENTS
		toggler.removeEvent('click', destroy);*/

		$each
		(	
			this.navitems,
			function(navitem, index)
			{
				var navitem_name = navitem.name;

				if(this.idnav1 == index || !$chk(this.idnav1) && index == 0)
				{
					var options = {'html': navitem_name};
					
					if(!$chk(this.idnav1)) 
					{
						options = 
						{
							'html': '<a href="#">'+navitem_name+'</a>',
							'events':
							{
								'click': function(e)
								{
									e.stop();
									this.clearContent();
									this.idnav1 = index;
									//alert(this.navitems[this.idnav1].type);
									if(this.navitems[this.idnav1].type == "office") this.idnav2 = 0;
									else this.idnav2 = null;
									this.idnav3 = null;
									this.displayNav1();
									
									this.displayNav2();
									if(this)
									this.displayContent1();
									$('nav3').set('html', '');
								}.bind(this)
							}
						};
					}

					var s = new Element
					(
						'span',
						options
					);
					
					s.inject(toggler);
				}
				else 
				{
					var li = new Element
					(
						'li', 
						{
							'html': '<a href="#">'+navitem_name+'</a>',
							'events':
							{
								'click': function(e)
								{
									e.stop();
									this.clearContent();
									this.idnav1 = index;
									//alert(this.navitems[this.idnav1].type);
									if(this.navitems[this.idnav1].type == "office") this.idnav2 = 0;
									else this.idnav2 = null;
									this.idnav3 = null;
									this.displayNav1();
									this.displayNav2();
									this.displayContent1();
									$('nav3').set('html', '');
								}.bind(this)
							}
						}
					);

					li.inject(ul);
				}
			},
			this
		);

		ul.inject(toggler);
			
		this.setNavSlideEvents(toggler);
		
		toggler.fade('in');
	},
	
	setNavLang: function()
	{
		var nav1 = $('nav1');
		this.setAlpha(nav1, 0);
		$('navlist1').setStyle('display', 'block');
		this.setNavSlideEvents(nav1);	
		nav1.fade('in');
		
		$each
		(	
			nav1.getElements('a'),
			function(a, index)
			{
				a.addEvent
				(
					'click',
					function(e)
					{
						e.stop();
						this.clearContent();
			            this.lang = this.langitems[index].id;
						this.loadNav();
		        	}.bind(this)
				)
			},
			this
		);
	},
	
	setNav1Init: function()
	{
		var nav1 = $('nav1');
		this.setAlpha(nav1, 0);
		$('navlist1').setStyle('display', 'block');
		this.setNavSlideEvents(nav1);
		
		var a = nav1.getElement('a');
		
		a.addEvent
		(
			'click',
			function(e)
			{
	            e.stop();
				this.clearContent();
				this.idnav1 = 0;
				this.displayNav1();
				this.displayNav2();
				return false; 
        	}.bind(this)
		)
		
		var ul = nav1.getElement('ul');
		
		$each
		(	
			ul.getElements('li'),
			function(li, index)
			{
				li.addEvent
				(
					'click',
					function(e)
					{
						e.stop();
						this.clearContent();
			            this.idnav1 = index+1;
						this.displayNav1();
						this.displayContent1();
						this.displayNav2();
		        	}.bind(this)
				)
			},
			this
		);
		
		nav1.fade('in');
	},
	
	setNavSlideEvents: function(element)
	{
		var ul = element.getElement('ul');
		
		var fx = new Fx.Slide
		(	
			ul, 
			{
				fps: 50,
				duration: 500,
				transition: 'quint:in:out',
				link: 'cancel'
			}
		);
			
		fx.hide();
				
		element.addEvent
		(
			'mouseenter', 
			function(e)
			{
				e.stop();
				this.slideIn();
			}.bind(fx)
		);
		
		element.addEvent
		(
			'mouseleave', 
			function(e)
			{
				this.slideOut();
			}.bind(fx)
		);
	},
	
	displayNav2: function()
	{
		var ul = new Element('ul');
		
		if(!this.init) this.clearContent();
		
		var toggler = $('nav2');
		toggler.set('html', '');
		this.setAlpha(toggler, 0);
		
		var subitems = this.navitems[this.idnav1].sub;
		
		if($defined(subitems))
		{
			$each
			(	
				subitems,
				function(subitem, index)
				{
					var subitem_name = subitem.name;

					if(!$chk(this.idnav2) && !index || this.idnav2 == index)
					{
						var html = subitem_name;

						var options = {'html': subitem_name};
						
						if(!$chk(this.idnav2)) 
						{
							options = 
							{
								'html': '<a href="#">'+subitem_name+'</a>',
								'events':
								{
									'click': function(e)
									{
										e.stop();
										this.clearContent();
										this.idnav2 = index;
										this.idnav3 = null;
										this.displayNav2();
										this.displayContent2();
										this.displayNav3();
									}.bind(this)
								}
							};
						}

						var s = new Element
						(
							'span',
							options
						);

						s.inject(toggler);
					}
					else
					{
						var li = new Element
						(
							'li',
							{
								'html': '<a href="#">'+subitem_name+'</a>',
								'events':
								{
									'click': function(e)
									{
										e.stop();
										this.clearContent();
										this.idnav2 = index;
										this.idnav3 = null;
										this.displayNav2();
										this.displayContent2();
										this.displayNav3();
									}.bind(this)
								}
							}
						);

						li.inject(ul);
					}
				},
				this
			);

			ul.inject(toggler);

			this.setNavSlideEvents(toggler);

			toggler.fade('in');
		}
	},
	
	displayNav3: function()
	{
		var ul = new Element('ul');
		
		var toggler = $('nav3');
		toggler.set('html', '');
		this.setAlpha(toggler, 0);
		
		var subitems = this.navitems[this.idnav1].sub[this.idnav2].sub;
		
		if($defined(subitems))
		{
			$each
			(	
				subitems,
				function(subitem, index)
				{
					var subitem_name = subitem.name;

					if(!$chk(this.idnav3) && !index || this.idnav3 == index)
					{
						var html = subitem_name;

						var options = {'html': subitem_name};
						if(!$chk(this.idnav3)) 
						{
							options = {
										'html': '<a href="#">'+subitem_name+'</a>',
										'events':
										{
											'click': function(e)
											{
												e.stop();
												this.clearContent();
												this.idnav3 = index;
												this.displayNav3();
												this.displayContent3();
											}.bind(this)
										}
									};
						}

						var s = new Element
						(
							'span',
							options
						);

						s.inject(toggler);
					}
					else
					{
						var li = new Element
						(
							'li',
							{
								'html': '<a href="#">'+subitem_name+'</a>',
								'events':
								{
									'click': function(e)
									{
										e.stop();
										this.clearContent();
										this.idnav3 = index;
										this.displayNav3();
										this.displayContent3();
									}.bind(this)
								}
							}
						);

						li.inject(ul);
					}
				},
				this
			);

			ul.inject(toggler);

			this.setNavSlideEvents(toggler);

			toggler.fade('in');
		}	
	},
	
	displayContent1: function()
	{
		var content = $('content');
		
		var navitem1 = this.navitems[this.idnav1];
		var type1 = navitem1.type;
		
		if(type1 == 'contact') this.displayContentBase(navitem1, navitem1.text1, false);
		else if(type1 == 'office') this.displayPhilosophy();
		else this.displayContentBase(navitem1, navitem1.text1, true);
	},
	
	displayContent2: function()
	{
		var content = $('content');
		
		var navitem1 = this.navitems[this.idnav1];
		var navitem2 = navitem1.sub[this.idnav2];
		
		var type1 = navitem1.type;
		var type2 = navitem2.type;

		if(type2 == 'philosophy') this.displayPhilosophy();
		else if(type2 == 'collaborations' || type2 == 'prizes') this.displayContentOffice();
		else if(type2 == 'press_downloads') this.displayPressDownloads();
		else if(type2 == 'press_article') this.displayPressArticle();
		else if(type2 == 'box_article') this.displayBoxArticle();
		else if(type1 == 'projects' || type2 == 'team') 
		{
			this.idnav3 = 0;
			this.displayContent3();
		}
	},
	
	displayContent3: function()
	{
		var content = $('content');
		
		var navitem1 = this.navitems[this.idnav1];
		if(navitem1.type == 'projects') this.displayProject();
		
		var navitem2 = this.navitems[this.idnav1].sub[this.idnav2];		
		if(navitem2.type == 'team') this.displayTeammate();
	},
	
	displayProject: function()
	{
		var navitem3 = this.navitems[this.idnav1].sub[this.idnav2].sub[this.idnav3];
		
		//var content = $('content');
		
		if(navitem3.medias != null) this.displaySlideShow(navitem3.medias);
		
		var info = this.displayInfo(navitem3, navitem3.text, true);
		
		/*
		
		if(navitem3.medias != null)
		{
			var slideshow = new Element('div', {'id': 'slideshow'});
			slideshow.inject(content);

			this.slideshow = new SlideShow(navitem3.medias);
		}
		
		var info_pos = new Element('div', {'id': 'info_pos' + navitem3.textpos});
		var info = new Element('div', {'id': 'info'});
		info.inject(info_pos);
		var info_back = new Element('div', {'id': 'info_back'});
		this.setAlpha(info_back, .8);
		var info_content = new Element('div', {'id': 'info_content'});
		info_content.set('html', navitem3.text);

		info_content.inject(info);
		info_back.inject(info);
		
		info_pos.inject(content);
		
		if(navitem3.medias != null)
		{
			var info_slideshow = new Element('div', {'id': 'info_slideshow'});
			info_slideshow.set('html', '<a href="#"><img src="medias/art/slideshow.gif"></a>');

			info_slideshow.inject(info);

			info_slideshow.addEvent
			(
				'click',
				function(e)
				{
					e.stop();
		            this.slideshow.delay = 2000;
					$('info').tween('opacity', 0);
					$('slideshow').addEvent
					(
						'click',
						function(e)
						{
							e.stop();
				            this.slideshow.delay = 6000;
							$('info').tween('opacity', 1);
							$('slide').removeEvents();
			        	}.bind(this)
					)
	        	}.bind(this)
			)
		}
		
		this.setAlpha(info, 0);
		info.tween('opacity', 1);
		
		*/
		
		if(navitem3.sound != null) this.displayMusic(navitem3.sound);
	},
	
	displayContentOffice: function()
	{
		var navitem2 = this.navitems[this.idnav1].sub[this.idnav2];
	
		//this.displayContentBase(navitem2, navitem2.text1, true);
		
		var content = $('content');
		
		for(i = 1; i < 4; i++)
		{
			var text = navitem2["text"+i];
			
			if(text != '')
			{
				
				var info_office = new Element('div', {'class': 'info_office'});

				var info = new Element('div', {'class': 'info'});
				info.inject(info_office);
				var info_back = new Element('div', {'class': 'info_back'});
				//this.setAlpha(info_back, .8);
				info_back.inject(info);
				
				var info_content = new Element('div', {'class': 'info_content'});
				info_content.set('html', navitem2["text"+i]);
				info_content.inject(info);

				info_office.inject(content);
				
				this.setAlpha(info, 0);
				info.tween('opacity', 1);
			}	
		}
		
		if(navitem2.sound != null) this.displayMusic(navitem2.sound);
	},
	
	displayMusic: function(song)
	{
		var sound = $('sound');
		if(sound == null)
		{
			sound = new Element('div', {'id': 'sound'});
			sound.inject($('wrapper'));
		} 
		
		var sound_flash = new Element('div', {'id': 'sound_flash'});
		sound_flash.inject(sound);
		
		var vars = {song: song};
		var params = { scale:'noScale', salign:'lt', menu:'false', bgcolor: '769397' };
		var attributes = { id:'index', name:'index'};
		swfobject.embedSWF("swf/index.swf", "sound_flash", "70", "12", "9.0.0", "swf/expressInstall.swf", vars, params, attributes );
	},
	
	displayPhilosophy: function()
	{
		var content = $('content');

		var navitem2 = this.navitems[this.idnav1].sub[this.idnav2];
		
		var philosophy_text1 = new Element('div', {'id': 'philosophy_text1'});
		philosophy_text1.set('html', navitem2.text1);
		var philosophy_text2 = new Element('div', {'id': 'philosophy_text2'});
		philosophy_text2.set('html', navitem2.text2);
		
		philosophy_text1.inject(content);
		philosophy_text2.inject(content);
		
		this.setAlpha(philosophy_text1, 0);
		philosophy_text1.tween('opacity', 1);
		
		this.setAlpha(philosophy_text2, 0);
		philosophy_text2.tween('opacity', 1);
	},
	
	displayTeammate: function()
	{
		var navitem3 = this.navitems[this.idnav1].sub[this.idnav2].sub[this.idnav3];
		
		if(navitem3.medias != null) this.displaySlideShow(navitem3.medias);
		
		var info = this.displayInfo(navitem3, navitem3.text, true);
	},
	
	displayPressDownloads: function()
	{
		var navitem2 = this.navitems[this.idnav1].sub[this.idnav2];
		
		var content = $('content');
		
		var downloads_medias_mask = new Element('div', {'id': 'downloads_medias_mask'});
		var downloads_medias_content = new Element('div', {'id': 'downloads_medias_content'});
		
		var downloads = navitem2.downloads;
		
		var html = '<ul>';
		
		for(var i=0; i < downloads.length; i++)
		{
			var download = downloads[i];
			
			if(i && i%4 == 3)  html += '<li class="last">';
			else html += '<li>';
			
			html += '<a href="'+download.media1+'" target="_blank"><img src="'+download.media1_thumb+'"></a>';
			html += '<a href="'+download.media1+'" target="_blank">'+download.title+'</a>';
			;
			html += '</li>';
		}
		
		html += '</ul>';
		
		downloads_medias_content.set('html', html);
		downloads_medias_content.inject(downloads_medias_mask);
		downloads_medias_mask.inject(content);
		
		var scrollbar_download_medias = new ScrollBar('downloads_medias_mask', 'downloads_medias_content', {'hScroll': false});
		
		this.setAlpha(downloads_medias_mask, 0);
		downloads_medias_mask.tween('opacity', 1);
		
		var downloads_text_mask = new Element('div', {'id': 'downloads_text_mask'});
		var downloads_text_content = new Element('div', {'id': 'downloads_text_content'});
		
		downloads_text_content.set('html', navitem2.text1);
		downloads_text_content.inject(downloads_text_mask);
		downloads_text_mask.inject(content);
		
		var scrollbar_download_text = new ScrollBar('downloads_text_mask', 'downloads_text_content', {'hScroll': false});
		
		this.setAlpha(downloads_text_mask, 0);
		downloads_text_mask.tween('opacity', 1);
	},
	
	displayPressArticle: function()
	{
		var navitem2 = this.navitems[this.idnav1].sub[this.idnav2];

		//if(navitem2.medias != null) this.displaySlideShow(navitem2.medias);

		//var info = this.displayInfo(navitem2, navitem2.text, true);
		
		this.displayContentBase(navitem2, navitem2.text, true);
	},	

	displayBoxArticle: function()
	{
		var navitem2 = this.navitems[this.idnav1].sub[this.idnav2];

		//if(navitem2.medias != null) this.displaySlideShow(navitem2.medias);

		//var info = this.displayInfo(navitem2, navitem2.text, true);
		
		this.displayContentBase(navitem2, navitem2.text, true);
	},

	displayContentBase: function(navitem, text, slideshow)
	{
		if(navitem.medias != null) this.displaySlideShow(navitem.medias);
		
		var info = this.displayInfo(navitem, text, slideshow);
	},

	displayInfo: function(navitem, html, slideshow)
	{
		var content = $('content');
		
		var info_pos = new Element('div', {'id': 'info_pos' + navitem.textpos});
		var info = new Element('div', {'class': 'info'});
		info.inject(info_pos);
		var info_back = new Element('div', {'class': 'info_back'});
		this.setAlpha(info_back, .8);
		info_back.inject(info);
		
		var info_content = new Element('div', {'class': 'info_content'});
		info_content.set('html', html);
		info_content.inject(info);
		
		if(navitem.medias != null && slideshow)
		{
			var info_slideshow = new Element('div', {'id': 'info_slideshow'});
			info_slideshow.set('html', '<a href="#"><img src="medias/art/slideshow.gif"></a>');

			info_slideshow.inject(info);

			info_slideshow.addEvent
			(
				'click',
				function(e)
				{
					e.stop();
		            this.slideshow.delay = 2000;
					//$('info').tween('opacity', 0);
					$$('div.info').tween('opacity', 0);
					$('content').addEvent
					(
						'click',
						function(e)
						{
							e.stop();
				            this.slideshow.delay = 6000;
							$$('div.info').tween('opacity', 1);
							//$('info').tween('opacity', 1);
							$('content').removeEvents();
			        	}.bind(this)
					)
	        	}.bind(this)
			);
		}
		
		info_pos.inject(content);
		
		this.setAlpha(info, 0);
		info.tween('opacity', 1);
		
		return info;
	},

	displaySlideShow: function(medias)
	{
		var slideshow = new Element('div', {'id': 'slideshow'});
		slideshow.inject($('content'));
		
		this.slideshow = new SlideShow(medias);
	},

	clearContent: function()
	{
		var content = $('content');
		content.set('html', '');
		
		if($('sound') != null) $('sound').set('html', '');
		
		if($defined(this.slideshow))
		{
			$clear(this.slideshow.interval);
			this.slideshow.imgs = null; 
			this.slideshow = null; 
		}
	}
}
);

var SlideShow = new Class(
{	
	folder: '', 
	imgs: null,
	ini: 0,
	delay: 6000,
	t: 0,
	nextImg: null,
	lastImg: null,
	pause: false, 
	interval: null,
	
	initialize: function(imgs)
	{
		this.imgs = imgs;
		this.t = this.delay;
		this.loadImg();
	},
	
	loadImg: function()
	{
		if($chk(this.nextImg)) this.lastImg = this.nextImg;
		this.nextImg = new Asset.image
					(	
						this.folder + this.imgs[this.ini], 
						{ 
		  					onload: function() 
							{         
								this.nextImg.store('state', 'loaded');
								if(!this.pause) this.change();
		  					}.bind(this)
						}
					);
		this.nextImg.setStyle('opacity', 0);
		this.nextImg.setStyle('position', 'absolute')
	},
	
	change: function()
	{
		if(this.ini < this.imgs.length - 1) this.ini++;
		else this.ini = 0;
		
		this.pause = true;
		if(this.imgs.length > 1) this.interval = this.timer.periodical(500, this);
		
		this.transition();		
	},
	
	timer: function()
	{
		if(this.t > 0) this.t -= 500;
		else 
		{
			this.pause = false;
			this.t = this.delay;
			$clear(this.interval);
			if(this.nextImg.retrieve('state') == 'loaded') this.change();
		}
	},
	
	transition: function()
	{
		var slideshow = $('slideshow');
		//slide.empty();
		this.nextImg.inject(slideshow); 
		
		var fx = new Fx.Morph(this.nextImg, 
				{
					duration: 1000, 
					transition: Fx.Transitions.Sine.easeOut,
					onComplete: function()
					{
						if($chk(this.lastImg)) this.lastImg.destroy();
						this.loadImg();
					}.bind(this)
				});
				
		fx.start({'opacity': 1});
	}
}
);