function changePics(id){  
  idd = id;
  setTimeout("bbbb()", 100);
  return false;
}
  
function bbbb(){
   var el = document.getElementById(idd);
   changePic(el.src, idd);
}

function addImage(fileName){
    $("#modelImg").attr("src", fileName);
}

var xPlace = 0;
var yPlace = 0;
var wWidth = 0;
var hWidth = 0;

function showHideControlBox(){
  if (document.getElementById("showHide").checked){
    updatePic("full/controlBox.png", "box");
  } else {
    updatePic("images/empty.png", "box");
  }
 }

	function changePic(src, id){
		updatePic(src, id);
	}
	
	function updatePic(filename, id){
	 if (id == undefined || id != "box"){
      $("#showHide").attr("checked",false);
   }
		var mel = document.getElementById("hairPlace");
		mel.src = "images/loading.png";

    var pos = $("#imgPlace").position();
    var left = pos.left + 28;
    var top = pos.top + 25;
    var width = 170;
    
 	 $("#hairPlace").css({
      "top" :top + 'px',
      "left" :left + 'px',
      "width" :width + 'px'
    });

    filename = filename.replace("original", "");
    var idx = filename.lastIndexOf("/demo/");
    filename = filename.substring(0, idx) + filename.substring(idx).replace("/demo/", "/hairstyle/");
    //filename = filename.replace("/demo/", "/hairstyle/");
    filename = filename.replace(".jpg", ".png");
    
    $("#hairPlace").attr("src", filename);
  }

	function moveLeft(){
		if (xPlace <= 0) return;
		xPlace--;
		$("#modelImg").css({"left" :xPlace + 'px'});
	}
	function moveRight(){
		if (xPlace > 100) return;
		xPlace++;
		$("#modelImg").css({"left" :xPlace + 'px'});
	}
	function moveUp(){
		if (yPlace <= 0) return;
		yPlace--;
		$("#modelImg").css({"top" :yPlace + 'px'});
	}
	function moveDown(){
		if (yPlace > 600) return;
		yPlace++;
		$("#modelImg").css({"top" :yPlace + 'px'}); 
	}

	function zoomIn(){
		wWidth+=2;
		xPlace-=1;
		yPlace-=1;

		updateModel();
	}

	function zoomOut(){
		wWidth-=2;
		xPlace+=1;
		yPlace+=1;
	
		updateModel();
	}

	function updateModel(){
	 $("#modelImg").css({
      "top" :yPlace + 'px',
      "left" :xPlace + 'px',
      "width" :wWidth + 'px'
    });
	}
	
	var origWidth;
	var origHeight;
	function resetPos(){
	  wWidth=origWidth;

    var pos = $("#imgPlace").position();
		xPlace = pos.left + 20;
		yPlace = pos.top + 18;
	
		updateModel();
	}
	
	function init(){
	  origWidth = 190;
    resetPos();
  }
	
	$(document).ready(function(){
	   init();
	   $("#btnPrint").click(function() {
        fillForm("print");
    });
	   $("#btnEmail").click(function() {
        fillForm("email");
    });
	   $("#btnBefore").click(function() {
        fillForm("before");
    });

	   $("#styleEl").change(function() {
        doNavigator(0);
    });

	 });
	
	function updateNavigator(val){
    alert(val);
  }
function fillForm(actionName){
  $("#actionName").val(actionName);
  var pos = $("#modelImg").position();
  var imgX = pos.left;
  var imgY = pos.top;
  var imgH = $("#modelImg").height();
  var imgW = $("#modelImg").width();

  var pos = $("#hairPlace").position();
  var hairX = pos.left;
  var hairY = pos.top;
  var hairH = $("#hairPlace").height();
  var hairW = $("#hairPlace").width();

  var minY = imgY;
  if (minY > hairY) minY = hairY;
  imgY -= minY;
  hairY -= minY;

  var minX = imgX;
  if (minX > hairX) minX = hairX;
  imgX -= minX;
  hairX -= minX;
  
  $("#imgX").val(imgX);
  $("#imgY").val(imgY);
  $("#imgH").val(imgH);
  $("#imgW").val(imgW);

  $("#hairX").val(hairX);
  $("#hairY").val(hairY);
  $("#hairH").val(hairH);
  $("#hairW").val(hairW);
  
  var hairName = $("#hairPlace").attr("src");
  var imgName = $("#modelImg").attr("src");
  $("#hairName").val(hairName);
  $("#imgName").val(imgName);

  document.getElementById("printForm").submit();
}