var bxs,bxe,fxs,fxe,ys,ye,ta,ia,ie,st,ss,ft,fs,xp,yp,ci,t,tar,tarl;
ta = document.getElementById(thumbid);
ia = document.getElementById(imgid);
t = ta.getElementsByTagName('li')
ie = document.all ? true : false;
st = 3;
ss = 10;
ft = 10;
fs = 5;
xp,yp = 0;
//document.onmousemove = getPos;
/****************************************************************************/
var bxs_,bxe_,fxs_,fxe_,ys_,ye_,ta_,ia_,ci_,t_,tar_,tarl_;
ta_ = document.getElementById(thumbid_);
ia_ = document.getElementById(imgid);
t_ = ta_.getElementsByTagName('li')
st = 3;
ss = 10;
ft = 10;
fs = 5;
xp,yp = 0;

function slideShow(){
  var taw = ta.parentNode.offsetWidth;
  var taa = taw / 4;
  bxs = leftPos(ta);
  bxe = bxs + taa;
  fxe = bxs + taw;
  fxs = fxe - taa;
  ys = topPos(ta);
  ye = ys + ta.offsetHeight;
  var len = t.length;
  //display arrows
  if(len <= 7){
	  	$("#right_arrow").css("display","none"); 
	  	$("#left_arrow").css("display","none"); 
  }
  tar = [];
  for(i=0; i < len; i++){
    var id = t[i].value;
    tar[i] = id;
    t[i].onclick = new Function("getImg('" + id + "')");
  }
  tarl = tar.length;
  getImg($("#product_id").val());
  /******************************************************/
	var taw_ = ta_.parentNode.offsetWidth;
  	var taa_ = taw_ / 4;
  	bxs_ = leftPos(ta_);
  	bxe_ = bxs_ + taa_;
  	fxe_ = bxs_ + taw_;
  	fxs_ = fxe_ - taa_;
  	ys_ = topPos(ta_);
  	ye_ = ys_ + ta_.offsetHeight;
  	var len = t_.length;
  	tar_ = [];
  	for(i=0; i < len; i++){
    	var id_ = t_[i].value;
    	tar_[i] = id_;
    	t_[i].onclick = new Function("getImg('" + id + "')");
    	if(i == 0) {
      		//getImg(id_);
    	}
  	}
  	tarl_ = tar_.length;
}

function scrlThumbs(d){
  clearInterval(ta.timer);
  var l;
  if(d == -1){
    l = 0;
  }else{
    l = t[tarl-1].offsetLeft - (ta.parentNode.offsetWidth - t[tarl-1].offsetWidth) + 10;
  }
  if(l >= 0){
  	ta.timer = setInterval(function(){scrlMv(d,l)},st);
  }
}

function scrlMv(d,l){
  ta.style.left = ta.style.left || '0px';
  var left = ta.style.left.replace('px','');
  if(d == 1){
    if(l - Math.abs(left) <= ss){
      cnclScrl(ta.id);
      ta.style.left = '-' + l + 'px';
    }else{
      ta.style.left = left - ss + 'px';
    }
  }else{
    if(Math.abs(left) - l <= ss){
      cnclScrl(ta.id);
      ta.style.left = l + 'px';
    }else{
      ta.style.left = parseInt(left) + ss + 'px';
    }
  }
}

function cnclScrl(){clearTimeout(ta.timer)}

function getImg(id){
  if(auto){clearTimeout(ia.timer)}
  /*if(ci != null){
    var ts = ia.getElementsByTagName('img');
    var tsl = ts.length;
    var x = 0;
    for(x; x < tsl; x++){
      if(ci.id != id){
        var o = ts[x];
        clearInterval(o.timer);
        o.timer = setInterval(function(){fdOut(o)},fs);
      }
    }
  }*/
  var i;
  if(!document.getElementById(id)){
  	cnclScrl();
  	var webhost = $("#baseurl").val();
  	$.ajax({
		type: "POST",
	    url: webhost + "store/product",
	    data: "productId=" + id,
	    dataType: "json",
	    success: function(result){
  		
  			/*if( id == 27 ){ // 27:Ike--iTouch
  				$("#sold").show();
  			}*/
  		
	    	$("#product_id").val(id);
	    	$("#product_title").val(result.product_name);
			$("#type_name").html(result.product_name);
			if(result.display_meet == 1){
				var character = "Meet " + result.character_name;
			}else{
				var character = result.character_name;
			}
			$("#character_name").html(character);
			$("#description").html(result.product_description);
			$("#price").html("Price:$" + result.product_price);
			$("#buy_link").html('<a href="' + result.product_buy_link + '"><img src="' + result.webhost + 'images/buy_now.png" /></a>');
			$("#image").html('<img id="'+result.id+'" style="opacity: 1;" src="' + result.webhost + result.product_picture_img + '" />');
			var product_thumbnails = result.product_thumbnails;
			if(product_thumbnails.length > 0){
				var thumbnails = "";
				for(var i=0; i < product_thumbnails.length; i++) {
					thumbnails += '<li value="' + product_thumbnails[i].id + '"><img alt="' + product_thumbnails[i].product_picture_name + '" src="' + result.webhost + product_thumbnails[i].product_picture_thumbnail+'" onclick="getImg_(\'' + product_thumbnails[i].id + '\', \'' + product_thumbnails[i].product_picture_img + '\', \'' + result.webhost + '\')" width="68" height="80" /></li>';
				}
				tarl_ = product_thumbnails.length;
				ta_.style.left = '0px';
				$("#thumbs_").html(thumbnails);
			}
			var product_compatibles = result.product_compatibles;
			if(product_compatibles.length > 0){
				var compatibles = "<p class='compatible'>Compatible with:</p><div class='clear'></div>";
				for(var i=0; i < product_compatibles.length; i++) {
					compatibles += '<img src="' + result.webhost + product_compatibles[i].product_compatible_icon + '" alt="' + product_compatibles[i].product_compatible_name + '" width="60" height="48" />';
					compatibles += '<div class="clear"></div>';
					compatibles += '<div class="compatible_title">' + product_compatibles[i].product_compatible_name + '</div>';
					compatibles += '<div class="clear"></div>';
				}
				$("#compatibles").html(compatibles);
			}
	   	}
	}); 
  	
  	
  	
	//$("#image").hide('slow',function(){$("#image").show('slow');});
  	 
    /*i = document.createElement('img');
    ia.appendChild(i);
    i.id = id;
    i.av = 0;
    i.style.opacity = 0;
    i.style.filter = 'alpha(opacity=0)';
    i.src = imgdir + '/' + id + imgext;*/
    
  }else{
    i = document.getElementById(id);
    clearInterval(i.timer);
  }
  //i.timer = setInterval(function(){fdIn(i)},fs);
}

function imgNav(d){
	scrlThumbs(d);
	
	
	return;
	
  var curr = 0;
  for(key in tar){
    if(tar[key] == ci.id){
      curr = key;
    }
  }
  if(tar[parseInt(curr) + d]){
    getImg(tar[parseInt(curr) + d]);
  }else{
    if(d == 1){
      getImg(tar[0]);
    }else{
      getImg(tar[tarl - 1]);
    }
  }
}

function autoSlide(){
  ia.timer = setInterval(function(){imgNav(1)}, autodelay * 1000);
}

function fdIn(i){
  if(i.complete){
    i.av = i.av + fs;
    i.style.opacity = i.av / 100;
    i.style.filter = 'alpha(opacity=' + i.av + ')';
  }
  if(i.av >= 100){
    if(auto){autoSlide()}
    clearInterval(i.timer);
    ci = i;
  }
}

function fdOut(i){
  i.av = i.av - fs;
  i.style.opacity = i.av / 100;
  i.style.filter = 'alpha(opacity=' + i.av + ')';
  if(i.av <= 0){
    clearInterval(i.timer);
    if(i.parentNode){i.parentNode.removeChild(i)}
  }
}

function getPos(e){
  if(ie){
    xp = event.clientX + document.body.scrollLeft;
    yp = event.clientY + document.body.scrollTop;
  }else{
    xp = e.pageX;
    yp = e.pageY;
  }  
  if(xp < 0){xp = 0}
  if(yp < 0){yp = 0}
  if(xp > bxs && xp < bxe && yp > ys && yp < ye){
    scrlThumbs(-1);
  }else if(xp > fxs && xp < fxe && yp > ys && yp < ye){
    scrlThumbs(1);
  }else{
    cnclScrl();
  }
}

function leftPos(t){
  var left = 0;
  if(t.offsetParent){
    while(1){
      left += t.offsetLeft;
      if(!t.offsetParent){break}
      t = t.offsetParent;
    }
  }else if(t.x){
    left += t.x;
  }
  return left;
}

function topPos(t){
  var top = 0;
  if(t.offsetParent){
    while(1){
      top += t.offsetTop;
      if(!t.offsetParent){break}
      t = t.offsetParent;
    }
  }else if(t.y){
    top += t.y;
  }
  return top;
}

/****************************************************************************/

function imgNav_(d){
	clearInterval(ta_.timer);
  	var l;
  	if(d == -1){
    	l = 0;
  	}else{
		l = t_[tarl_-1].offsetLeft - (ta_.parentNode.offsetWidth - t_[tarl_-1].offsetWidth) + 10;
  	}
  	if(l >= 0){
  		ta_.timer = setInterval(function(){scrlMv_(d,l)},st);
  	}
}

function scrlMv_(d,l){
  ta_.style.left = ta_.style.left || '0px';
  var left = ta_.style.left.replace('px','');
  if(d == 1){
    if(l - Math.abs(left) <= ss){
      cnclScrl_(ta_.id);
      ta_.style.left = '-' + l + 'px';
    }else{
      ta_.style.left = left - ss + 'px';
    }
  }else{
    if(Math.abs(left) - l <= ss){
      cnclScrl_(ta_.id);
      ta_.style.left = l + 'px';
    }else{
      ta_.style.left = parseInt(left) + ss + 'px';
    }
  }
}

function cnclScrl_(){clearTimeout(ta_.timer)}

function getImg_(id, img, webhost){
	$("#image").html('<img id="' + id + '" style="opacity: 1;" src="' + webhost + img + '" />');
}