//Stephan Hoefnagels, September 2006
//Woodgrain image from http://blog.imagereflex.com/images/2005/nature/woodgrain(050306NEF18).jpg

var bgImages = new Array(); //Contains the background images in g:background
var listPops = new Array(); //Contains the bubbles
var skin = ""; //Contains the skin

function loadGadget()
{	
	//debug.innerHTML = "Gadget";
	drawContent();
	System.Gadget.settingsUI = "Settings.html";
	System.Gadget.onSettingsClosed = settingsClosed;
	System.Gadget.onUndock = drawGadget;
    	System.Gadget.onDock = drawGadget;
}

function settingsClosed(event)
{
	if (event.closeAction == event.Action.commit)
    {
		skin = System.Gadget.Settings.read("skinSetting");
		drawGadget();
	}
}

function drawGadget()
{
	clearGadget();
	var t=setTimeout("drawContent()",1); //HACK: to prevent distorted bubbles from showing up
}

function clearGadget()
{	
	bg.removeObjects();
	clearTimeout(); //NOTE: does this do anything?
	hot.innerHTML ='';
}

function drawContent()
{
	//CHECK SKIN
	skin = System.Gadget.Settings.read("skinSetting");
	if (skin == "")
	{
		 skin = "Teal"; //Default skin
	}

	//DRAW SKIN
    if(System.Gadget.docked)
	{
		var width = 130;
		var height = 130;
		var offset = 2;
		var img = "../images/bg-docked.png";
		var skinImg = skin +"Docked";
	}
	else
	{
		var width = 409;
		var height = 284;
		var offset = 13;
		var img = "../images/bg-floating.png";
		var skinImg = skin;
	}
	document.body.style.width = ""+width+"px"; //Size the gadget
	document.body.style.height = ""+height+"px";
	bgImages[0] = bg.addImageObject("../images/"+skinImg+".png", offset, offset); //Add skin img. NOTE: ideally this would be loaded in g:background html, but unable to get positioning to work there.
	bgImages[1] = bg.addImageObject(img, 0, 0); //Add img with hilites

	//DRAW POPS
	var hotHTML = ''; //HTML to draw the hot areas
	var j = 0 //alternating x offset per row: 0 for odd rows, 1 for even
	var k = 0 //incrementing y offset per row
	var l = 0 //reset to starting x position per row
	
	if(System.Gadget.docked)
	{
		var popNu = 20;
		var arrayLineBreaks = new Array(3,5,8,10,13,15,18);
		var xMargin = 4;
		var yMargin = 2;
		var popReturn = 2000;
	}
	else
	{
		var popNu = 128;
		var arrayLineBreaks = new Array(8,15,23,30,38,45,53,60,68,75,83,90,98,105,113,120);
		var xMargin = 17;
		var yMargin = 13;
		var popReturn = 12000;
	}
	for (i = 0; i < popNu; i++)
	{		
		for (m in arrayLineBreaks) //Line breaks
		{
			if (i == arrayLineBreaks[m])
			{
				k++;
				l = i*48;
					if (j == 0) //even
					{
						j = 1;
					}
					else
					{
						j = 0;
					}
				break;
			}
		}
		//Draw the bubbles in g:background
		var locx = xMargin + j*24 + i*48 - l;
		var locy = yMargin + k*14;
		var popImg = getRandomPop(); //Get 1 out of 3 pop images
		listPops[i] = bg.addImageObject("../images/up"+skin+"-"+popImg+".png", locx, locy);

		//Draw the hot areas in divs
		var hotId = 'hot_'+i; //div id
		var hotLeft = listPops[i].left + 1; //position, prevent the hot areas from overlapping
		var hotTop = listPops[i].top + 1;
		var mouseOver = "javascript:popHover("+i+");"; //events
		var mouseOut = "javascript:timer("+i+","+popReturn+");";

		var hotDefinition = '<div id="'+hotId+'" style="position:absolute;left:'+hotLeft+'px;top:'+hotTop+'px;width:24px;height:24px" onMouseOver='+mouseOver+'  onMouseOut='+mouseOut+'></div>'; //Write the HTML
				
		hotHTML += hotDefinition;
	}
	hot.innerHTML = hotHTML;
	popGadget(); //pop some random bubbles after drawing
}

function popHover(pop)
{
	if (listPops[pop].src = "../images/up.png") //only pop if the pop is up
	{
		listPops[pop].src = "../images/down.png";
		System.Sound.playSound("../sounds/Windows Balloon.wav");
	}
}

function timer(pop,popReturn)
{
	var t=setTimeout("popOut("+pop+")",popReturn)
}

function popOut(pop)
{
	var popImg = getRandomPop();
	listPops[pop].src = "../images/up"+skin+"-"+popImg+".png";
	//System.Sound.playSound("../sounds/Windows Menu Command.wav");
}

function getRandomPop()
{
	var popImg = Math.floor(Math.random()*3);
	return popImg;
}

function popGadget()
{
	for (i=0;i<20;i++)
	{
		var pop = Math.floor(Math.random()*listPops.length); //NOTE: some pops will get this event more than once
		var popReturn = Math.floor(Math.random()*2000)+1000; //Randomly pop the bubbles back
		popHover(pop);
		timer(pop, popReturn);
	}
}