var myAjaxNav="";
var myOverlayNav="";
Event.observe(window, 'load', test = function() {
	myAjaxNav = new AjaxNav('content', 'menu', 'goto', 'goto');
	myOverlayNav = new OverlayAlbums();
	var f=$('menu').down('a.friends');
	myOverlayNav.addAlbum("friends", [{title: "Friends", url: myAjaxNav.parseUrl(f.readAttribute("href")), width: 800, height: 320}]);
	if($('portfolio')) initSection.portfolio();
	if($('store')) initSection.store();
	if($('extras')) initSection.extras();
	if($('hl_motion') || $('hl_illus') || $('hl_store')) initSection.highlights();
	Event.observe($('menu').down('a.friends'), 'click', function(e, myOverlayNav){
		Event.stop(e);
		myOverlayNav.activate("friends");
	}.bindAsEventListener(this, myOverlayNav));
});

var initSection = {
	extras: function(){
		var links = $('extras_list').select("a");
		for(i=0; i<links.length; i++){
			Event.observe(links[i], 'click', function(e, l) {
				Event.stop(e);
				var t = $('extras_items'), url = myAjaxNav.parseUrl(l.readAttribute("href"))+"ajax=1";
				new Effect.BlindUp(t, {duration: 0.7, afterFinish: function(){
					new Ajax.Updater(t, url, {onComplete: function(){
						setupSection.extras();
						new Effect.BlindDown(t, {duration: 0.9});
					}});
				}});
			}.bindAsEventListener(this, links[i]));
		}
		setupSection.extras();
	},
	highlights: function(what){
		var what = "motion";
		if($('hl_illus')) what = "illus";
		else if($('hl_store')) what = "store";

		switch(what){
			case "motion":
				setupSection.highlights(what);
				break;
		}
		var container = $("hl_"+what);
		var links = new Array(container.down("a.motion_link"), container.down("a.illus_link"), container.down("a.store_link"));
		for (var i = 0; i<links.length; i++){
			if(links[i]!=undefined)
				Event.observe(links[i], 'click', function(e, url){
					Event.stop(e);
					myAjaxNav.loadPage(myAjaxNav.parseUrl(url));
				}.bindAsEventListener(this, links[i].readAttribute("href")));
		}
	},
	portfolio: function(){
		var links = $('pj_list').select("a");
		for(i=0; i<links.length; i++){
			Event.observe(links[i], 'click', function(e, l) {
				Event.stop(e);
				var t = $('project'), url = myAjaxNav.parseUrl(l.readAttribute("href"))+"ajax=1";
				// disappear h1 -> blindup pj preview -> load ajax -> blindown pj preview -> appear h1
				new Effect.Opacity(t.down('h1'),{from: 1.0, to: 0.0, duration: 0.3, afterFinish: function(){
					new Effect.BlindUp(t, {duration: 0.7, afterFinish: function(){
						new Ajax.Updater(t, url, {onComplete: function(){
							setupSection.portfolio();
							var h1 = t.down('h1');
							h1.setOpacity('0.0');
							new Effect.BlindDown(t, {duration: 0.9, afterFinish: function(){
								new Effect.Opacity(h1, {from:0.0, to: 1.0, duration: 0.3});
							}});
						}});
					}});
				}});							   
			}.bindAsEventListener(this, links[i]));
		}
		setupSection.portfolio();
	},
	store: function(){
		var links = $('store_list').select("a");
		for(i=0; i<links.length; i++){
			Event.observe(links[i], 'click', function(e, l) {
				Event.stop(e);
				var t = $('store_items'), url = myAjaxNav.parseUrl(l.readAttribute("href"))+"ajax=1";
				new Effect.BlindUp(t, {duration: 0.7, afterFinish: function(){
					new Ajax.Updater(t, url, {onComplete: function(){
						setupSection.store();
						new Effect.BlindDown(t, {duration: 0.9});
					}});
				}});
			}.bindAsEventListener(this, links[i]));
		}
		setupSection.store();
	}
}
var setupSection = {
	extras: function(){
		var items = $('extras_items').select('div.item'), att, images, preview;
		for(var i=0; i<items.length; i++){
			images=[];
			att = items[i].select('a.att');
			preview = items[i].select('img.preview')[0];
			att.each(function(satt){
				images.push({title:satt.readAttribute("title"), url: satt.readAttribute("href")});
				satt.hide();
			}.bind(this));
			Event.observe(preview, 'click', overlayNav.bindAsEventListener(this, "store"+i, 0));
			preview.setStyle({'cursor':'pointer'});
			myOverlayNav.addAlbum("store"+i, images);
		}
	},
	highlights: function(what){
		switch(what){
			case "motion":
				var attach = $('hl_motion').down('ul.pj_items').select('a');
				var items = [];
				for(var i=0; i<attach.length; i++){
					items[i] = {title:attach[i].readAttribute("title"), url:attach[i].readAttribute("href"), width: 480, height: 336}
				}
				myOverlayNav.options.hidePaging = false;
				myOverlayNav.addAlbum("portfolio", items);
				var initoa = $('hl_motion').down('h1.pj_link');
				Event.observe(initoa, 'click', overlayNav.bindAsEventListener(this, "portfolio"));
				break;
		}
	},
	portfolio: function(){
		var img = $('pj_items').hasClassName("illustration");
		var attach = $('pj_items').select('a.pj');
		var storelink = $('pj_items').down('a.store');
		var trailers = [];
		for(var i=0; i<attach.length; i++){
			trailers[i]={title:attach[i].readAttribute("title"), url:attach[i].readAttribute("href")}
			if(!img) trailers[i].width = 480; trailers[i].height=376;
		}
		if(storelink) {
			var surl = myAjaxNav.parseUrl(storelink.readAttribute("href"));
			trailers.push({title:'<strong>Go to the store</strong>', url:'javascript:myAjaxNav.loadPage(\''+surl+'\');', position: 'bottom', media: 'menuitem'});
		}
		myOverlayNav.options.hidePaging = false;
		myOverlayNav.addAlbum("portfolio", trailers);
		$('pj_items').hide();
		var c2w = $('project').down('h1');
		if(!c2w.hasClassName('preview')) c2w.addClassName("preview");
		Event.observe(c2w, 'click', overlayNav.bindAsEventListener(this, "portfolio"));
	},
	store: function(){
		var i, details = $('store_items').select('a.detail'), cart = $('store_items').select('a.cart');
		var images = [];
		for(i=0; i<details.length; i++){
			images.push({title:details[i].readAttribute("title"), url: details[i].readAttribute("href")});
			Event.observe(details[i], 'click', overlayNav.bindAsEventListener(this, "store", i));
		}
		myOverlayNav.options.hidePaging = true;
		myOverlayNav.addAlbum("store", images);
	}
}
function checkNewAjaxNav(url){
	if(url=="extras.inc.php") initSection.extras();
	if(url=="store.inc.php") initSection.store();
	if(url.startsWith("portfolio.inc.php")) initSection.portfolio();
	if(url=="default.inc.php") initSection.highlights();
}
function overlayNav(e, albumId, albumItem){
	Event.stop(e);
	if(!albumItem) albumItem = 0;
	myOverlayNav.activate(albumId, albumItem);
}

var AjaxNav = Class.create();
AjaxNav.prototype = {
	target: null,
	mask: null,
	element: null,
	css: '',
	varpage: 'goto',
	initialize: function(t, e, c, vp) {	
		this.target = $(t);
		this.mask = new Element('div', { 'id': t+'_mask' });
		this.target.wrap(this.mask);
		this.element = $(e);
		if(c) this.css = c;
		if(vp) this.varpage = vp;
		this.updateMenuItems();
	},
	updateMenuItems: function() {	
		var l, url;
		l = (this.css!="") ? this.element.select('a.'+this.css) : this.element.select('a');
		for(var i=0; i<l.length; i++){
			url = this.parseUrl(Element.readAttribute(l[i], "href"));
			if(url) {
				Event.observe(l[i], 'click', function(e, url){
					Event.stop(e);
					this.loadPage(url);	  
				}.bindAsEventListener(this, url));
			}
		}
	},
	loadPage: function (url) {
		myOverlayNav.deactivate();
		var t = this.target
		new Effect.Opacity(t, { from: 1.0, to: 0.0, duration: 0.5, 
			afterFinish: function() {
				var fromH = t.getHeight();
				var toH = fromH;
				this.mask.setStyle({ height: fromH+'px' });
				new Ajax.Updater(t, url, { onComplete: function () {
					checkNewAjaxNav(url);
					toH = t.getHeight();
					new Effect.Morph(this.mask, { style: 'height:'+toH+'px', duration: 0.8, afterFinish: function(){
						new Effect.Opacity(t, { from: 0.0, to: 1.0, duration: 0.5 });
					} });
				}.bind(this)});
			}.bind(this)
		});
	},
	parseUrl: function(url){
		if(url.startsWith("mailto:")) return false;
		var page, i, vars = "";
		url = url.split("?");
		if(url.length<2) return url[0];
		url = url[1].split("&");
		for(i=0; i<url.length; i++){
			s=url[i].split("=");
			if(s[0]==this.varpage)
				page = s[1]+".inc.php";
			else
				vars += s[0]+"="+s[1]+"&";
		}
		if(vars=="") 
			return page;
		else 
			return page + "?" + vars;
	}
}