var ColorNames, ColorIndex, ColorThumbs
var ImgThumbs

getViewportWidth = function() {
  var width = 0;
  if( document.documentElement && document.documentElement.clientWidth ) {
	width = document.documentElement.clientWidth;
  }
  else if( document.body && document.body.clientWidth ) {
	width = document.body.clientWidth;
  }
  else if( window.innerWidth ) {
	width = window.innerWidth - 18;
  }
  return width;
}

getViewportHeight = function() {
  var height = 0;
  if( document.documentElement && document.documentElement.clientHeight ) {
	height = document.documentElement.clientHeight;
  }
  else if( document.body && document.body.clientHeight ) {
	height = document.body.clientHeight;
  }
  else if( window.innerHeight ) {
	height = window.innerHeight - 18;
  }
  return height;
}

getViewportScrollY = function() {
  var scrollY = 0;
  if( document.documentElement && document.documentElement.scrollTop ) {
	scrollY = document.documentElement.scrollTop;
  }
  else if( document.body && document.body.scrollTop ) {
	scrollY = document.body.scrollTop;
  }
  else if( window.pageYOffset ) {
	scrollY = window.pageYOffset;
  }
  else if( window.scrollY ) {
	scrollY = window.scrollY;
  }
  return scrollY;
}

function vclr(skupic, clr)
{
	document.getElementById('PopDivImgContainer').innerHTML = "<img src='/images/lydias/products/" + skupic + "_" + clr + "_larger.jpg'>"
}

function vimg(iImg) {
	var ImgArr = new Array();
	ImgArr = ImgThumbs.split(',');
	
	if (ImgArr[iImg] != "") {
		document.getElementById('PopDivImgContainer').innerHTML = "<img src='" + ImgArr[iImg] + "'>"
	}
}

function ViewLargeImg(skupic, offset)
{
	var a;
	var msgHTML;
	var divWidth = 490;
	var divHeight = 435;
	var ColorsArr = new Array();
	var ImgArr = new Array();
	var x;
	
	if(!document.getElementById('PopDiv')) {
		a = document.createElement('DIV');
		a.id = 'PopDiv';
		document.body.appendChild(a);
	}
	a = document.getElementById('PopDiv');
	
	var setX = ( getViewportWidth() - divWidth ) / 2;
	var setY = ( getViewportHeight() - divHeight ) / 2;
	if( setX < 0 ) setX = 0;
	if( setY < 0 ) setY = 0;
	
	loadVeil()
	
	
	ImgArr = ImgThumbs.split(',');
	msgHTML = ""
	msgHTML = msgHTML + "<div id='PopDivImgContainer'>";
	if (ImgArr.length > offset) {
		msgHTML = msgHTML + "<img src='" + ImgArr[offset] + "' alt='' title=''>";
	}
	msgHTML = msgHTML + "</div>";
	msgHTML = msgHTML + "<div id='PopDivThumbs'>";
	for(i=0; i<ImgArr.length; i++) { 
		if (ImgArr[i]  != "") {
			msgHTML = msgHTML + "<div><a href=\"javascript:vimg('" + i + "')\"><img src='" + ImgArr[i] + "' height=60 alt=''></a></div>";
		}
	}
	msgHTML = msgHTML + "</div>";
	msgHTML = msgHTML + "<div id='PopDivClose'><a href='javascript:hideVeil()'>close window</a></div>";
	
	a.innerHTML = msgHTML
	
	a.style.left = setX + "px";
	a.style.top = getViewportScrollY() + setY + "px";
	a.style.display = 'block';
}

function hideVeil() {
	var veil = document.getElementById('veil');
	if(veil.style.display == 'block') veil.style.display = 'none';

	if(!document.getElementById('PopDiv')) {
		a = document.createElement('DIV');
		a.id = 'PopDiv';
		document.body.appendChild(a);
	}
	a = document.getElementById('PopDiv');
	a.style.display = 'none'; 
}

function loadVeil() {
	var isIE  = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false; var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;

	var veil = document.getElementById('veil');
	veil.style.height = (document.body.offsetHeight > document.body.scrollHeight ? document.body.offsetHeight : document.body.scrollHeight)+'px';
	veil.style.width = 	(isIE ? document.body.clientWidth : document.width)+'px';
	veil.style.filter = 'alpha(opacity=15)';
	veil.style.top = 0;
	veil.style.left = 0;
	veil.style.display = 'block';
}