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


//mediaguild content items

function Item(item)
{
	this.id = item.id;
	this.section = item.section_id;
	this.rating = item.rating;
	this.url_en = item.url_en;
	this.url_nl = item.url_nl;
	this.icon = item.icon;
	this.group = item.item_group;
	this.highlight = item.highlight;
 	this.position = item.position;
	this.modified = item.modified *1000;
	this.modified_by = item.modified_by;
	if (item.form) this.form = item.form;
	if (item.calendar) this.calendar = true;
	
	this.selected = false;
	
	//get text contents via html (for searchengine compatibility)
	var itemdiv = document.getElementById('item_'+this.id);
	this.title = itemdiv.childNodes[0].innerHTML;
	this.intro = itemdiv.childNodes[1].innerHTML;
	this.text = itemdiv.childNodes[2].innerHTML;

	this.searchdata = this.title+' '+this.intro+' '+this.text;
	this.searchdata = this.searchdata.replace(/<(.|\n)+?>/gi,' '); //strip tags

	//positioning
	var x,y,s;
	if (this.position.length>0)
	{
		x = this.position[0];
		y = this.position[1];
		s = this.position[2];
	}
	else 
	{
		with (Math)
		{
			if (this.section<1 || this.section>4)
			{
				x = 50 + round(random()* 50);
				y = 50 + round(random()* 50);
				x = (round(random()))? mg.cx-x:mg.cx+x;
				y = (round(random()))? mg.cy-y:mg.cy+y;
			}
			else
			{
				x = 70 + round(random()* (mg.cx-70));
				y = 70 + round(random()* (mg.cy-70));
				x = (this.section==1 || this.section==4)? mg.cx-x:mg.cx+x;
				y = (this.section==1 || this.section==2)? mg.cy-y:mg.cy+y;
			}
		}
		s = 40;
	}
	this.x = this.original_x = x;
	this.y = this.original_y = y;
	this.s = this.original_s = s;
	
	this.iconscale = 0.9;
	this.alpha = 1;

	//create bubble for sections 1-4
	if ((this.section>0 && this.section<5) || this.highlight)
	{
		this.alpha = 1; //needed for MSIE glow workaround
		
		//create item elm	
		var div = document.createElement('div')
			div.className = 'item';
			div.style.left = this.x +'px';
			div.style.top = this.y +'px';
		//if (this.section<1 || this.section>4) div.style.display = 'none';
		
		this.div = div;
		mg.contents.appendChild(div);
	
		//create and attach bubble
		this.bubble = new Bubble(this);
		
		//title, short
		var txt = document.createElement('div')
			txt.className = 'caption';
			txt.style.borderLeftColor = mg.sections[this.section].color;
			txt.innerHTML = '<p class="title" style="color:'+mg.sections[this.section].color+'">'+this.title+'</p>';
			var intro = (this.intro.length>30)? this.intro.substring(0,30)+'..':this.intro;
			txt.innerHTML+= '<p class="short">'+intro+'</p>';
		div.appendChild(txt);
		
		//event handling
		var obj = this;
		
		div.onmouseover = function() { obj.over(true) }
		div.onmouseout = function() { obj.over(false) }
		if (!mg.designmode) div.onclick = function(e) { obj.expand(); cancelEvents(e,true) }
		else
		{
			//dragable items in design mode, doubleclick to expand
	
			div.ondblclick = function() { obj.expand() }
			this.drag = makeDragableItem(div);
			this.drag.dragging = function()
			{
				obj.x = this.x;
				obj.y = this.y;
				
				obj.original_x = this.x;
				obj.original_y = this.y;
				
				obj.bubble.draw();
				
				mg.designmode.showRating(obj.id,true);
			}
			this.drag.appearance = function() {}
		}

		
		//highlighted items
		if (this.highlight && !mg.designmode)
		{
			mg.highlights++; //keep animations in order...
			var obj = this;
			eval('window.setTimeout(function () { obj.'+mg.highlight+'() },1200+(mg.highlights*600))');
		}
	}
	
	//store ref in section, for easy access off all items in 1 section e.g.
	//mg.sections[this.section].item[this.id] = this;
	mg.sections[this.section].items.push(this);
}

Item.prototype.over = function(show,forcehide)
{
/*	show or hide elm, hide occurs after small delay, 
	and can be cancelled by calling with show = true again => less flickering */
	
	do_show = undefined;
		
	if (forcehide)
	{
		do_show = false;
		this.closing = false;
	}
	else
	{
		if (show)
		{
			if (this.hideTimeout) window.clearTimeout(this.hideTimeout);
			do_show = true;
		}
		else
		{
			//hide afer delay
			var obj = this;
			this.hideTimeout = window.setTimeout(function() { obj.over(0,true) },150);
		}
	}
	
	if (do_show!=undefined)
	{
		if (do_show==this.hilight) return; //no unnecessary updates
		
		this.hilight = do_show;

		var div = this.div.lastChild;
		div.style.visibility = (do_show)? 'visible':(mg.section==this.section)? 'visible':'hidden';
		//short
		div.lastChild.style.visibility = (do_show)? 'inherit':'hidden';
		//redraw for image hilight
		//if (!this.selected) this.bubble.draw();	
		if (!this.selected && this.icon) this.bubble.showIcon(do_show);	
		
		if (mg.designmode) mg.designmode.showRating(this.id,do_show);
	}
}

Item.prototype.resize = function(s)
{
	this.s = s;
	this.bubble.resize();
}

Item.prototype.expand = function(delayed)
{
	//collapse open item if any
	if (mg.selected_item && !delayed) mg.collapse(true);

	if (!this.selected)
	{
		/* step 1, move bubble to center */

		this.expanding = true;
		if (this.bubble) this.moveTo();
		else
		{
			this.selected = true;
			this.expand();
		}
	}
	else
	{	
		mg.selected_item = this.id;
		this.hilight = true;
	
		if (!delayed)
		{
			/* step 2, full size icon bubble (in center) and delay */
	
			var elm = mg.contents;
			
			var div = document.createElement('div');
				div.id = 'full_icon';
				div.style.position = 'absolute';
				div.style.left = 970-41 +'px';
				div.style.top = 570-41 +'px';
				div.style.width = '82px';
				div.style.height = '82px';
				
			mg.contents.appendChild(div);
			//this.full_icon = new Bubble(this,div,82,970-41,570-41);
			this.full_icon = new Bubble(this,div,82,0,0);
			this.full_icon.drawFull(mg.sections[this.section].color,true);
			
			//return;
			
			//continue after small delay
			var obj = this;
			window.setTimeout(function() { obj.expand(1) },250);
		}
		else
		{
			/* step 3, (select section and) expand item contents */

			if (mg.section!=this.section) mg.setSection(this.section);
			else mg.expand();
		}
	}
}

Item.prototype.showContents = function(resp)
{
	//add to browse history
	mg.addToHistory(this.id);

	//move bubble back to original position in background
	this.expanding = false;
	if (this.bubble) this.rset();

	//move the (full) icon bubble from contents to content pane
	var elm = document.getElementById('item_icon');
	elm.appendChild(mg.contents.lastChild);
	elm.firstChild.style.left = '0px';
	elm.firstChild.style.top = '0px';
// 	if (browser.safari)
// 	{
// 		//safari2 bug, doesn't show canvas contents in moved elm -> redraw
// 		this.full_icon.drawFull(mg.sections[this.section].color,true);
// 	}
	elm.onclick = function() { mg.collapse(true) }
	
	
	/* set item contents */

	//title + url
	var c = mg.sections[this.section].color;
	var str = '<span class="title" style="color:'+c+'">'+this.title+'</span>';
	var url = (mg.lan=='en')? this.url_en:this.url_nl;
	if (url)
	{
		var base_url = (mg.lan=='en')? 'http://mediaguild.com/':'http://mediagilde.nl/';
		url = base_url+url;
		var title = (mg.lan=='en')? 'ctrl-click to bookmark link to this item':'ctrl-klik om de link naar dit item te bookmarken'; 
		str+= '<span class="url" style="color:'+c+'"><a href="'+url+'" title="'+title+'" onclick="this.blur(); return false;" style="color:'+c+'; border-color:'+c+'">'+url+'</a>';//</span>';
		//add rss icon for news items
		if (this.section==5) str+= '<a href="'+base_url+'rss/" style="margin-left:10px; border:0px;"><img src="media/rss_icon.gif" style="border:0px; vertical-align:text-bottom; margin-top:-2px"></a>'; 
		str+= '</span>';
	}
	document.getElementById('item_title').innerHTML = str;
	
	//calendar item
	if (this.calendar)
	{
		if (!mg.calendar) mg.addCalendar();
		else mg.calendar.display();
		mg.media.init(0);
		mg.columns.init(' ');
		return;
	}

	//intro + text
	var intro = this.intro || '&nbsp;';
	var lines = Math.ceil(intro.length/60);
	var m = (lines>1)? 17+((lines-1)*3):17; //add extra margin for each intro line, so that total height matches base lineheight of 17
	var txt = '';
		txt+= '<p class="short" style="margin-bottom:'+m+'px">'+intro+'</p>';

	if (this.text) txt+= this.text;
	
	//forms
	var div = document.getElementById('columns_nav').childNodes[1];
	if (this.form)
	{
		txt+= this.addForm(this.form);
		div.innerHTML = (mg.lan=='en')? 'continue':'ga verder';
	}
	else div.innerHTML = mg.columns.nav_text;
	
	//downloads (inline after text)
	var str = '<br>';
	for (id in resp.files)
	{
		var file = resp.files[id].file.substr(resp.files[id].file.indexOf('_')+1); //strip id
		str+= '<p style="margin-bottom:3px; margin-top:0px;"><img src="media/icon_'+resp.files[id].kind+'.gif" style="vertical-align:text-bottom; margin-right:4px;"><a href="downloads/'+resp.files[id].file+'" target="_blank" title="'+resp.files[id].caption+'" style="">'+file+'</a></p>';
	}
	txt+= str;
	
	//column layout, double default, single for group items and forms
	mg.columns.column_w = (this.group || this.form)? 630:315;
	mg.columns.layout = (this.group || this.form)? 1:2;
	if (this.group==7 || this.group==8) //2col for jobs and people group
	{
		mg.columns.column_w = 315;
		mg.columns.layout = 2;
	}
	mg.columns.init(txt);
	
	//media
	if (!this.calendar) this.addMedia(resp.media);
}

Item.prototype.printContents = function()
{
	var print_window = window.open('print.php?id='+this.id,'printwin','width=750,height=800,scrollbars=1');
	print_window.focus();
}

Item.prototype.addMedia = function(media)
{
	this.media = new IdArray('medium');
	var obj = this;
	
	var div = document.getElementById('media');
		div.style.left = (this.section==1 || this.section==4)? '0px':'-21px';
		
	var left = (this.section==1 || this.section==4)? '-22':'22';
	var h = col_h =  0;
	var cols = [];
	
	for (var i in media)
	{
		this.media.push(media[i]);
		
		var w = media[i].w_thumb;
		var thumb = document.createElement('img');
			thumb.className = 'thumb';
			thumb.style.width =  w +'px';
			thumb.style.height = media[i].h_thumb +'px';
			thumb.src = mg.cms_media_path+media[i].id+'_thumb.jpg';
			if (w<120) thumb.style.padding = '0px '+Math.floor((120-w)/2)+'px';
			thumb.style.marginLeft = left+'px';
			
			//event handling
			thumb.onmouseover = function() { this.style.marginLeft = '0px' };
			thumb.onmouseout = function() { this.style.marginLeft = left+'px' };
			eval('thumb.onclick = function() { obj.showMedium('+media[i].id+'); this.style.marginLeft = \''+left+'px\' }');
		
		h+= media[i].h_thumb +19;
		col_h+= media[i].h_thumb+19;
		
		if (col_h>418+19) 
		{
			//this item is begin of new col, store offset h
			cols.push(h - (media[i].h_thumb+19));
 			//restart counting col height
 			col_h = media[i].h_thumb +19;
		}
		
		div.firstChild.appendChild(thumb);
	}

	//navigation controls
	var color = mg.sections[this.section].color;
	mg.media.init(cols);
}

Item.prototype.addForm = function(type)
{
	if (type=='news')
	{
		if (mg.lan=='en') var labels = ['Name','Email','Submit form'];
		else var labels = ['Naam','Email','Verzend'];

		var str = '';
		str+= '<input type="hidden" name="type" value="'+type+'">';
		str+= '<div style="height:30px;">';
		str+= '<div class="label">'+labels[0]+':</div><input type="text" value="" name="name">';
		str+= '</div>';
		str+= '<div style="height:30px;">';
		str+= '<div class="label">'+labels[1]+':</div><input type="text" value="" name="email">';
		str+= '</div>';
		str+= '<div style="height:30px;">';
		str+= '<input type="submit" value=" '+labels[2]+' " onclick="mg.submit(1)" style="float:right; width:110px; background-color:rgb(240,240,240);">';
		str+= '</div>';
	}
	else
	{
		if (mg.lan=='en')
		{
			var labels = ['Name','Date of Birth','City','Email','Phone nr.','Url','Team','Motivation','Attach CV','Attach Projectplan','I\'m a ...','I\'m interested in ...','Submit form'];
			var options1 = ['Developer','Researcher','Designer','Artist','Marketer','Writer','Architect','Theatre producer','Film producer','Producer','Program maker','Bio technologist','Fashion designer'];
			var options2 = ['Architectuur','Biotechnology','Business','Community','Concept developing','Creative learning','Cross media','Dance','Documentary/film','Sustainability','Philosophy','Gaming','Usability','Graphic design','Hardware','Industrial design','Innovation','Installations','Interaction design','Interface design','Legal','Art','Agriculture','Landscape architecture','Locative media','Management','Marketing','Media design','Media technology','Media theory','Mobile','Fashion','Multidisciplinary cooperating','Networking','Entrepreneurship','Scenario','Software','City engineering','Streaming media','Theatre','Ubiquous computing','User centered design','User generated content','Video','Wearables','Web 2.0'];
		}
		else
		{
			var labels = ['Naam','Geb. datum','Woonplaats','Email','Telefoon nr.','Url','Team','Motivatie','Attach CV','Attach Projectplan','Ik ben een ...','Ik ben ge&iuml;ntereseerd in ...','Verzend'];
			var options1 = ['Ontwikkelaar','Researcher','Designer / ontwerper','Kunstenaar','Marketeer','Tekstschrijver','Architect','Theatermaker','Filmmaker','Producent','Programmamaker','Biotechnoloog','Modeontwerper'];
			var options2 = ['Architectuur','Biotechnologie','Business','Community','Conceptontwikkeling','Creative learning','Cross media','Dans','Documentaire/film','Duurzaamheid','Filosofie','Gaming','Gebruiksonderzoek','Grafisch ontwerp','Hardware','Industrieel design','Innovatie','Installatie','Interactie design','Interface design','Juridisch','Kunst','Landbouw','Landschapsarchitectuur','Locative media','Management','Marketing','Media design','Media technologie','Media theorie','Mobile','Mode','Multidisciplinair samenwerken','Netwerken','Ondernemerschap','Scenario','Software','Stedenbouwkunde','Streaming media','Theater','Ubiquous computing','User centered design','User generated content','Video','Wearables','Web 2.0'];
		}
	
		var str = '';
		str+= '<input type="hidden" name="type" value="'+type+'">';
		str+= '<div style="height:30px;">';
		str+= '<div class="label">'+labels[0]+':</div><input type="text" value="" name="name"><div class="label">'+labels[1]+':</div><input type="text" value="" name="birth">';
		str+= '</div>';
		str+= '<div style="height:30px;">';
		str+= '<div class="label">'+labels[2]+':</div><input type="text" value="" name="city">';
		str+= '</div>';
		str+= '<div style="height:30px;">';
		str+= '<div class="label">'+labels[3]+':</div><input type="text" value="" name="email"><div class="label">'+labels[4]+':</div><input type="text" value="" name="phone">';
		str+= '</div>';
		str+= '<div style="height:30px;">';
		str+= '<div class="label">'+labels[5]+':</div><input type="text" value="" name="url" style="width:340px;">';
		str+= '</div>';
		if (type=='intern')
		{
			str+= '<div style="height:30px;">';
			str+= '<div class="label">'+labels[6]+':</div><input type="text" value="" name="team" style="width:340px;">';
			str+= '</div>';
		}
		str+= '<div style="height:94px;">';
		str+= '<div class="label">'+labels[7]+':</div><textarea name="motivation" style="width:420px; height:80px;"></textarea>';
		str+= '</div>';
		str+= '<div style="height:30px;">';
		str+= '<div class="label" style="margin-left:80px; width:120px;">'+labels[8]+':</div><input type="file" value="" name="cv" style="width:200px"><input type="hidden" name="cv_file">';
		str+= '</div>';
		if (type=='intern')
		{
			str+= '<div style="height:40px;">';		
			str+= '<div class="label" style="margin-left:80px; width:120px;">'+labels[9]+':</div><input type="file" value="" name="project" style="width:200px"><input type="hidden" name="project_file">';
			str+= '</div>';
		}
		if (type=='extern')
		{
			str+= '<div style="height:100px;">';
			str+= '<div class="label">'+labels[10]+'</div><br>';
			for (var i in options1) str+=  '<div class="option"><input type="checkbox" class="check" name="o1_'+options1[i]+'">'+options1[i]+'</div>';
			str+= '<div class="option"><input type="checkbox" class="check" style="float:left;"><input type="text" value="" name="profession" style="width:110px;"></div>';
			str+= '</div>';
			str+= '<div style="height:360px;">';
			str+= '<div class="label" style="width:165px;">'+labels[11]+'</div><br>';
			for (var i in options2) str+=  '<div class="option"><input type="checkbox" class="check" name="o2_'+options2[i]+'">'+options2[i]+'</div>';
			str+= '<div class="option"><input type="checkbox" class="check" style="float:left;"><input type="text" value="" name="interest" style="width:110px;"></div>';
			str+= '</div>';
		}
		str+= '<div style="height:30px;">';
		str+= '<input type="submit" value=" '+labels[12]+' " onclick="mg.submit()" style="float:right; width:110px; background-color:rgb(240,240,240);">';
		str+= '</div>';
	}
	
	return str;
}

Item.prototype.showMedium = function(id)
{
	var medium = this.media.medium[id];
	var w = medium.w;
	var h = medium.h;
	var cc = '';
	if (medium.cc>0 && medium.cc<7) cc = '<a href="'+medium.cc_url+'" title="Creative Commons licence: '+medium.cc_licence+'" target="_blank" style="border:0px"><img src="media/creative_commons.gif" onmouseover="this.src=\'media/creative_commonsX.gif\'" onmouseout="this.src=\'media/creative_commons.gif\'" style="border:0px; vertical-align:text-top"></a>';
	if (medium.cc==7) cc = '&copy '+new Date(this.modified).getFullYear();

	var display = document.getElementById('mediaview');
		display.lastChild.innerHTML = '';
		display.childNodes[1].lastChild.innerHTML = medium.caption +'<span class="cc">'+cc+'</span>';
		display.childNodes[1].style.left = Math.round((mg.w-500)/2) +'px';

		display.lastChild.style.left = Math.round((mg.w - w)/2) +'px';
		display.lastChild.style.top = Math.round((mg.h - h)/2) +'px';
	
	switch (medium.kind)
	{
		case 'image':
			var str = '<img src="'+mg.cms_media_path+id+'_large.jpg">';
			display.lastChild.style.border = '0px';
			break;
		
		case 'quicktime':
			var str = '';
			if (!browser.cssfilter)
			{
				str+= '<EMBED id="qtvideo" SRC="'+mg.cms_media_path+medium.file+'" BGCOLOR="black" WIDTH="'+w+'" HEIGHT="'+(h+16)+'" CONTROLLER="true" AUTOPLAY="true" CACHE="true" PLUGINSPAGE="http://www.apple.com/quicktime/download/">';
				str+= '</EMBED>';
			}
			else
			{
				str+= '<OBJECT id="qtvideo" CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="'+w+'" HEIGHT="'+(h+16)+'" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">';
				str+= '<PARAM name="SRC" VALUE="'+mg.cms_media_path+medium.file+'">';
				str+= '<PARAM name="CONTROLLER" VALUE="true">';
				str+= '<PARAM name="AUTOPLAY" VALUE="true">';
				str+= '<PARAM name="BGCOLOR" VALUE="black">';
				str+= '<PARAM name="CACHE" VALUE="true">';
				str+= '</OBJECT>';
			}
			display.lastChild.style.border = '1px solid rgb(150,150,150)';
			break;
			
		case 'flv':
			var str = '<div id="flvplayer" style="color:white;"><a href="http://www.macromedia.com/go/getflashplayer" style="color:rgb(150,150,150)">Get Flash</a> to see this player.</div>';
			var player = new SWFObject('media/flvplayer.swf','flvplayer',medium.w,medium.h,'7');
				player.addParam('allowfullscreen','true');
				player.addVariable('file','../'+mg.cms_media_path+medium.file);
				player.addVariable('autostart','true');
			display.lastChild.style.border = '1px solid rgb(150,150,150)';
			break;
	}

	//show medium
	display.style.display = 'block';
	
	display.lastChild.style.width = w +'px';
	display.lastChild.style.height = (medium.kind!='quicktime')? h +'px':h+16 +'px';
	
	display.lastChild.innerHTML = str;
	if (medium.kind=='flv') player.write('flvplayer'); //add swf after elm is written
	display.lastChild.style.display = 'block';

	//store dimensions (for window resize)	
	mg.selected_medium = { w:w, h:h };
}

Item.prototype.collapse = function()
{
	this.selected = false;
	this.hilight = false;
	if (this.bubble)
	{
		this.rset();
		this.bubble.draw();
	}
	if (this.calendar && mg.calendar) mg.calendar.hide();
}

Item.prototype.rset = function(slide)
{
	//move back to original position
	if (slide)
	{
		this.moveTo(this.orininal_x,this.original_y);
	}
	else
	{
		this.x = this.original_x;
		this.y = this.original_y;
		this.update(true);
	}
}

Item.prototype.setPosition = function(x,y)
{
	this.x = x;
	this.y = y;
	this.update();
}

Item.prototype.update = function(draw)
{
	this.div.style.left = this.x +'px';
	this.div.style.top = this.y +'px';

	if (draw && this.bubble) this.bubble.draw();
}

Item.prototype.moveTo = function(x,y)
{
	//hide caption

	if (x==undefined)
	{
		//move to center and expand
		x = mg.cx - (this.s/2);
		y = mg.cy - (this.s/2);
		this.selected = true;
	}
	
	if (this.selected) this.div.lastChild.style.visibility = 'hidden';

	//slide anim
	this.tx = x;
	this.ty = y;
	
	this.slide();
}

Item.prototype.slide = function(x,y)
{
	var obj = this;
	
	//move to target	
	var dx = this.tx-this.x;
	var dy = this.ty-this.y;
	
	this.x = this.x + .45*(this.tx-this.x);
	this.y = this.y + .45*(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);

//	var redraw = (mg.selected_item==this.id)? false:true;
	
	if (update_x || update_y)
	{
		this.update(!this.selected);
//		this.hiSection(this.section,1);
		//loop
		window.setTimeout(function() { obj.slide() },40);
	}
	else
	{
		//done, set to exact end target position
		this.x = this.tx;
		this.y = this.ty;
		this.update(!this.selected);
		
		if (this.selected) this.expand();
	}

}

Item.prototype.glow = function()
{
	if (this.opacity==undefined) this.opacity = -20;
	
	this.opacity += 10;
	if (this.opacity>100) this.opacity = -20;
	var f = Math.max(0,this.opacity)/100;
	var dimm = (this.hilight)? 1:.7;
	
	if (!browser.cssfilter)
	{
		this.bubble.canvas.style.opacity = f;
		this.bubble.icon.style.opacity = f*dimm;
	}
	else 
	{
		//redraw bubble for explorer (can't handle png transparency well)
		this.alpha = f;
		this.bubble.draw();
		//this.bubble.canvas.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity='+(f*100)+')';
		this.bubble.icon.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity='+(f*100*dimm)+')';
	}

	var obj = this;
	var delay = (this.opacity==100)? 1000+((mg.highlights/2)*1000):50;
	window.setTimeout(function() { obj.glow() },delay);
}

Item.prototype.vibrate = function()
{
	if (!this.expanding)
	{
		if (this.cycle==undefined) this.cycle = 2;
		
		this.cycle-=.05;
		if (this.cycle<=0) 
		{
			this.cycle=2;
			this.x = this.original_x;
			this.y = this.original_y;
		}
		else
		{
			var rx = (Math.sin(this.cycle*Math.PI));
			var ry = (Math.cos(this.cycle*Math.PI));
		
			this.x = this.x + 1.5*rx;
			this.y = this.y + .5*ry;
		}
		
		//this.update();
		this.update(true);
	}

	var obj = this;
	var delay = 40;
	window.setTimeout(function() { obj.vibrate() },delay);
}



/* bubbles */

function Bubble(parent,elm,s,x,y)
{
	this.item = parent;
	
	this.section = this.item.section;
	this.s = (s)? s:this.item.s;

	this.state = -1; //force draw
	
	var canvas = document.createElement('canvas');
		canvas.width = this.s;// +10;
		canvas.height = this.s;
		canvas.style.width = this.s +0 +'px'; //needed for safari
		canvas.style.height = this.s +'px'; 
		
	if (elm)
	{
		this.elm = elm;
		canvas.style.position = 'absolute';
		canvas.style.left = x +'px';
		canvas.style.top = y +'px';
		elm.appendChild(canvas);
	}
	else
	{
		this.item.div.appendChild(canvas);
	}
	
//	div.appendChild(canvas);
	
	if (G_vmlCanvasManager)
	{
		//init canvas element for IE
		canvas = G_vmlCanvasManager.initElement(canvas);
	}
		
//	this.div = div;
	this.canvas = canvas;
	this.ctx = canvas.getContext('2d');
	
	if (!elm) this.draw();
}

Bubble.prototype.resize = function()
{
	this.s = this.item.s;
	
	this.canvas.width = this.s;
	this.canvas.height = this.s;
	this.canvas.style.width = this.s +'px'; //needed for safari
	this.canvas.style.height = this.s +'px'; 

	this.draw();
}

Bubble.prototype.draw = function(dimm)
{
	this.dimm = dimm; //workaround for MSIE, draw extra dimmed bubble
	
	var s = this.section;
	
	var div_h = (s==1 || s==2)? mg.cy-50+1:mg.cy+50;
	var div_v = (s==1 || s==4)? mg.cx-50+1:mg.cx+50;

	//conditions
	if (s<1 || s>4) //full bubbles for hidden sections
	{	
		x_in = true;
		y_in = true;
	}
	else
	{
		var x_in = (s==1 || s==4)? (this.item.x+this.s<=div_v):(this.item.x>=div_v);
		var x_out = (s==1 || s==4)? (this.item.x>=div_v):(this.item.x+this.s<=div_v);
		var y_in = (s==1 || s==2)? (this.item.y+this.s<=div_h):(this.item.y>=div_h);
		var y_out = (s==1 || s==2)? (this.item.y>=div_h):(this.item.y+this.s<=div_h);
	}
	
// 	var debug = 'x='+this.item.x+', y='+this.item.y+' div_v='+div_v+', div_h='+div_h;
// 		debug+= '<br>x_in='+x_in+', x_out='+x_out+', y_in='+y_in+', y_out='+y_out; 
// 		debug+= '<br>state='+this.state;
// 	this.item.div.firstChild.innerHTML = debug;
	
	if (x_in && y_in)
	{
		this.state = 0;
		this.drawFull(mg.sections[s].color);
	}
	else
	{
		if (y_in)
		{
			if (x_out)
			{
				this.state = 1;
				this.drawFull(mg.sections[s].vcolor);
			}
			else
			{
				//mixed colors vertical
				this.state = .5;
				var dx = div_v - (this.item.x + this.s/2);
				var a = Math.acos(dx/(this.s/2));
				var c1 = (s==1 || s==4)? mg.sections[s].color:mg.sections[s].vcolor;
				var c2 = (s==1 || s==4)? mg.sections[s].vcolor:mg.sections[s].color;

 				this.drawHalfs(a,c1,c2);

// 				debug+= ' dx='+dx;
			}
		}
		if (x_in)
		{
			if (y_out)
			{
				this.state = 2;
				this.drawFull(mg.sections[s].hcolor);
			}
			else
			{
				//mixed colors horizontal
				this.state = 1.5;
				var dy = div_h - (this.item.y + this.s/2);
				var a = Math.asin(dy/(this.s/2));
				var c1 = (s==1 || s==2)? mg.sections[s].color:mg.sections[s].hcolor;
				var c2 = (s==1 || s==2)? mg.sections[s].hcolor:mg.sections[s].color;
				
				this.drawHalfs(a,c1,c2);
				
// 				debug+= ' dy='+dy;
			}
		}
	}
	
	
//	this.item.div.firstChild.innerHTML = debug;
}

Bubble.prototype.drawFull = function(c,full_icon)
{
	var x = this.s/2;
	var y = this.s/2;
	var r = this.s/2;

	if (!this.dimm)
	{
		this.ctx.clearRect(0,0,this.s+10,this.s);
		this.ctx.globalAlpha = 1; // * this.item.alpha;
	}

	this.ctx.beginPath();
	this.ctx.arc(x,y,r,0,2*Math.PI,true);
	this.ctx.fillStyle = c;
	this.ctx.fill();
	
//	this.drawLine(c);
	//if (!this.dimm) 
	if (full_icon) this.addFullIcon(c)
	else this.addIcon(c);
}

Bubble.prototype.drawHalfs = function(a,c1,c2)
{
	var x = this.s/2;
	var y = this.s/2;
	var r = this.s/2;

	if (!this.dimm)
	{
		this.ctx.clearRect(0,0,this.s+10,this.s);
		this.ctx.globalAlpha = 1 * this.item.alpha;
	}
	
	this.ctx.beginPath();
	if (this.state<1) this.ctx.arc(x,y,r,0-a,0+a,true); //vertical
	else this.ctx.arc(x,y,r,0+a,Math.PI-a,true); //horizontal
	this.ctx.fillStyle = c1;
	this.ctx.fill();

	this.ctx.beginPath();
	if (this.state<1) this.ctx.arc(x,y,r,0+a,0-a,true); //vertical
	else this.ctx.arc(x,y,r,Math.PI-a,0+a,true); //horizontal
	this.ctx.fillStyle = c2;
	this.ctx.fill();

//	this.drawLine(c1);
	if (!this.dimm) this.addIcon(c1);
}

Bubble.prototype.drawLine = function(c)
{
	this.ctx.globalAlpha = .7 * this.item.alpha;
	this.ctx.beginPath();
	this.ctx.lineWidth = 2;
	this.ctx.moveTo(this.s+7,.07*this.s);
	this.ctx.lineTo(this.s+7,this.s-(.07*this.s));
	this.ctx.strokeStyle = c
	this.ctx.stroke();
}

Bubble.prototype.addFullIcon = function(c)
{
	if (!this.item.icon) return;

	//size and position
 	var s = Math.floor(this.item.iconscale * this.s);
 	if (Math.round(s/2)!=s/2) s--; //make sure size can be divided by 2 (better image quality)
	var x = (this.s - s)/2;
	var y = (this.s - s)/2;

	//create new img elm
	var img = document.createElement('img');
		img.style.width = s +'px';
		img.style.height = s +'px';

		if (!browser.cssfilter) img.src = mg.cms_media_path + this.item.icon +'_mg_icon.png';
		else
		{
			//transparent png workaround for IE
			img.src = 'media/blank.gif';
			img.style.filter = pngBgImage(mg.cms_media_path.substr(6) + this.item.icon +'_mg_icon').substr(7);
		}

		
		img.style.position = 'absolute';

		img.style.left = x +'px';
		img.style.top = y +'px';
		
	this.elm.appendChild(img);
	
/*	prev method, using canvas image. 
	cancelled as canvas image support seems to be not commonly reliable
	
	this.ctx.globalAlpha = 1;

	var obj = this;
	var img = new Image();
	img.onload = function() {
		var s = Math.floor(obj.item.iconscale * obj.s);

		if (Math.round(s/2)!=s/2) s--; //make sure size can be divided by 2 (better image quality)
		
		var x = (obj.s - s)/2;
		var y = (obj.s - s)/2;
		
		obj.ctx.drawImage(img,x,y,s,s)
		
// 		if (browser.cssfilter)
// 		{
// 			//overlay another bubble for dimmed effect (img alpha missing in excanvas)
// 			if (!obj.item.hilight) obj.draw(true);
// 		}
	}
	
	//load icon image
	img.src = mg.cms_media_path + this.item.icon +'_mg_icon.png';//?'+new Date().get
*/
}

Bubble.prototype.addIcon = function()
{
	if (!this.item.icon) return;
	
	var s = Math.floor(this.item.iconscale * this.s);

	if (Math.round(s/2)!=s/2) s--; //make sure size can be divided by 2 (better image quality)
	
	var x = (this.s - s)/2;
	var y = (this.s - s)/2;
	
	if (!this.icon)
	{
		var img = document.createElement('img');
			img.style.width = s +'px';
			img.style.height = s +'px';
	
		if (browser.cssfilter)
		{
			//wrapper needed for buggy PNG display in IE
			var div = document.createElement('div');
				div.style.position = 'absolute';
				div.style.left = x +'px';
				div.style.top = y +'px';
				div.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=100) ';
				div.style.width = s +'px';
				div.style.height = s +'px';
				div.appendChild(img)
	
			img.src = 'media/blank.gif';
			img.style.filter = pngBgImage(mg.cms_media_path.substr(6) + this.item.icon +'_mg_icon').substr(7);
			
			this.item.div.insertBefore(div, this.canvas.nextSibling);
			this.icon = div;
		}
		else
		{
			img.src = mg.cms_media_path + this.item.icon +'_mg_icon.png';
			img.style.position = 'absolute';
			img.style.left = x +'px';
			img.style.top = y +'px';
	
			this.item.div.insertBefore(img, this.canvas.nextSibling);
			this.icon = img;
		}
	}
	else
	{
		//resize icon
		this.icon.style.left = x +'px';
		this.icon.style.top = y +'px';
		this.icon.style.width = s +'px';
		this.icon.style.height = s +'px';
	}
	
	//show icon
	this.showIcon(this.item.hilight);
}

Bubble.prototype.showIcon = function(highlight)
{
	var f = (highlight)? 1.0:0.7;
	
	if (browser.cssfilter) this.icon.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity='+(f*100)+')';
	else this.icon.style.opacity = f;
}