var dragElem, minY = 0, minX = 0, maxY = 0, maxX = 0, initBox = false;

function __initSizeControls() {
  var fldHeight = $('height');
  var fldWidth = $('width');
  Event.observe(fldHeight, 'keyup', updateSizes);
  Event.observe(fldWidth, 'keyup', updateSizes);
  
  // this ensures a price and area are entered on page load if
  // come back from another page but data transfer lost for the session
  // price and area.
  initBox = true;
  updateSizes();  
  
}

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        var css = document.defaultView.getComputedStyle(oElm, null);
        strValue = css ? css.getPropertyValue(strCssRule) : null;
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

function engage(e) {
  xStart = parseInt(e.clientX);
  yStart = parseInt(e.clientY);
  
  element = Event.element(e);
  if (element.nodeName.toUpperCase() != 'DIV') {
    while (element.nodeName.toUpperCase() != 'DIV') {
      element = element.parentNode;
    }
  }    
  dragElem = element;
  
  var top = parseInt(getStyle(dragElem,'top'));
  var left = parseInt(getStyle(dragElem,'left'));
  
  dragElem.style.top = top + 'px';
  dragElem.style.left = left + 'px';
  
  document.onmouseup = disengage;
  document.onmousemove = drag;
  return false;  
}

function drag(e) {
  
  e=(e)?e:event;
  xDelta = xStart - parseInt(e.clientX);
  yDelta = yStart - parseInt(e.clientY);
  xStart = parseInt(e.clientX);
  yStart = parseInt(e.clientY);
  yEnd = (parseInt(dragElem.style.top)  - yDelta);
  xEnd = (parseInt(dragElem.style.left) - xDelta);
  if (yEnd >= minY && yEnd <= maxY) {
    dragElem.style.top = yEnd + 'px';
    $('cropy').value = yEnd - 0;
  }
  if (xEnd >= minX && xEnd <= maxX) {
    dragElem.style.left = xEnd + 'px';
    $('cropx').value = xEnd - 0;
  }  
  
  // DEBUG: $('data').replaceChild(document.createTextNode($('cropx').value + ":" + $('cropy').value), $('data').firstChild);
   
}

function disengage(e) {
  document.onmouseup = null;
  document.onmousemove = null;
  dragElem = null;  
  
  var tool = $('tool');
   var fldsizes = document.getElementById('AddtochartUC1_hdnCustomsizess'); 
   fldsizes.value = tool.style.width.replace('px','') + "_" +  tool.style.height.replace('px','') + "_" + tool.style.left.replace('px','') + "_" + tool.style.top.replace('px','');
 
   var fldsizes2 = document.getElementById('CustommmProductSizeUC21_hdn_cps');
   fldsizes2.value = tool.style.width.replace('px','') + "_" +  tool.style.height.replace('px','') + "_" + tool.style.left.replace('px','') + "_" + tool.style.top.replace('px','');
}


function generateCroppingTool(w, h,ratio) {
  
  
  //w = w * 1000;
  //h = h * 1000;
  w = w * ratio;
  h = h * ratio;
  var preview = $('sample');  
  var preview_height = parseInt(preview.offsetHeight - 10);
  var preview_width = parseInt(preview.offsetWidth - 10);

/* debug
var data = document.createElement('div');
data.id = "data";
$('container').appendChild(data);
*/

  var tool = $('tool');
  if (!tool) {
    tool = document.createElement('div');
    txt1 = document.createElement('span');
    txt1.id = "help1";
    //txt1.appendChild(document.createTextNode('Bu bölge girdiginiz ölçülerinize göre basilacak alani gösterir.'));
    var toptext = document.getElementById('CustommmProductSizeUC21_hdnTopText')
    var bottomtext = document.getElementById('CustommmProductSizeUC21_hdnBottomText')
    txt1.appendChild(document.createTextNode(toptext.value));
    txt2 = document.createElement('span');
    txt2.id = "help2";
    txt2.appendChild(document.createTextNode(bottomtext.value));
    tool.appendChild(txt1);
    tool.appendChild(txt2);
    var preview = $('sample');
    tool.id = 'tool';
    preview.parentNode.style.position = 'relative';
    preview.parentNode.appendChild(tool);
    
    Event.observe(tool, 'mousedown', engage);
    Event.observe(txt1, 'mousedown', engage);
    Event.observe(txt2, 'mousedown', engage);    
    Event.observe(tool.parentNode, 'mousedown', function(e) {Event.stop(e);});
  }
  
  var xratio = preview_width / w;
  var yratio = preview_height / h;
  
  if ((w <= preview_width) && (h <= preview_height)) {
    opt_width = w;
    opt_height = h;
  }
  else if ((xratio * h) < preview_height) {
    opt_width = preview_width;
    opt_height = Math.ceil(xratio * h);
  }
  else {
    opt_width = Math.ceil(yratio * w);
    opt_height = preview_height;
  }
    
  tool = $('tool');
  if (minY == 0) {
    minY = parseInt(getStyle(tool,'top'));
    minX = parseInt(getStyle(tool,'left'));
  }

  tool.style.height = (((opt_height) > 0) ? (opt_height) : 0)  + "px";
  maxY = minY + (preview_height - opt_height);
  if (maxY< minY) {maxY = minY;}
  tool.style.width = (((opt_width) > 0) ? (opt_width) : 0) + "px";
  maxX = minX + (preview_width - opt_width);
  if (maxX < minX) {maxX = minX;}
  
  // DEBUG: data.appendChild(document.createTextNode(opt_width + ":" + opt_height));  
  
  if (initBox) {  
    var offsetx = parseInt($('cropx').value);
    var offsety = parseInt($('cropy').value);
    initBox = false;
  }
  else {
    var offsetx = offsety = 0;
    $('cropx').value = 0;
    $('cropy').value = 0;
  }
  
  tool.style.top = (minY + offsety < h) ? (minY + offsety) + 'px' : minY + 'px';     
  tool.style.left = (minX + offsetx < w) ? (minX + offsetx) + 'px' : minX + 'px';

//arun
   var fldsizes = document.getElementById('AddtochartUC1_hdnCustomsizess'); 
   fldsizes.value = tool.style.width.replace('px','') + "_" +  tool.style.height.replace('px','') + "_" + tool.style.left.replace('px','') + "_" + tool.style.top.replace('px','');
  var fldsizes2 = document.getElementById('CustommmProductSizeUC21_hdn_cps'); 
   fldsizes2.value = tool.style.width.replace('px','') + "_" +  tool.style.height.replace('px','') + "_" + tool.style.left.replace('px','') + "_" + tool.style.top.replace('px','');

// var fldWidth = $('width');  
 // var fldHeight = $('height');
  var finalWidth = w / ratio; 
  var finalHeight = h / ratio;
 var hdnactSize = document.getElementById('CustommmProductSizeUC21_hdnactSize'); 
 hdnactSize.value = finalWidth+ "_" + finalHeight;
 


}

function updateSizes() {

  var fldWidth = $('width');  
  var fldHeight = $('height');

  var fldPrice = $('ProductInformationUC1_hdnlblPrice');
  //var fldPrice = $('ProductInformationUC1_lblPrice');
  if (!fldPrice) {
    fldPrice = $('ProductInformationUC1_lblPrice');
    
  }
  
  
  var fldArea = $('CustommmProductSizeUC21_lblarea');
  var fldCost = $('CustommmProductSizeUC21_lblsonuc');  
	var width = parseInt(fldWidth.value);
  var height = parseInt(fldHeight.value);
  var valid = true;
  if (isNaN(width)) { fldWidth.value = ''; valid = false; }
  else { fldWidth.value = width; }
  if (isNaN(height)) { fldHeight.value = ''; valid = false; }
  else { fldHeight.value = height; }  
  if (valid) {    
    var area =  parseFloat((width/100) * (height/100));
    if (typeof Number.prototype.toFixed != "undefined") {    
      area = area.toFixed(2);
    }
    fldArea.innerHTML = area;
    var Totalprice = parseFloat(parseFloat(fldPrice.value) * area);
      //var Totalprice = parseFloat(parseFloat(fldPrice.innerHTML) * area);
    if (typeof Number.prototype.toFixed != "undefined") {    
      Totalprice = Totalprice.toFixed(2);
    }
    fldCost.innerHTML = Totalprice;
    
    var hdnsonuc = document.getElementById('CustommmProductSizeUC21_hdnsonuc'); 
	hdnsonuc.value = area + "_" + Totalprice;
      
    if (!window.location.href.match(/originals/)) {
      generateCroppingTool(width, height,1000);
    }
    
     enableTxts();
    
  }
  else {
    fldArea.innerHTML = '';      
    fldCost.innerHTML = '';
    disableTxts();
  }
  
  
}

function updateSizesfeet() {

  var fldWidth = $('widthfeet');
  var fldWidth1 = $('widthInch'); 
  var _widthf = fldWidth.value 
  var _widthi = fldWidth1.value 
  
    var fldHeight = $('heightfeet');
  var fldHeight1 = $('heightInch'); 
  var _heightf = fldHeight.value ;
  var _heighti = fldHeight1.value ;
  
  //var fldHeight = $('height');

  var fldPrice = $('ProductInformationUC1_lblPrice');
   var Unitprice = fldPrice.innerHTML;
  //var fldPrice = $('ProductInformationUC1_lblPrice');
  if (!fldPrice) {
    fldPrice = $('ProductInformationUC1_hdnlblPrice');
     var Unitprice =  fldPrice.value;
  }
  
 
  
  var fldArea = $('CustommmProductSizeUC21_lblarea');
  var fldCost = $('CustommmProductSizeUC21_lblsonucfeet');  
  //var width = parseInt(fldWidth.value);
  //var height = parseInt(fldHeight.value);
  var width = (_widthf * 12 )+ (_widthi * 1 );
  var height = (_heightf * 12 ) + (_heighti * 1 )
  var valid = true;
  if (isNaN(width)) { fldWidth.value = ''; valid = false; }
  else { fldWidth.value = _widthf; fldWidth1.value = _widthi; }
  if (isNaN(height)) { fldHeight.value = ''; valid = false; }
  else { fldHeight.value = _heightf;fldHeight1.value = _heighti;  }  
  if (valid) {    
    //var area =  parseFloat((width/100) * (height/100));
   // var area =  Math.ceil((width * height) / 144);
   var area =  parseFloat((width * height) / 144);
    if (typeof Number.prototype.toFixed != "undefined") {    
      area = area.toFixed(2);
    }
    fldArea.innerHTML = area;
    var _areaValue = parseFloat(area);
    var _priceValue = parseFloat(Unitprice.replace(',','.')) ;
    var Totalprice = _areaValue * _priceValue;
      //var Totalprice = parseFloat(parseFloat(fldPrice.innerHTML) * area);
    if (typeof Number.prototype.toFixed != "undefined") {    
      Totalprice = Totalprice.toFixed(2);
    }
    fldCost.innerHTML = Totalprice;
    
    var hdnsonuc = document.getElementById('CustommmProductSizeUC21_hdnsonuc'); 
	hdnsonuc.value = area + "_" + Totalprice;
      
    if (!window.location.href.match(/originals/)) {
      generateCroppingTool(width, height,10);
    }
    
     enableTxts();
    
  }
  else {
    fldArea.innerHTML = '';      
    fldCost.innerHTML = '';
    disableTxts();
  }
  
  
}


function disableTxts()
{
var txtad =	document.getElementById('CustommmProductSizeUC21_txtadsoyad');
if(txtad){
txtad.disabled = true;
document.getElementById('CustommmProductSizeUC21_txtadsoyad').style.backgroundColor = 'Gray';}
var txtMail = 	document.getElementById('CustommmProductSizeUC21_txtmail');
if(txtMail){
document.getElementById('CustommmProductSizeUC21_txtmail').style.backgroundColor = 'Gray';
txtMail.disabled = true;}
var txtTel =	document.getElementById('CustommmProductSizeUC21_txttelno');
if(txtTel){
txtTel.disabled = true;
document.getElementById('CustommmProductSizeUC21_txttelno').style.backgroundColor = 'Gray';}
	//document.getElementById('CustommmProductSizeUC21_addtobasket').disabled = true;
	
	
	
	//document.getElementById('CustommmProductSizeUC21_addtobasket').style.backgroundColor = 'Gray';
}
function enableTxts()
{
	var txtad	= document.getElementById('CustommmProductSizeUC21_txtadsoyad');
if(txtad){
txtad.disabled = false;
document.getElementById('CustommmProductSizeUC21_txtadsoyad').style.backgroundColor = 'White';}
var txtMail = 	document.getElementById('CustommmProductSizeUC21_txtmail');
if(txtMail){
document.getElementById('CustommmProductSizeUC21_txtmail').style.backgroundColor = 'White';
txtMail.disabled = false;}
var txtTel =	document.getElementById('CustommmProductSizeUC21_txttelno');
if(txtTel){
txtTel.disabled = false;
document.getElementById('CustommmProductSizeUC21_txttelno').style.backgroundColor = 'White';}
}