window.onload=InitializePage;

function InitializePage()
{
FirstDIV=document.createElement('DIV')
//document.body.appendChild(FirstDIV)
document.getElementById('asdfg').appendChild(FirstDIV);
FirstDIV.innerHTML="<INPUT type=hidden >" +

"<table id='galerija' style='border:3px solid #D6D6D6; height=104; width=364' cellspacing='0' cellpadding='0'>" +
"<tr>" +
"<td align='left' valign='middle' width='21'>" +
"<DIV id='ScrollLeft'>" + 
"<img src='client/img/galmikk.gif' alt='' width='13' height='75' border='0' onclick='moveLeft()'>" + 
"</DIV>" + 
"</td>" +
"<td align='left' valign='top' >" +
"<DIV id='interface' style='margin-top:10px'>" + //galerija       
"<DIV id='ViewingArea'>" + //galerijos matomumas
"<TABLE border='0' cellpadding='3'>" + 
"<TR  id='ImageContainer'>" + 
"</TR>" + 
"</TABLE>" + 
"</DIV>" + 
"</DIV>" +
//"<DIV id='Verbiage' style='border:1px solid #f00'>" + 
//"</DIV>" + 
"</td>" +
"<td align='right' valign='middle' width='21'>" +
"<DIV id='ScrollRight'>" + 
"<img src='client/img/galmikd.gif' alt='' width='13' height='75' border='0' onclick='moveRight()'>" + 
"</DIV>" + 
"</td>" +
"</tr>" +
"</table>"


if (ImageArray!=null)
	{for (l=0; l<ImageArray.length; l++)
		{
		TDElement=document.createElement("TD");
		TDElement.innerHTML="<IMG border='0' src='"+ImageArray[l]+":w.100:h.100'>"
		document.getElementById('ImageContainer').appendChild(TDElement)		
		}
	}


setStyles();
setIDs();
attachEventhandlers();
}

function setStyles()
{
document.getElementById('galerija').style.position="relative";
document.getElementById('interface').style.position="relative";
document.getElementById('interface').style.width=320+"px";
document.getElementById('interface').style.overflow="hidden";

DIVCol=document.getElementById('interface').getElementsByTagName('DIV');
if (DIVCol!=null)
	{for (p=0; p<DIVCol.length; p++)
		{
		DIVCol.item(p).style.position="relative";
		DIVCol.item(p).style.width=320+"px";
		if(DIVCol.item(p).id=="ScrollRight") 					 //desinis miktukas
			{
			//DIVCol.item(p).style.width=0+"px";	 //valdimo ilgis
			DIVCol.item(p).style.textAlign="right"; 			 //desinio miktuko isliginimas
			}
		}
	}
//document.getElementById('Verbiage').style.width=317+"px"; //galerijos ilgis

document.getElementById('interface').style.zIndex=1;			//eiliskumas elementu
document.getElementById('ViewingArea').style.zIndex=2;			//eiliskumas
//document.getElementById('Verbiage').style.zIndex=5;				//galerijos eiliskumas
document.getElementById('ScrollLeft').style.zIndex=4;
document.getElementById('ScrollRight').style.zIndex=4;			//eiliskumas


document.getElementById('interface').style.height=97+"px";		//galerijos aukstis

document.getElementById('galerija').style.left=0+"px";		//galerijos atitraukimas kaires
document.getElementById('galerija').style.top=0+"px";		//galerijos atitraukimas virsaus

//document.getElementById('Verbiage').style.textAlign='left';	//valdimo fono centravimas

//document.getElementById('Verbiage').style.color='black';//
document.getElementById('ViewingArea').style.backgroundColor='fff';// galerijos matomumas ir fonas

IMGCol=document.getElementById('interface').getElementsByTagName('IMG');
if (IMGCol!=null)
	{for (im=0; im<IMGCol.length; im++)
		{
		}
	}


BTNCol=document.getElementById('interface').getElementsByTagName('INPUT');
if (BTNCol!=null)
	{for (p=0; p<BTNCol.length; p++)
		{
		
		}
	}


TDCol=document.getElementById('interface').getElementsByTagName('TD');
if (TDCol!=null)
	{for (td=0; td<TDCol.length; td++)
		{TDCol.item(td).style.verticalAlign='top';}}
}




function onclickHandler(e)
{

	var targ;
	if (!e){var e = window.event;}
	
	if (e.target){
		targ = e.target;
		var xpos=(e.pageX); var ypos=(e.pageY);
		var spath=targ.getAttribute('src');
		var aaa = spath.split(":");
		var getpath = aaa[0];
	}else if (e.srcElement){
		var xpos=(event.x);	var ypos=(event.y);
		targ = e.srcElement;
		var spath=targ.getAttribute('src');
		var aaa = spath.split(":");
		var getpath = aaa[1];
	}


	wholePathLength=spath.length;
	strippedPathLength=spath.substring(0,spath.lastIndexOf("/")).length;
	ifm= spath.substring(strippedPathLength+1,wholePathLength);

	var pos = "left="+xpos+",top="+ypos;
	document.getElementById('big_img').src = getpath+":w.321:h.242";


}


function attachEventhandlers()
{
ContainerElement=document.getElementById('ImageContainer')
TDCol=ContainerElement.getElementsByTagName('TD');

if (TDCol!=null)
	{for (l=0; l<TDCol.length; l++)
		{
		IMGCol=TDCol.item(l).getElementsByTagName("IMG");
		IMGCol.item(0).style.cursor="pointer"
		IMGCol.item(0).setAttribute('id',"Image"+l)
		IMGCol.item(0).onclick=onclickHandler;
		}
	}
}


function setIDs()
{
ContainerElement=document.getElementById('ImageContainer')
TDCol=ContainerElement.getElementsByTagName('TD');
if (TDCol!=null)
	{	for (i=0; i<TDCol.length; i++)
			{TDCol.item(i).setAttribute('id',i)}
	}
}



function moveLeft()
{
ContainerElement=document.getElementById("ImageContainer");
firstTD=document.getElementById("0");
dupfirstTD=firstTD.cloneNode(false)
dupfirstTD.innerHTML=firstTD.innerHTML
ContainerElement.removeChild(firstTD);
ContainerElement.appendChild(dupfirstTD);
setStyles; setIDs();attachEventhandlers();
}

function moveRight()
{
lastTD=document.getElementById(TDCol.length-1);
duplastTD=lastTD.cloneNode(false)
duplastTD.innerHTML=lastTD.innerHTML
firstTD=document.getElementById("0");
ContainerElement=document.getElementById("ImageContainer");
ContainerElement.insertBefore(duplastTD,firstTD);
ContainerElement.removeChild(lastTD);
setStyles; setIDs();attachEventhandlers();
}