/* usemedia.com . joes koppers . 06.2007 */
/* thnx for reading this code */


//mediaguild gui

function Layout(language,sections,highlight,designmode)
{
	var obj = this;

	//designmode: for manual placement of bubbles, requires /admin/script/designmode.js (in protected dir)
	this.designmode = (designmode)? initDesignMode():false; 

	//defaults	
	this.x = this.w = 0;
	this.y = this.h = 0;
	this.v_offset = 0; //center above middle of screen

	this.menubar_offset = 45;
	
	this.cx = 970; //contents pane dimensions/2
	this.cy = 570;
	
	this.section = -1;
	this.hi_section = false;
	this.highlights = 0;
	this.selected_item = false;
	this.selected_medium = false;
	this.history = new Array();
	
	//settings
	this.lan = language;
	this.highlight = highlight;
	this.help = (this.lan=='en')? 'drag the logo to explore the different MediaGuild sections':'sleep het logo om de verschillende MediaGilde secties te verkennen';
	
	//blues	
// 	var section_bgcolors = ['',
// 		'rgb(240,250,255)', //01
// 		'',					//02
// 		'rgb(224,245,254)',	//03
// 		''					//04
// 	];

	//greys
	var section_bgcolors = ['',
		'rgb(240,240,240)', //01
		'white',			//02
		'rgb(230,230,230)',	//03
		'white'				//04
	];
//	var joins_color = 'transparent';
	var joins_color = 'rgb(215,215,215)';
	
	//var section_bgcolors = ['','','','',''];//->for development
	
	//sections, layout
	this.sections = sections;
	this.joins = new Array();

	for (var i=1; i<=4; i++)
	{
		this.sections[i].div = document.getElementById('section_0'+i);
		this.sections[i].div.style.backgroundColor = section_bgcolors[i];
		
		this.joins[i] = {
			horizontal: document.getElementById('joinx_0'+i), 
			vertical: document.getElementById('joiny_0'+i),
			color: joins_color
		}
		this.joins[i].horizontal.style.borderTopColor = joins_color;
		this.joins[i].vertical.style.borderLeftColor = joins_color;
	}

	//center
	var center = document.getElementById('mediaguild');
		center.title = this.help;
	if (browser.cssfilter) //PNG fix for IE
	{
		center.firstChild.src = 'media/blank.gif';
		center.firstChild.style.filter = pngBgImage('M').substr(7);
	}
	//make dragable
	this.center = makeDragableItem(center);
	this.center.ondragstart = function() { obj.collapse(); obj.section = -1; };
 	this.center.dragging = function(e)
 	{
		//offset
		var offset_x = this.x - (obj.w/2);
		var offset_y = this.y - (obj.h/2);
		//apply to layout
		obj.update(offset_x +50-1,offset_y +50-1);
		
		//auto-hilight section
		var x_plus = this.x-this.originalX>25;
		var x_min = this.x-this.originalX<-25;
		var y_plus = this.y-this.originalY>10;
		var y_min = this.y-this.originalY<-10;
	
		obj.hiSection(1, (x_plus && y_plus) );
		obj.hiSection(2, (x_min && y_plus) );
		obj.hiSection(3, (x_min && y_min) );
		obj.hiSection(4, (x_plus && y_min) );
 	}
 	//this.center.appearance = function() {};
 	this.center.click = function()
 	{	
 		obj.rset(false,true);
 	}
	this.center.setEnabled(false);
	
 	this.centerbg = document.getElementById('center');
 	this.centerbg.style.borderColor = joins_color;
 	this.contents = document.getElementById('contents');
 	this.content = document.getElementById('content');

	//reset expanded item when clicked in background
	this.contents.onclick = function() { obj.collapse(true) }

 	this.addLabels();
 	this.addMenubar();

	//splash screen
	this.splash = document.getElementById('splash');
}


/* build */

Layout.prototype.addLabels = function()
{
	var obj = this;
	
	for (var i=1; i<=4; i++) //1-based!
	{
		var lan = this.lan;
		
		var img = document.createElement('img');
		img.id = 'section_0'+i+'_'+lan;
		img.style.position = 'absolute';
		img.style.cursor = 'pointer';
		
		//position
		var w = this.sections[i].label.w;
		var h = this.sections[i].label.h;
		img.style.width = w +'px';
		img.style.height = h +'px';
		img.style.left = (i==1 || i==4)? this.cx -w -50 -1 +'px':this.cx +50 +2 +'px';
		img.style.top = (i==1 || i==2)? this.cy -h -50 +'px':this.cy +50 +'px';
		
		if (browser.cssfilter) //PNG fix for IE
		{
			img.src = 'media/blank.gif';
			img.style.filter = pngBgImage('section_0'+i+'_'+lan).substr(7);
		}
		else img.src = 'media/section_0'+i+'_'+lan+'.png';
	
		//event handling
		eval('img.onclick = function(e) { obj.setSection('+i+',1); cancelEvents(e,true) }')
		eval('img.onmouseover = function() { obj.hiSection('+i+',1) }');
		eval('img.onmouseout = function() { obj.hiSection('+i+',0) }');

		//attach to contents pane
		this.contents.appendChild(img);
	}
}

Layout.prototype.addMenubar = function(resp)
{
	this.menubar = document.getElementById('menu');
	this.menus = new IdArray('menu');

	if (!resp)
	{
		if (this.designmode) this.addMenubar(true);
		else
		{
			var obj = this;
			db.get('menu_items',function(resp) { obj.addMenubar(resp) },'lan',this.lan);
		}
	}
	else
	{
		if (browser.cssfilter) //PNG fix for IE
		{
			this.menubar.firstChild.src = 'media/blank.gif';
			this.menubar.firstChild.style.filter = pngBgImage('bg_menu_'+this.lan).substr(7);
		}
		
		if (!this.designmode)
		{
			//add menu items
			var elm = document.getElementById('menu_contents').firstChild;
			
			var str = '';
			for (var i in resp.items) 
			{
				if (!resp.items[i].subitems)
				{
					if (resp.items[i].title=='Blog') str = '<a href="http://blog.mediagilde.nl">Blog</a>'; //exception for blog link
					else str = '<a href="javascript://'+resp.items[i].title+'" onclick="mg.expand('+resp.items[i].id+')">'+resp.items[i].title+'</a>';
					if (i>0) str = ' | '+str;
					elm.innerHTML+= str;
				}
				else
				{
					//item + submenu
					var id = resp.items[i].id;
					var str = '<a href="javascript://About" onmouseover="mg.showMenu('+id+',1)" onmouseout="mg.showMenu('+id+',0)">'+resp.items[i].title+'</a>';
					if (i>0) str = ' | '+str;
	
					elm.innerHTML+= str;
					
					this.menus.push( this.addMenu(id, elm.lastChild.offsetLeft, resp.items[i].subitems) );
				}
			}
			
			elm.innerHTML += ' | ';
		}
		else
		{
			var str = 'designmode - <input type=button value="save locations" style="border:1px solid rgb(160,160,160);	background-color:rgb(55,55,55);	color:white; font-size:10px; margin-left:4px;" onclick="mg.designmode.submit()">';
			document.getElementById('menu_contents').innerHTML = str;
		}
	
		//center contents
		var elm = document.getElementById('menu_contents');
		elm.style.left = 124 + Math.round((380-elm.offsetWidth)/2) +'px';
		//update menu positions
		for (id in this.menus.menu) this.menus.menu[id].div.style.left = document.getElementById('menu_contents').offsetLeft -5 + parseInt(this.menus.menu[id].div.style.left) +'px';

		if (browser.safari && browser.safari_pre3) document.getElementById('searchinput').style.marginTop = '-2px'; //correction for Safari that doesn't render styled form elms

		//position and show		
		this.menubar.style.left = this.w/2 - 310 +'px';
		this.menubar.style.top = this.h - this.menubar_offset +'px';
		this.menubar.style.visibility = 'visible';
	}
}

Layout.prototype.addMenu = function(id,offset,items)
{
	var menu = new Object();
		menu.id = id;
		menu.items = items;
		
	//generate html
	var left = offset;
	var div = document.createElement('DIV');
		div.className = 'menu';
		div.style.left = left +'px';
		div.style.backgroundImage = 'url(media/bg_menu.png)'; //will not render transparent in IE<7 (could be fixed later)
		if (browser.ie_pre7) div.style.bottom = '23px'; //2px shift, css is not rendered as should
		
	var str = '';
	for (var i in items)
	{
		str+= '<a href="javascript://'+items[i].title+'" onclick="mg.expand('+items[i].id+')">'+items[i].title+'</a>';
	}
	div.innerHTML = str;

	//this.menubar.appendChild(div);
	this.menubar.insertBefore(div,this.menubar.lastChild);

	var obj = this;
	div.onmouseover = function() { obj.showMenu(id,1) }
	div.onmouseout = function() { obj.showMenu(id,0) }
		
	menu.div = div;
	
	return menu;
}

Layout.prototype.addMediaColumn = function()
{
	var obj = this;
	//vertical media column + navigation controls
	this.media = 
	{
		div:document.getElementById('media'),
		nav_prev:document.getElementById('media_prev'),
		nav_next:document.getElementById('media_next'),
		nav:0,
		y:0,
		
		init:function(cols)
		{
			this.cols = cols;
			this.navigate('rset');
			this.done();

			var obj = this;
			this.nav_prev.onclick = function(e) { obj.navigate('prev'); return false; }
			this.nav_next.onclick = function(e) { obj.navigate('next'); return false; }
		},
		
		navigate:function(direction)
		{
			switch(direction)
			{
				case 'next':
					if (this.nav>=this.cols-1) return;
					//shift cols up
					this.nav+=1;
 					var ty = -this.cols[this.nav-1];
					break;
				
				case 'prev':
					if (this.nav<1) return;
					//shift cols down
					this.nav-=1;
					var ty = (this.nav>0)? -this.cols[this.nav-1]:0;
					break;
				
				case 'rset':
					this.nav = 0;
					this.y = 0;
					this.div.firstChild.style.top = '0px';
					break;
			}
			if (direction!='rset') this.moveTo(ty);
		},
		
		moveTo:function(y)
		{
			this.ty = y || 0;
			this.slide();
		},
		
		slide:function()
		{
			var obj = this;
			
			//move to target	
			var dy = this.ty-this.y;
			this.y = this.y + .30*(this.ty-this.y);
			
			var update_x = false;
			var update_y = (dy>0 && this.y<this.ty-1) || (dy<0 && this.y>this.ty+1);
			
			if (update_x || update_y)
			{
				this.div.firstChild.style.top = this.y +'px';
				//loop
				if (this.sliding) window.clearTimeout(this.sliding);
				this.sliding = window.setTimeout(function() { obj.slide() },40);
			}
			else
			{
				//done, set to exact end target position
				this.y = this.ty;
				this.div.firstChild.style.top = this.y +'px';
				
				//call done handler (update nav eg)
				this.done();
			}
		},
		
		done: function()
		{
			var div = this.nav_div;
			//update navigation
			if (this.cols<=1)
			{
				this.nav_next.style.visibility = 'hidden';
				this.nav_prev.style.visibility = 'hidden';
			}
			else
			{
				if (this.cols.length>this.nav)
				{
					//next button
					this.nav_next.style.visibility = 'inherit';
					//draw
					var ctx = this.nav_next.getContext('2d');
					obj.drawNavButton(ctx,obj.sections[obj.section].color,'down');
				}
				else this.nav_next.style.visibility = 'hidden';
				
				if (this.nav>0)
				{
					//prev button
					this.nav_prev.style.visibility = 'inherit';
					//draw
					var ctx = this.nav_prev.getContext('2d');
					obj.drawNavButton(ctx,obj.sections[obj.section].color,'up');
				}
				else this.nav_prev.style.visibility = 'hidden';
			}			
		}
	}
}


/* display */

Layout.prototype.show = function()
{
	this.center.elm.style.visibility = 'visible';
	this.centerbg.style.visibility = 'visible';
}

Layout.prototype.hideSplash = function()
{
	this.splash.style.display = 'none';
	delete this.splash;
	//enable dragging
	this.center.setEnabled(true);
}

Layout.prototype.resize = function(w,h)
{
	//update layout to new window dimensions
	this.w = w;
	this.h = h;

	//update margins
	this.x = (this.x<0)? Math.max(100-w/2,this.x):Math.min(w/2-100,this.x);
	this.y = (this.y<0)? Math.max(100-h/2,this.y):Math.min(h/2-100,this.y);

 	this.center.setRange('x',1,100-w/2,w/2-100);
 	this.center.setRange('y',1,100-h/2,h/2-100);
	
	//new center
	this.center.originalX = (w/2)-50+1;
	this.center.originalY = (h/2)-50+1;
	
 	this.update(this.x,this.y);
 	//window.console.log('update (x,y)= '+this.x+','+this.y);
 	
 	if (this.selected_item) this.positionContent();
}

Layout.prototype.update = function(x,y)
{
	//position and scale sections/joins

	this.x = x;
	this.y = y;
	
	var cw = this.w/2;
	var ch = this.h/2;

	for (var i=1; i<=4; i++)
	{	
		/* sections */
		var div = this.sections[i].div;
		var x = (i==1 || i==4)? 0:(this.w/2)-50;
		var y = (i==1 || i==2)? 0:(this.h/2)-50;
		var w = cw +50;
		var h = ch +50;
		//offset
		if (this.x!=0)
		{
			if (i==2 || i==3) x+= this.x;
			w+= (i==1 || i==4)? this.x:-this.x;
		}
		if (this.y!=0)
		{
			if (i==3 || i==4) y+= this.y;
			h+= (i==1 || i==2)? this.y:-this.y;
		}
		//apply
		div.style.left = Math.round(x) +'px'; div.style.top = Math.round(y) +'px';
 		div.style.width = Math.round(w) +'px'; div.style.height = Math.round(h) +'px';

		/* joins */
		var join = this.joins[i];
		//horizontal
		var xx = (i==1 || i==4)? 0:cw+50;
		var yx = (i==1 || i==2)? ch+50-1:ch-50;
		var wx = cw -50;
		//vertical
		var xy = (i==1 || i==4)? cw+50-1:cw-50;
		var yy = (i==1 || i==2)? 0:ch+50;
		var hy = ch -50;
		//offsets
		if (this.x!=0)
		{
			if (xx!=0) xx+= this.x;
			wx+= (i==1 || i==4)? this.x:-this.x;
			xy+= this.x;
		}
		if (this.y!=0)
		{
 			yx+= this.y;
 			if (yy!=0) yy+= this.y;
 			hy+= (i==1 || i==2)? this.y:-this.y;
		}
		//apply
		join.horizontal.style.left = Math.round(xx) +'px'; join.horizontal.style.top = Math.round(yx) +'px'; 
		join.vertical.style.left = Math.round(xy) +'px'; join.vertical.style.top = Math.round(yy) +'px'; 
		join.horizontal.style.width = Math.round(wx) +'px';	join.vertical.style.height = Math.round(hy) +'px';		
	}
	
	/* center */
	this.centerbg.style.left = Math.round(cw-50 +this.x) +'px';
	this.centerbg.style.top = Math.round(ch-50 +this.y) +'px';
	if (!DD_dragging)
	{
		var x = (this.w/2) -50+1 +this.x;
		var y = (this.h/2) -50+1 +this.y;
	
		this.center.x = x;
		this.center.y = y;
		this.center.elm.style.left = Math.round(x) +'px';
		this.center.elm.style.top = Math.round(y) +'px';
	}
	
	/* contents pane */
	this.contents.style.left = Math.round(cw + this.x - this.cx) +'px';
	this.contents.style.top = Math.round(ch + this.y - this.cy) +'px';
	
	/* menu bar */
	if (this.menubar)
	{
		this.menubar.style.left = Math.round(this.w/2 - 310) +'px';
		if (!this.designmode) this.menubar.style.top = Math.round(this.h - this.menubar_offset) +'px';
		else this.menubar.style.top = Math.round(this.h/2 + 305 - 35) +'px';
	}

	//splash
	if (this.splash)
	{
		this.splash.style.left = Math.round(this.w/2 - 1000) +'px';
		this.splash.style.top = Math.round(this.h/2 - 600) +'px';
		this.splash.style.display = 'block';
	}
	//media
	if (this.selected_medium)
	{
		var display = document.getElementById('mediaview');
		display.childNodes[1].style.left = Math.round((this.w-500)/2) +'px';
		display.lastChild.style.left = Math.round((this.w - this.selected_medium.w)/2) +'px';
		display.lastChild.style.top = Math.round((this.h - this.selected_medium.h)/2) +'px';
	}
	//design mode
	if (this.designmode)
	{
		this.designmode.screensize.style.left = Math.round(this.w/2 - 510) +'px';
		this.designmode.screensize.style.top = Math.round(this.h/2 - 305) +'px';
	}
}

Layout.prototype.rset = function(position_only,captions)
{
	//remove expanded bubble if exists (something went wrong before)
	//if (this.contents.lastChild.tagName=='CANVAS') this.contents.removeChild(this.contents.lastChild);
	if (this.contents.lastChild.id=='full_icon') this.contents.removeChild(this.contents.lastChild);
	
	//if (this.x==0 && this.y==-this.v_offset) alert(this.help);
	

	//center
	this.update(0,0 -this.v_offset);
	
	if (!position_only)
	{
		//->related items, add later
		//if (this.section>0 && this.section<5) this.relatedItems(true);
		
		this.section = -1;
		this.selected_section = false;
	
		//hilight no section
		for (var i=1; i<5; i++) this.hiSection(i,0);
	
		if (captions)
		{
			for (var id in this.items.item)	
			{
				if (this.items.item[id].bubble) this.items.item[id].div.lastChild.style.visibility = 'hidden';
			}
		}
 	}
}

Layout.prototype.slide = function()
{
	var obj = this;
	
	//move to target	
	var dx = this.tx-this.x;
	var dy = this.ty-this.y;
	
	this.x = this.x + .25*(this.tx-this.x);
	this.y = this.y + .25*(this.ty-this.y);
	
	var update_x = (dx>0 && this.x<this.tx-1) || (dx<0 && this.x>this.tx+1);
	var update_y = (dy>0 && this.y<this.ty-1) || (dy<0 && this.y>this.ty+1);
	
	if (update_x || update_y)
	{
		this.update(this.x,this.y);
		if (this.section>0 && this.section<5) this.hiSection(this.section,1);
		//loop
		this.sliding = window.setTimeout(function() { obj.slide() },40);
	}
	else
	{
		//done, set to exact end target position
		this.update(this.tx,this.ty);
		if (this.section>0 && this.section<5) this.hiSection(this.section,0);
		
		//expand if an item was selected
		if (this.selected_item) this.expand();
	}
}

Layout.prototype.setSection = function(i,manual)
{
	//expand or collapse section

	if (manual) //click on label? collapse item first if any (without layout reset)
	{
		this.selected_section = i;
		if (this.selected_item) this.collapse(true);
	}

	var visible_section = true;
	
	if (i>0 && i<5)
	{
		var tx = (i==1 || i==4)? 460-50:Math.max(100-this.w/2,-460+50);
		var ty = (i==1 || i==2)? 260-50:Math.max(100-this.h/2,-260+50);
	}
	else
	{
		visible_section = false;
		tx = 0;
		ty = 0;
		if (this.hi_section) this.hiSection(this.hi_section,0);
	}

	if (tx==this.x && ty==this.y && visible_section)
	{
		//reset (==center click)
		this.center.click();
	}
	else
	{	
		//reset captions of current selected section
		var s = this.section;
		if (s>0 && s<5)
		{
			for (var id in this.sections[s].items.item) this.sections[s].items.item[id].div.lastChild.style.visibility = 'hidden';
		}
	
		this.section = i;
		this.tx = tx;
		this.ty = ty - this.v_offset;
		
		this.slide();
	}	
}

Layout.prototype.hiSection = function(section,show,selected)
{
	if (section==0 || (!show && this.hi_section!=section)) return;
	if (show && this.hi_section && this.hi_section!=section)
	{
		//reset other first
		this.hiSection(this.hi_section,0,section);
	}

	if (show) this.hi_section = section;
	else this.hi_section = false;
	
	var color = this.sections[section].dcolor;
	var c = this.joins[section].color;
	
	this.joins[section].horizontal.style.borderColor = (show)? color:c;
	this.joins[section].vertical.style.borderColor = (show)? color:c;
	
	var cs = this.centerbg.style;
	var c = 'white';
	var c = this.joins[section].color;
	cs.borderTopColor = (section==3 || section==4)? (show)? color:c:c;
	cs.borderRightColor = (section==1 || section==4)? (show)? color:c:c;
	cs.borderBottomColor = (section==1 || section==2)? (show)? color:c:c;
	cs.borderLeftColor = (section==2 || section==3)? (show)? color:c:c;
	
	//show captions of all items in section
	if (this.sections[section].items)
	{
		for (var id in this.sections[section].items.item)
		{
			this.sections[section].items.item[id].div.lastChild.style.visibility = (show)? 'visible':(this.section==section)? 'visible':'hidden';
		}
	}

	if (selected) this.hiSection(selected,1);
}

Layout.prototype.positionContent = function()
{
	if (this.section>0 && this.section<5)
	{
		var offsetx = (this.section==1 || this.section==4)? -890+100-1:-1;
		var offsety = (this.section==1 || this.section==2)? -490+100-1:-1;
	}
	else
	{
		//items not in visible sections
		var offsetx = (-890+100-1)/2;
		var offsety = (-490+100-1)/2;
		//update center as well
		this.center.elm.style.left = this.center.x +offsetx +'px';
		this.center.elm.style.top = this.center.y -offsety +'px';
	}

	this.content.style.left = this.center.x +offsetx +'px';
	this.content.style.top = this.center.y +offsety +'px';
	this.content.style.borderColor = this.sections[this.section].color;
	this.content.style.display = 'block';
}

Layout.prototype.showMenu = function(id,show,forcehide,x)
{
	var menu = this.menus.menu[id];
	do_show = undefined;
	
	if (forcehide)
	{
		do_show = false;
		menu.closing = false;
	}
	else
	{
		if (show)
		{
			if (menu.hideTimeout) window.clearTimeout(menu.hideTimeout);
			do_show = true;
		}
		else
		{
			//hide afer delay
			var obj = this;
			menu.hideTimeout = window.setTimeout(function() { obj.showMenu(id,0,true) },150);
		}
	}

	if (do_show!=undefined)
	{
		var div = menu.div;
		div.style.display = (do_show)? 'block':'none';
	}
}


/* content */

Layout.prototype.getContents = function()
{
	db.get('items',function(resp) { mg.addContents(resp) },'lan',this.language);
}

Layout.prototype.addContents = function(resp)
{
	//id based arrays for easy item access
	this.items = new IdArray('item');
	for (var i=0; i<this.sections.length; i++) this.sections[i].items = new IdArray('item');

	//process all db items	
	for (var i in resp.items)
	{
		this.items.push( new Item(resp.items[i]) );
	}

	//setup columnized text
	var elm = document.getElementById('columns');
	//var h = (browser.safari)? 420:425;
	var h = 410;
	this.columns = new ColumnLayout(elm,320,h,20);
	this.columns.layout = 2; //amount of cols on single page

	//extend the columns class with sliding 2 col navigation (controls)
	var obj = this;
	this.columns.done = function(init)
	{
		//navigation
		var div = document.getElementById('columns_nav');
		this.nav_text = (obj.lan=='en')? 'continue reading':'lees verder';

		if (!init)
		{
			if (this.cols<=this.layout) div.style.visibility = 'hidden';
			else
			{
				div.style.visibility = 'visible';
				div.childNodes[1].style.color = obj.sections[obj.section].color;
				
				if (this.cols-this.layout>this.nav)
				{
					//next button
					div.firstChild.style.visibility = 'inherit';
					//draw
					var ctx = div.firstChild.getContext('2d');
					obj.drawNavButton(ctx,obj.sections[obj.section].color,'right');
				}
				else div.firstChild.style.visibility = 'hidden';
				
				if (this.nav>0)
				{
					//prev button
					div.lastChild.style.visibility = 'inherit';
					//draw
					var ctx = div.lastChild.getContext('2d');
					obj.drawNavButton(ctx,obj.sections[obj.section].color,'left');
				}
				else div.lastChild.style.visibility = 'hidden';
			}
		}
		else
		{
			//set defaults
			this.nav = 0;
 			div.style.visibility = 'hidden';
			div.childNodes[1].innerHTML = this.nav_text;
			//event handlers
			div.onmousedown = function(e) { cancelEvents(e,true); } //prevents accidental selection of text
			div.firstChild.onclick = function(e) { obj.columns.navigate('next'); return false; }
			div.lastChild.onclick = function(e) { obj.columns.navigate('prev'); return false; }
		}
	}

	this.columns.navigate = function(direction)
	{
		switch(direction)
		{
			case 'next':
				if (this.nav>=this.cols-this.layout) return;
				//shift cols left
				this.nav+=this.layout;
				var tx = -this.nav * (this.column_w + this.column_g);
				break;
			
			case 'prev':
				if (this.nav<this.layout) return;
				//shift cols right
				this.nav-=this.layout;
				var tx = -(this.nav) * (this.column_w + this.column_g);
				break;
			
			case 'rset':
				this.nav = 0;
				this.x = 0;
				this.parent.style.left = '0px';
				break;
		}
		if (direction!='rset') this.moveTo(tx);
	}

	//init navigation	
	this.columns.done(true);
	
	//setup media container + display
	this.addMediaColumn();
	if (browser.cssfilter)
	{
		document.getElementById('dimm').src = 'media/blank.gif';
		document.getElementById('dimm').style.filter = pngBgImage('bg_black80').substr(7);
	}
	
	//item navigation
	document.getElementById('item_nav').firstChild.title = (this.lan=='en')? 'close this item':'sluit dit item';
	
	//expand selected item (deep links)
	if (this.selected_item) this.items.item[this.selected_item].expand();
	
	//enable search
	this.addSearch();
	
	//hide splash
	this.hideSplash();

	//->if auto bubble placement is added later
	//this.positionContents(2);
	
}

Layout.prototype.drawNavButton = function(ctx,color,direction)
{
	//draw 14x14 round button with direction arrow on given canvas
	
	//bg
	ctx.clearRect(0,0,14,14);
	ctx.beginPath();
	ctx.arc(7,7,7,0,2*Math.PI,true);
	ctx.fillStyle = color;
	ctx.fill();
	//arrow
	switch (direction)
	{
		case 'right': var points = [5,3, 10,7, 5,11]; break;
		case 'left': var points = [9,3, 4,7, 9,11]; break;
 		case 'down': var points = [3,5, 11,5, 7,10]; break;
 		case 'up': var points = [3,9, 11,9, 7,4]; break;
	}
	ctx.beginPath();
	ctx.moveTo(points[0],points[1]);
	ctx.lineTo(points[2],points[3]);
	ctx.lineTo(points[4],points[5]);
	ctx.fillStyle = '#ffffff';
	ctx.fill();	
}

Layout.prototype.expand = function(id)
{
	if (id) 
	{
		//open item (id) directly
		if (this.selected_item) this.collapse(true);
		if (this.items.item[id]) this.items.item[id].expand();
	}
	else
	{
		//prepare content pane and get (more) item data		
		
		this.positionContent();
		//position icon
		var s = (this.section>0 && this.section<5)? this.section:2;
		var x = (s==1 || s==4)? 890-84-8-1:8;
		var y = (s==1 || s==2)? 7:490-84-7-1;
		var icon = document.getElementById('item_icon');
		icon.style.left = x +'px';
		icon.style.top = y +'px';
		//position media pane
		var x = (s==1 || s==4)? 0:890-101;
		document.getElementById('item_media').style.left = x +'px';
		
		//get item media, show item contents afterwards
		var item = this.items.item[this.selected_item];
		db.get('item',function(resp) { item.showContents(resp) },'id',this.selected_item,'lan',this.lan);
		
		//move related items around content pane
		this.relatedItems();
	}
}

Layout.prototype.collapse = function(noreset,noclose)
{
	//collapse an expanded item

	if (!this.selected_item) return;
	
	//reset center (needed for sections other than 1-4
	this.center.elm.style.left = this.center.x +'px';
	this.center.elm.style.top = this.center.y +'px';

	//reset item
	this.items.item[this.selected_item].collapse();
	this.selected_item = false;
	
	this.relatedItems(true);
	
	if (!noclose) this.content.style.display = 'none';
	//clear contents
	document.getElementById('item_icon').innerHTML = '';
	document.getElementById('media').firstChild.innerHTML = '';
//	document.getElementById('media').firstChild.style.top = '0px';
	document.getElementById('item_title').innerHTML = '';
	document.getElementById('columns_nav').style.visibility = 'hidden';
	//remove text
	this.columns.content = false;
	this.columns.navigate('rset');
	this.columns.rset();

	//reset layout to default if desired	
	if (this.selected_section!=-1 && !noreset) this.center.click();
}

Layout.prototype.hideMedium = function()
{
	//safari QT (!) bug
	if (browser.safari && document.getElementById('qtvideo')) document.getElementById('qtvideo').Stop();
	
	var display = document.getElementById('mediaview');
	display.style.display='none';
	display.lastChild.innerHTML = '';
	delete mg.selected_medium;
}

Layout.prototype.relatedItems = function(rset)
{
	return; //->add later
	
	
	var items = this.sections[this.section].items;
	var offset = 0;
	var ty = (this.section==1 || this.section==2)? this.cy - 500:this.cy + 450;

	//->TEST: all items in this section (change to related later)
	for (var id in items.item)
	{
		if (id==this.selected_item) continue;
		if (rset) items.item[id].rset()
		else
		{
			var tx = (this.section==1 || this.section==4)? this.cx-45-890 +offset:this.cx-45 +offset;

			items.item[id].moveTo(tx,ty);

			offset+= items.item[id].s + 100;
		}
	}
}


Layout.prototype.home = function()
{
	if (this.selected_item) this.collapse()
	else this.rset(false,true)
}

Layout.prototype.language = function(lan)
{
	//->temporay disabled switch (dutch only release)
// 	if (lan=='en')
// 	{
// 		alert('Sorry, unavailable at this time.\n\nEnglish version of this site will be online shortly');
// 		return;
// 	}
	//<-
	
	var url = (lan=='en')? 'http://mediaguild.com/':'http://mediagilde.nl/';
//	var url = '?lan='+lan; //-> for development, - REMOVE -
	
	if (this.selected_item)
	{
		var shorturl = this.items.item[this.selected_item]['url_'+lan];
		if (shorturl) url+= shorturl
		else url+= this.selected_item;
		
//		url+= '&p='+this.selected_item; //-> for development, - REMOVE -
	}
	top.location = url;
}

Layout.prototype.goBack = function(obj)
{
	if (obj.src.indexOf('disabled')!=-1 || this.history.length<=1) return;
	
	//go to previous item and remove last item (current) from history list
	var remove = this.history.pop();
	
	this.expand(this.history[this.history.length-1]);
}

Layout.prototype.addToHistory = function(id)
{
	if (this.history[mg.history.length-1]!=id) this.history.push(id);

	//enable or disable back button
	var back = document.getElementById('item_nav_back');
	if (this.history.length==2)
	{
		back.src = 'media/button_back_'+mg.lan+'.gif';
		back.style.cursor = 'pointer';
		back.title = (this.lan=='en')? 'go back to previous item':'terug naar vorige item';
	}
	if (this.history.length<=1)
	{
		back.src = 'media/button_back_'+mg.lan+'_disabled.gif';
		back.style.cursor = 'auto';
		back.title = '';
	}
}


/* file upload for application forms */

Layout.prototype.formSubmit = function(news,resp)
{
	if (!resp)
	{
		var form = document.forms['applform'];

		//(re)create target iframe
		document.getElementById('formsubmit').innerHTML = '<iframe id="iframe_submit" name="iframe_submit" onload="mg.formSubmit('+news+',true)" src=""></iframe>';

		form.submit();	
		return false;
	}
	else
	{
		if (iframeDocument('iframe_submit').innerHTML.indexOf("{ result: 'OK' }")==-1)
		{
			if (mg.lan=='en') var msg = (news)? 'error subscribing, please try again':'error uploading, please try again. (max upload=25MB)';
			else var msg = (news)? 'fout by aanmelden, probeer aub opnieuw.':'fout bij het uploaden, probeer aub opnieuw. (max upload=25MB)';
			
			alert(msg);
		}
		else
		{
			var item = this.items.item[this.selected_item];
			
			this.columns.content = false;
			this.columns.navigate('rset');
			this.columns.rset();

			//display succes message

			if (news)
			{
				if (this.lan=='en') var txt = '<br><br><br><p>Thanks for your application.<br>You\'ll receive the first newsletter shortly.</p><p>Have a nice day!<br>Media Guild</p><br><br><br><em>"It\'s amazing that the amount of news that happens in the world every day always just exactly fits the newspaper." Jerry Seinfeld</em>';
				else var txt = '<br><br><br><p>Bedankt voor je aanmelding.<br>Binnenkort ontvang je het eerste nieuws</p><p>Fijne dag!<br>Mediagilde</p><br><br><br><em>"It\'s amazing that the amount of news that happens in the world every day always just exactly fits the newspaper." Jerry Seinfeld</em>';
			}
			else
			{
				if (this.lan=='en') var txt = '<br><br><br><p>Thanks for your application.<br>We will contact you soon.</p><p>Have a nice day!<br>Media Guild</p><br><br><br><em>"The secret to creativity is knowing how to hide your sources." Einstein</em>';
				else var txt = '<br><br><br><p>Bedankt voor je aanmelding.<br>Wij nemen binnenkort contact met je op.</p><p>Fijne dag!<br>Mediagilde</p><br><br><br><em>"The secret to creativity is knowing how to hide your sources." Einstein</em>';
			}
			this.columns.init(txt);
		}
	}
}

Layout.prototype.submit = function(news)
{
	//check required fields
	var msg = '';
	var r = (this.lan=='en')? 'Please enter a':'Vul aub een ';
	var form = document.forms['applform'];
	if (form.name.value=='') msg = (this.lan=='en')? r+' Name':r+'Naam in';
	else if (form.email.value=='') msg = (this.lan=='en')? r+'n Emailaddress':r+'Email adres in';
	else if (!news)
	{
		if (form.birth.value=='') msg = (this.lan=='en')? r+' Date of birth':r+'Geboorte datum in';
		else if (form.city.value=='') msg = (this.lan=='en')? r+' City':r+'Woonplaats in';
		else if (form.phone.value=='') msg = (this.lan=='en')? r+' Phone number':r+'Telefoon nummer in';
	}
	
	if (news)
	{
		form.action = 'db/newsletter.php';
	}
	else
	{
		//original filenames
		if (form.cv) form.cv_file.value = form.cv.value;
		if (form.project) form.project_file.value = form.project.value;
		form.action = 'db/form.php';
	}

	if (msg!='') alert(msg);
	else
	{
		//submit to target iframe
		this.formSubmit(news);
	}
}




//->test
Layout.prototype.positionContents = function(s)
{
	//->place on circle, TEST
	
	var r = 200;
	var a = 0;
	
	for (var id in this.sections[s].items.item)
	{
		var x = 970+ (1.5 * r * Math.sin(a));
		var y = 570- r * Math.cos(a);
	
		this.sections[s].items.item[id].setPosition(x,y);
		
		a+= (.5*Math.PI)/ (this.sections[s].items.length-1);
	}
}