function myMoveLeft(id)
{
	var scroller = $(id);
	if (parseInt(scroller.style.left)<0)
		scroller.style.left=parseInt(scroller.style.left)+8+"px";
	lefttime=setTimeout("myMoveLeft('"+id+"')",50);
}

function myMoveRight(id, maxWidth)
{
	//alert(maxId);
	var scroller = $(id);
	var actualWidth= $(id).offsetWidth
	if (parseInt(scroller.style.left)>(maxWidth-actualWidth)){
		scroller.style.left=parseInt(scroller.style.left)-8+"px"
	}
	righttime=setTimeout("myMoveRight('"+id+"', "+maxWidth+")",50)
}

function movedown(){
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function myMoveUp(id)
{
	var scroller = $(id);
	if (parseInt(scroller.style.top)<0)
		scroller.style.top=parseInt(scroller.style.top)+8+"px";
	toptime=setTimeout("myMoveUp('"+id+"')",50);
}

function myMoveDown(id, maxHeight)
{
	//alert(maxId);
	var scroller = $(id);
	var actualHeight= $(id).offsetHeight
	if (parseInt(scroller.style.top)>(maxHeight-actualHeight)){
		scroller.style.top=parseInt(scroller.style.top)-8+"px"
	}
	downtime=setTimeout("myMoveDown('"+id+"', "+maxHeight+")",50)
}
function loadMainImage(id)
{
	var mainImage = $("mainImage");
	var mainContent = $("mainContent");
	var curImage = $("img"+id);
	var curContent = $("content"+id);
	
	//alert(mainImage);
	mainImage.src = curImage.src;
	mainImage.alt = curImage.alt;
	mainImage.title = curImage.title;
	mainContent.innerHTML = curContent.innerHTML;
}
function loadMainImageText(id)
{
	var tblService = $("tblService");
	var mainImage = $("mainImage");
	var hiddenImage = $("hiddenImage");
	var hiddenId = $("hiddenId");
	var mainContent = $("mainContent");
	var curTitle = $("imgTitle"+id);
	var curContent = $("imgContent"+id);
	var curSrc = $("imgSrc"+id);
	var spanList = tblService.getElementsByTagName("span");
	
	for(i = 0; i < spanList.length; i ++)
	{
		spanList[i].className = 'imgLink';
	}
	curTitle.className = 'currentLink';
	
	mainImage.src = curSrc.innerHTML;
	mainImage.alt = curTitle.innerHTML;
	mainImage.title = curTitle.innerHTML;
	
	hiddenImage.src = curSrc.innerHTML;
	hiddenImage.alt = curTitle.innerHTML;
	hiddenImage.title = curTitle.innerHTML;
	hiddenId.innerHTML = id;
	
	mainContent.innerHTML = curContent.innerHTML;
}

function popUp(id)
{
	var ie=document.all && !window.opera;
	this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body;
	var hiddenId = $("hiddenId");
	var hiddenImage = $("hiddenImage");
	var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset;
	var scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset;
	var docwidth=(ie)? this.standardbody.clientWidth : window.innerWidth;
	var docheight=(ie)? this.standardbody.clientHeight: window.innerHeight;
	var width = ($("hiddenImage").getWidth()) < 800 ? ($("hiddenImage").getWidth()) : 800;
	var height = ($("hiddenImage").getHeight() + 30) < 600 ? ($("hiddenImage").getHeight() + 30) : 600;
	var topposition=(docheight>height)? scroll_top+docheight/2-height/2+"px" : scroll_top+10+"px";
	var left = docwidth/2-width/2;
  var top = Math.floor(parseInt(topposition));
	
	window.open("image.viewer.php?id="+hiddenId.innerHTML, "myWindow", 
"status = 1, height = "+height+", width = "+width+", left = "+left+", top = "+top+", resizable = 0" )
}

function loadMainImageVeneer(group, id)
{
	var currentView = $("currentView").innerHTML;
	var tblService = $("tblService"+group);
	var mainImage = $("mainImage"+group);
	var mainContent = $("mainContent");
	var curTitle = $("spanTitle"+group+id);
	var curImageTitle;
	var curImageSrc;
	var spanList = tblService.getElementsByTagName("span");
	var cPattern;
	
	for(i = 0; i < spanList.length; i ++)
	{
		spanList[i].className = 'imgLink';
	}
	curTitle.className = 'currentLink';
	
	if(group == 1)
	{
		mainContent.innerHTML = curTitle.innerHTML;
		curImageTitle = $("imgTitle0"+id).innerHTML;
		curImageSrc = $("imgSrc0"+id).innerHTML;
		
		mainImage.src = curImageSrc;
		mainImage.title = curImageTitle;
		mainImage.alt = curImageTitle;
	}
	else
	{
		var secContent = $("secContent");
		
		secContent.innerHTML = curTitle.innerHTML;
		curImageTitle = $("imgTitle1"+id).innerHTML;
		curImageSrc = $("imgSrc1"+id).innerHTML;

		if(currentView == 1)
		{
			 cPattern = Array(Array(Array("20","0"),Array("50","300")));
			 clipCustomPattern(cPattern,curImageSrc, curImageTitle);
		}
		else if(currentView == 2)
		{
			cPattern = Array(Array(Array("25","25"),Array("175","275")));
			clipCustomPattern(cPattern,curImageSrc, curImageTitle);
		}
		else
		{
			cPattern = Array(
									Array(Array("10","20"),Array("30","30")),
									Array(Array("20","10"),Array("180","20")),
									Array(Array("170","20"),Array("190","30")),
									Array(Array("180","20"),Array("190","270")),
									Array(Array("170","270"),Array("190","280")),
									Array(Array("20","280"),Array("180","290")),
									Array(Array("10","270"),Array("30","280")),
									Array(Array("10","30"),Array("20","270"))
																														);
			clipCustomPattern(cPattern,curImageSrc, curImageTitle);
		} 
	}
}

function toggleView(obj, id)
{
	var currentView = $("currentView");
	var tblView = $("tblView");
	var tblService = $("tblService2");
	var spanList = tblView.getElementsByTagName("input");
	var curIndex;
	
	for(i = 0; i < spanList.length; i ++)
	{
		spanList[i].className = 'btnViewOff';
	}
	obj.className = 'btnViewOn';
	currentView.innerHTML = id;
	
	spanList = tblService.getElementsByTagName("span");
	for(i = 0; i < spanList.length; i ++)
	{
		if(spanList[i].className == 'currentLink')
		{
			curIndex = i+1;
			break;
		}
	}
	loadMainImageVeneer(2, curIndex);
}

function clipCustomPattern(patternArr, imageSrc, imageDesc)
{
  $('viewImage').innerHTML = "";
	var imgTag = imageSrc;
  var i;
	for(i = 0; i < patternArr.length; i++)
	{
	  //$('dbg').innerHTML = $('dbg').innerHTML + patternArr[i] + "<br/>";
	  var rectPoints = patternArr[i];
		var pointTop = rectPoints[0][1];
		var pointLeft = rectPoints[0][0];
		var pointBottom = rectPoints[1][1];
		var pointRight = rectPoints[1][0];
		var clipPoint = "clip:rect("+pointTop+"px "+pointRight+"px "+pointBottom+"px "+pointLeft+"px);";
		//$('dbg').innerHTML = $('dbg').innerHTML + clipPoint + "<br/>";
		var imgClip = Builder.node("div",{style: "position:absolute;"+clipPoint},[
		  Builder.node("img",{src: imgTag, alt: imageDesc, title: imageDesc, width: "200px", height: "300px"})]);
		$('viewImage').appendChild(imgClip);
	}
}