var currentColorObject
var currentColor = "red"
var parlSize = 18
var parlPlattaWidth = 20
var parlPlattaHeight = 20
var parlPlattaX = 152
var parlPlattaY = 23
var margin = 18
var ie
var currentPage = 0
var PearlIdArray
ie = /MSIE/.test(navigator.userAgent)

var ajax = true
var xmlHttp = GetXmlHttpObject()
if (xmlHttp==null) ajax = false

function start() {
		changeColor(document.getElementById("StartColor"),'red')
		for (var row=10; row<10+parlPlattaHeight; row++) {
			for (var col=10; col<10+parlPlattaWidth; col++) {
				document.getElementById("dot"+row+""+col).name="peg"
			}
		}
		changeThumbnails()
}

function paint(evt, click) {
	if (evt.button==1 || click || evt.shiftKey==1) {

		var offX, offY
		if (ie) {
			offX = evt.offsetX
			offY = evt.offsetY
		} else {
			offX = evt.layerX
			offY = evt.layerY
		}
		var col = Math.floor((offX-margin) / parlSize) 
		var row = Math.floor((offY-margin) / parlSize)

		if (col>=0 && col<parlPlattaWidth && row>=0 && row<parlPlattaHeight) {

			var whichImg = document.getElementById("dot" + (row+10) + (col+10))
			whichImg.src = "img/" + currentColor + ".gif"
			whichImg.name = currentColor
		}
	}
}

function saveParlor() {
	var txt=""
	for (row=10; row<10+parlPlattaHeight; row++) {
		for (col=10; col<10+parlPlattaWidth; col++) {
			var whichImg = document.getElementById("dot"+row+""+col)
			switch (whichImg.name) {
				case "peg" : txt+="Z"; break;
				case "black" :  txt+="A"; break;
				case "blue" : txt+="B"; break;
				case "darkgreen" :  txt+="C"; break;
				case "darkred" : txt+="D"; break;
				case "lightblue" : txt+="E"; break;
				case "lightgreen" : txt+="F"; break;
				case "lightyellow" : txt+="G"; break;
				case "lilac" : txt+="H"; break;
				case "pink" : txt+="I"; break;
				case "red" : txt+="J"; break;
				case "white" : txt+="K"; break;
				case "yellow" : txt+="L"; break;
			}
		}
	}	
	document.getElementById("AllPearls").value = txt

}



function changeColor(obj, color) {
	if (currentColorObject!=null) currentColorObject.style.backgroundColor = ""
	currentColor=color
	currentColorObject=obj
	obj.style.backgroundColor='white'
}

function submitPeals(f) {
	var err=""
	if (f.Title.value=="") err += "* Title of Artwork\n"
	if (f.Name.value=="") err += "* Name\n"
	if (f.City.value=="") err += "* City\n"
	if (f.Country.value=="") err += "* County\n"
	
	if (err=="") {
		var answer = confirm("Save Pearler Bed?")
		if (answer) {
			saveParlor()
			document.forms["form1"].submit()
		} 
	} else {
		alert("Please enter:\n"+err)
	}
}

function showPearlerbed(img)
{
	id=img.match(/pic(\d)+/g) 
	id=id+""
	id = id.substring(3,id.length)
	if (id!="0") open('gallery.php?id='+id,'','width=500,height=510,status=yes')
}

function load() {
	document.forms["form1"].action.value="load";
	document.forms["form1"].submit();
}

function loadParlor() {
	var color
	var txt = document.forms["form1"].AllPearls.value
	for (var i=0; i<txt.length; i++) {
		switch (txt.charAt(i)) {
				case "Z" : color = "peg"; break;
				case "A" : color = "black"; break;
				case "B" : color = "blue"; break;
				case "C" : color = "darkgreen"; break;
				case "D" : color = "darkred"; break;
				case "E" : color = "lightblue"; break;
				case "F" : color = "lightgreen"; break;
				case "G" : color = "lightyellow"; break;
				case "H" : color = "lilac"; break;
				case "I" : color = "pink"; break;
				case "J" : color = "red"; break;
				case "K" : color = "white"; break;
				case "L" : color = "yellow"; break;
				default : color="ลลล"; break;
		}
		var row = Math.floor(i / parlPlattaWidth) + 10
		var col = i % parlPlattaWidth + 10
		var whichImg = document.getElementById("dot"+row+""+col)	
		whichImg.src = "img/" + color + ".gif"
		whichImg.name = color
	}
}

function prevPage()
{
	currentPage--;
	if (currentPage<0) currentPage=0;
	changeThumbnails()
}

function nextPage()
{
	var lastPage = Math.floor((PearlIdArray.length-1)/10)
	if (currentPage<lastPage)
	{
		currentPage++;
		changeThumbnails()	
	}
}

function changeThumbnails()
{
	var firstIndex = currentPage*10

	for (i=0; i<10; i++)
	{
		if (firstIndex+i<PearlIdArray.length)
		{
			document.getElementById("thumb"+i).src = "thumb/pic" +PearlIdArray[firstIndex+i]+ ".png"
		}
		else
		{
			document.getElementById("thumb"+i).src = "thumb/pic0.png"
		}
	}
}

function clearAll()
{
	var answer = confirm ("Clear pearler bed?")
	if (answer) 
	{
		for (var i=0; i<400; i++) 
		{
			var row = Math.floor(i / parlPlattaWidth) + 10
			var col = i % parlPlattaWidth + 10
			var whichImg = document.getElementById("dot"+row+""+col)	
			whichImg.src = "img/peg.gif"
			whichImg.name = "peg"
		}	
	}
}

function show(id)
{
	document.getElementById(id).style.display = "block";
}

function hide(id)
{
	document.getElementById(id).style.display = "none";
}

function changePearl(direction, newId)
{
	if (ajax)
	{	
		var id = document.forms["form1"].CurrentId.value
		xmlHttp=GetXmlHttpObject();
	
		var url="getPearl.php?action=" +direction+ "&id="+id;
		xmlHttp.onreadystatechange=stateChanged;
		xmlHttp.open("GET",url,true);
		xmlHttp.send(null);
	}
	else
	{
		if (newId!=-1)
		{
			location.href="gallery.php?id=" +newId
		}
	}
} 

function stateChanged() 
	{ 
	if (xmlHttp.readyState==4)
	{ 
		
		var pArray = xmlHttp.responseText.split("'")
		var id = pArray[0]
		var pearls = pArray[1]
		var title = pArray[2]
		var name = pArray[3]
		var city = pArray[4]
		var country = pArray[5]
		var created = pArray[6]
		if (id!="")
		{				
			document.getElementById("title").innerHTML = title
			document.getElementById("PearlInfo").innerHTML = "Artist: " +name+ ", " +city+ ", " +country+ ". Created: "+created;
			document.getElementById("AllPearls").innerHTML = pearls
			document.forms["form1"].CurrentId.value = id
			loadParlor()
		}
	}
}

function GetXmlHttpObject()
{
	var xmlHttp=null;
	try
	  {
	  xmlHttp=new XMLHttpRequest();
	  }
	catch (e)
	  {
	  try
	    {
	    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	    }
	  catch (e)
	    {
	    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	    }
	  }
	return xmlHttp;
}