var mouseOffset = null;
var dragObject  = null;
var curTargetObject=null;
var iZoom = false;
var dragable = false;

// xx - already defined
//var blankImage = "<img src='img/big.jpg' price='0' width:'28' height:'36'>";

// xx - era src=\"img/medium/{1}.jpg\"
// var strImg = " <img style=\"width: 28px; height:36px;\" procode=\"{1}\" productname=\"{0}\" price=\"{2}\" class=\"DragImage\" name=\"TargetImage\" src=\"img/medium/{1}.jpg\" onmouseover=\"Javascript:xshowTip(event,'<div class=menuitems>{0}<br>${2}</div>','','',this)\" onmouseout=\"Javascript:delayhidemenu()\" />";

// minithumb
var strImg = " <img style=\"width: 38px; xheight:36px;\" procode=\"{1}\" productname=\"{0}\" "+
             " price=\"{2}\" class=\"DragImage\" name=\"TargetImage\" src=\"{3}\" "+
             " minithumb=\"{3}\" "+
             " onmouseover=\"Javascript:xshowTip(event,'<div class=menuitems>{0}<br>${2}</div>','','',this)\"" +
             " onmouseout=\"Javascript:delayhidemenu()\" />";

getMouseOffset = function (target, ev){
	ev = ev || window.event;
	var docPos    = getPosition(target);
	var mousePos  = mouseCoords(ev);
	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
mouseCoords = function (ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,
		y:ev.clientY + document.documentElement.scrollTop  - document.documentElement.clientTop
	};
}
makeDraggable = function (item){
	if(!item) return;
	item.onmousedown = function(ev){
		dragObject  = this;		
		mouseOffset = getMouseOffset(this, ev);		
		return false;
	}
}
/*-------------------------
* Mouse Event
* 
*---------------------------------------------------*/
mouseMove = function (ev){
    ev = ev || window.event;		
	var mousePos = mouseCoords(ev);	
	if(dragObject){	   
		dragObject.style.position = 'absolute';
		dragObject.style.filter = "alpha(opacity=100)";
		dragObject.style.top      = (mousePos.y - mouseOffset.y) + 'px';// - mouseOffset.y
		dragObject.style.left     = (mousePos.x - mouseOffset.x) + 'px';// - mouseOffset.x
		//dragObject.setAttribute("onmouseout","javascript:this.innerHTML='';this.style.display='none'");

		var img = dragObject.getElementsByTagName('img')[0];

		dragObject.style.zIndex=101;
		
		if(dragObject.id=="DragObject"){
		    Zoom(mousePos);
			$("DragTrashcan").innerHTML = "";
		}

		dragable = false;
	}
	//Helper(mousePos);
	if(dragObject) return false;
}

Helper = function (mousePos)
{
    var targetContainer = $("TargetContainer");
	var targetZone = getPosition(targetContainer);   	
	$("TargetL").value = getPos(targetContainer,"Left");
	$("TargetT").value = getPos(targetContainer,"Top");	
	$("TargetsW").value = targetContainer.offsetWidth;
	$("TargetH").value = targetContainer.offsetHeight;	
	$("DragX").value = getPosition($("DragTrashcan")).x + parseInt($("DragTrashcan").offsetWidth/2);
	$("DragY").value = getPosition($("DragTrashcan")).y + parseInt($("DragTrashcan").offsetHeight/2);	
	$("mouseX").value = mousePos.x;
	$("mouseY").value = mousePos.y; 	
}

Zoom = function (mousePos)
{
    var targetContainer = $("TargetContainer");
	var objPos = getPosition(targetContainer);
	if(IsHit($("DragObject"),targetContainer))
	{
		targetContainer.style.border='';
	    //Zoom Photo When dragObject in TargetZone
		var htmlImg = dragObject.innerHTML;
		var strZoomFormat = " style='width:38px'>";
//		var strZoomFormat = " style='width:28px'>";
		htmlImg = htmlImg.substring(0,htmlImg.lastIndexOf(">")) + strZoomFormat;
		$("DragObject").style.left = (mousePos.x-15)+"px";
		$("DragObject").style.top = (mousePos.y-15)+"px";
		dragObject.innerHTML = htmlImg;
	}
	else
	{
	    dragObject.innerHTML  = $("DragObjectClone").innerHTML;
	}
}
IsHit = function (objDrag,objTarget)
{
    DragPos  = getPosition(objDrag);
    TargetPos = getPosition(objTarget);
    
    var X1 = TargetPos.x;
    var X2 = TargetPos.x + objTarget.offsetWidth;
    var Y1 = TargetPos.y - 50;
    var Y2 = TargetPos.y + objTarget.offsetHeight;
        
    var A_X = DragPos.x + parseInt(objDrag.offsetWidth/2);
    var A_Y = DragPos.y + parseInt(objDrag.offsetHeight/2);
    
    var A1_X = DragPos.x;
    var A1_Y = DragPos.y;
    
    var A2_X = DragPos.x + objDrag.offsetWidth;
    var A2_Y = DragPos.y;
    
    var A3_X = DragPos.x;
    var A3_Y = DragPos.y + objDrag.offsetHeight;
    
    var A4_X = DragPos.x + objDrag.offsetWidth;
    var A4_Y = DragPos.y + objDrag.offsetHeight;
    
    
    if((A_X>X1&&A_X<X2&&A_Y>Y1&&A_Y<Y2)
       ||
       (A1_X>X1&&A1_X<X2&&A1_Y>Y1&&A1_Y<Y2)
       ||
       (A2_X>X1&&A2_X<X2&&A2_Y>Y1&&A2_Y<Y2)
       ||
       (A3_X>X1&&A3_X<X2&&A3_Y>Y1&&A3_Y<Y2)
       ||
       (A4_X>X1&&A4_X<X2&&A4_Y>Y1&&A4_Y<Y2)){
       
       return true;
       
    }
    return false;
}

mouseUp = function (ev){  
	dragable = true;
    ev  = ev || window.event;
    var mousePos = mouseCoords(ev);    
    //var targets = document.getElementsByClassName('DropTarget');

    for(var i = 1 ; i <= 18 ; i++){ // number of pieces
        var targObj = $('Target'+i);
		if(!dragObject||!targObj)
		    return;
	    if(IsHit(dragObject,targObj))
        {
            try{
				var img = dragObject.getElementsByTagName('img')[0];
				if(dragObject.id=="DragTrashcan")
				{
					curTargetObject.innerHTML = blankImage;
				}
				else if($('DragTrashcan'))
				{
					$('DragTrashcan').innerHTML ="";
					$('DragTrashcan').style.display = 'none';
					$('DragTrashcan').innerHTML = null;
				}
				targObj.innerHTML = "";
				if(img.getAttribute("procode")!=null&&img.getAttribute("procode")!="")
				{

// TODO: ver se existe imagem especifica miniatura

//          var minithumb = img.getAttribute("src"); // copy medium thumb to small thumb
          var minithumb = img.getAttribute("minithumb");

// COOKIE TOO BIG, shorten cookie
// http://store.nomination.us/images-products/L-000C4BT.jpg -> /images-products/L-000C4BT.jpg

          minithumb = minithumb.replace(/http:\/\/.+store.nomination.us\//g, "/");
          minithumb = minithumb.replace(/http:\/\/.+tarantulaprojects.com\//g, "/");

					targObj.innerHTML = String.format(strImg,img.getAttribute("productName"),img.getAttribute("procode"),img.getAttribute("price"),minithumb);

				}
				else
				{
					targObj.innerHTML = blankImage;
				}
                
	            TrasherDo();                		
	            SaveLayout();
                return;
	        }catch(ex){
	           return;
	        }  
        }
		else if(dragObject.id=="DragTrashcan")
		{
			curTargetObject.innerHTML = blankImage;
		}
    }
	

    try{
        TrasherDo(); 
    }
    catch(ex){}    
}

TrasherDo = function (){
	try{
		if(dragObject.id=="DragTrashcan"){
			SaveLayout();
		}   
		dragObject.innerHTML = "";
		dragObject.style.display = 'none';
		dragObject = null; 	
	}catch(e){}
}


/*-------------------------
* Data 
* 1)Javascript Cookies
* 2)Php Session
* 3)AJax Update
*---------------------------------------------------*/

GetLayout = function () {

	var OrderTotal = 0;
    var dt = Get_Cookie(composable_cookie_name);
    var data = null;
	if(dt!=null&&dt!="")
	{
		try{eval("data={'a':["+dt+"]};");}catch(e){}
    }
   
    var strTable     = "<table xstyle='border: 1px solid' cellpadding='0' cellspacing='0' border='1' xheight=47><tr>{0}</tr></table>";
    var strTD        = "<td valign=top><div id='Target{0}' class='DropTarget' onMouseOver='Javascript:if(dragable)ActiveDrag2(this);'>{1}</div></td>\r\n";
    var strBlankHtml = blankImage;
    
    var htmlTarget = "";

	if(data==null)
	{
    for(var i = 1 ; i <= 18 ; i++) { // number of pieces
      htmlTarget += String.format(String.format(strTD,i,strBlankHtml));
    }
	}
	else
	{
		try{$("chkStarter").checked  = (data['a'][0][0]==0) ? false:true;}catch (e){$("chkStarter").checked=false;}
		try{$("chkAssemble").checked = (data['a'][0][1]==0) ? false:true;}catch (e){$("chkAssemble").checked=false;}

    // 18 number of pieces

		for(var i=1; i <= 18 ; i++)
		{
			var n,product_id,price,minithumb;
			try{n             = data['a'][i][0];}catch (e){n = "";} // name (alt)
			try{product_id    = data['a'][i][1];}catch (e){product_id = "";} // Code, Image jpg
			try{price         = data['a'][i][2];}catch (e){price      = "";}
			try{minithumb     = data['a'][i][3];}catch (e){minithumb  = "";}
			if(n!="") {
				htmlTarget += String.format( String.format(strTD,i, String.format(strImg,n,product_id,price,minithumb) ) );
      } else {
				htmlTarget += String.format(String.format(strTD,i,strBlankHtml));
      }
		}
	}

  htmlTarget = String.format(strTable,htmlTarget);
  return htmlTarget;
}


SaveLayout = function (){

  //var targets = document.getElementsByClassName('DropTarget');

	var OrderTotal = 0;
	var spnTotalItem = 0;
    var customValue = "[";
	$("prductcodes").value = "";

	if($("chkStarter").checked)
	{
		customValue +=  "1,";
		OrderTotal += 0.00;  // xx - bracelet price
		$("prductcodes").value = "XXX_BRACELET_ID"; // bracelet id
	}
	else
		customValue +=  "0,";

	if($("chkAssemble").checked)
	{
		customValue +=  "1";
		OrderTotal += 0.00; // price
		if( $("prductcodes").value != "" )
			$("prductcodes").value += "+XXX_PRODUCT_ID";
		else
			$("prductcodes").value = "XXX_PRODUCT_ID";
	}
	else
		customValue +=  "0";
    customValue += "]";

    for(var i = 1 ; i <= 18 ; i++){ // Number of pieces
		 var targObj = $('Target'+i);
		 dragimg = targObj.getElementsByTagName('img');
		 var name          = (dragimg[0].getAttribute("productname")==null) ? '' : dragimg[0].getAttribute("productname");
		 var code          = (dragimg[0].getAttribute("procode")==null)     ? '' : dragimg[0].getAttribute("procode");
		 var price         = (dragimg[0].getAttribute("price")&&!isNaN(dragimg[0].getAttribute("price"))==null) ? 0 : dragimg[0].getAttribute("price");
//     var minithumb     = (dragimg[0].getAttribute("minithumb")==null) ? '' : dragimg[0].getAttribute("minithumb");
     var src           = (dragimg[0].getAttribute("src")==null)         ? '' : dragimg[0].getAttribute("src");

     var minithumb = src; // SRC of the small thumb in the composable bracelet

// COOKIE TOO BIG, shorten cookie
// http://store.nomination.us/images-products/L-000C4BT.jpg -> /images-products/L-000C4BT.jpg
          minithumb = minithumb.replace(/http:\/\/.+store.nomination.us\//g, "/");
          minithumb = minithumb.replace(/http:\/\/.+tarantulaprojects.com\//g, "/");

		 if (name!='') {
			 spnTotalItem += 1;
			 OrderTotal += parseFloat(price);
			 if( $("prductcodes").value != "" )
				 $("prductcodes").value += "+"+code;
			 else
				 $("prductcodes").value = code;
		 }
//		 customValue += ",['"+name+"',"+"'"+code+"',"+"'"+price+"']";
		 customValue += ",['"+name+"',"+"'"+code+"',"+"'"+price+"',"+"'"+minithumb+"']";
    }


	$('spnTotalItem').innerHTML = String.format("{0}",spnTotalItem);
	OrderTotal = Math.round(OrderTotal*100)/100;
	$('OrderTotal').value = FormatNumber(OrderTotal,2);

//alert(OrderTotal); // xx - price (not including bracelet price)

  // xx
  bracelet_subtotal_update();

  Set_Cookie(composable_cookie_name,customValue,1);
  //customValue = customValue.substring(0,customValue.lastIndexOf("||"));
}


/*-------------------------
* Custom Function
* 
*---------------------------------------------------*/
ActiveDrag2 = function (target){
     var targetHTML = target.innerHTML;
     if(targetHTML.indexOf("blank")>-1)
        return;
     else
     {
        curTargetObject = target;
        var DragTrashcan = $("DragTrashcan");
        DragTrashcan.innerHTML = targetHTML;
        DragTrashcan.style.display = '';
        DragTrashcan.style.left = getPos(target,"Left") + "px";

        var target_top = getPos(target,"Top");
// xxxxxxxxxx
// TODO: Hardcoded (was 248 in chrome/firefox, 247 in IE). Wrong position sometimes?
//target_top = 247;
//alert(targetHTML);

        DragTrashcan.style.top = target_top + "px";

//alert(target_top);

        
     }
}

ActiveDrag = function (indx,imgsrc,price,productName,productCode,minithumb)
{
	SetDHTML("DragObject","Product",indx,imgsrc,price,productName,productCode,minithumb);
}

ClearDrag = function (indx)
{
	if($("Td"+indx))
		$("Td"+indx).className = "NonActiveTD";
}

SetDHTML = function (dragObjectId,preImage,indx,imgsrc,price,productName,productCode,minithumb)
{

// xx - removed 'var =' (obj is used in <img below)
    DivdragObject = $(dragObjectId);

    //add productCode,
    var inerImg = "<img src='{0}' name='TargetImage' class='DragImage' price='{1}' productName='{2}' procode='{3}' minithumb='{4}'>";

// xx - TODO: apagar clone onmouseout
//    var inerImg = "<img src='{0}' name='TargetImage' class='DragImage' price='{1}' productName='{2}' procode='{3}' onMouseOut=\"DivdragObject.style.display='none'\">";
    if($("Td"+indx))
        $("Td"+indx).className = "ActiveTD";    
                
//    var DivdragObject = $(dragObjectId);
    var Product = $(preImage + indx);

    $("DragObjectClone").innerHTML = DivdragObject.innerHTML = String.format(inerImg,imgsrc,price,productName,productCode,minithumb);

    DivdragObject.style.display = "";        
    DivdragObject.style.left = getPos(Product,"Left") + "px";

// xx - wrong (old method)
    DivdragObject.style.top = getPos(Product,"Top") + "px";  
// xx - "composable_pieces" (div with scroll) is hardcoded
// xx - TODO: mouseover pecinhas esta fora do div
    DivdragObject.style.top = getPos_insideDiv(Product,"Top","composable_pieces") + "px";  
    
}

/*
Number Format
*/
function FormatNumber(srcStr,nAfterDot){
    var srcStr,nAfterDot;
    var resultStr,nTen;
    srcStr = ""+srcStr+"";
    strLen = srcStr.length;
    dotPos = srcStr.indexOf(".",0);
    if (dotPos == -1){
        resultStr = srcStr+".";
        for (i=0;i<nAfterDot;i++){
            resultStr = resultStr+"0";
        }
        return resultStr;
    } else{
		var zhengshu = srcStr.substring(0,dotPos);
		var xiaoshu = srcStr.substr(dotPos,3);
		if(xiaoshu.length != 3){
			xiaoshu = xiaoshu + "0000";
			xiaoshu = xiaoshu.substr(0,3);
			//alert(xiaoshu);
		}
		return zhengshu+xiaoshu;
    }
}

/*-------------------------
* Declare Event
* 
*---------------------------------------------------*/
document.onmousemove = mouseMove;
document.onmouseup   = mouseUp;
window.onload = function(){   
    makeDraggable($("DragObject"));    
    makeDraggable($("DragTrashcan"));    
}