//////////////////////////////////////////////////
// Configure stuff below                        //
//////////////////////////////////////////////////


// maximum width for finished image
var imageMaxWidth = 300;


// maximum height for finished image
var imageMaxHeight = 300;


// minimum width for finished image
var imageMinWidth = 100;


// minimum height for finished image
var imageMinHeight = 100;


// default width for finished image
var imageDefaultWidth = 200;


// default height for finished image
var imageDefaultHeight = 200;


// opacity for other doll pieces when one is right-clicked
// must be a number between 0 and 99, the lower the number, the more "see-through" it is
var dollDim = 30;


// info messages for the help message above the creation zone
// message when they rollover a clickable piece in the selection frame
var clickMessage = '<strong>Selecciona partes</strong><br /> Haz click en está imágen para agregarla a la zona de creación de tu muñec@.';


// message when they rollover a draggable piece in the creation zone
var dragMessage = '<strong>Arregla las partes</strong><br /> Manten apretado tu mouse sobre las imágenes para moverlas. Suelta le botón cuando estes conforme. Si le das click con el botón derecho verás más opciones.';


// message when they rollover the trashcan
var trashMessage = '<strong>Basura</strong><br /> Si ya no quieres usar una parte, jálala al bote de basura. Puedes mover la basura si quieres y si la aprietas con el botón derecho verás más opciones.';


//////////////////////////////////////////////////
// End config - edit below at your own risk!    //
//////////////////////////////////////////////////


// some default variables
var draggie,moveL,moveT,x,y,c,scrOfX,scrOfY;
var dragging = false;
var i = 1;
var newimage = new Array();
// info messages for the help message above the creation zone
var infoMessage = new Array(clickMessage, dragMessage, trashMessage);


// remove the intro from the work area
function removeIntro() {
  // make sure there is at least one childnode in the work area, and remove it if it's the intro
  if (document.getElementById('workbox').childNodes.length > 0  
  && document.getElementById('workbox').firstChild.id == 'instruct') {
    // remove intro node
    document.getElementById('workbox').removeChild(document.getElementById('workbox').firstChild);
  }
}


// add a new piece to the work area
function addImage(s) {
  // remove intro if it's there
  removeIntro();
  // create new image
  newimage[i] = new Image();
  // set the src of the element
  newimage[i].src = s;
  // class must be "drag"
  newimage[i].className = "drag";
  // position must be "absolute"
  newimage[i].style.position = "absolute";
  // set it above the page elements in the z index
  newimage[i].style.zIndex = 50;
  // set the coordinates to 0,0
  newimage[i].style.left = "0px";
  newimage[i].style.top = "0px";
  // name the element, probably no need for this
  newimage[i].name = "image"+i;
  // append element to the work area
  document.getElementById('workbox').appendChild(newimage[i]);
  // increment the image counter
  i++;
  return false;
}


// handles event while dragging
function dragMove(e){
  if(!e){
    //for IE
    var e = window.event;
    var eTar = e.srcElement;
  }else{
    //for Standard Compliant
    var eTar = e.target;
  }
  // check if we are dragging
  if (dragging == true){
    // drag with the cursor
    draggie.style.left = (e.clientX-x)+"px";
    draggie.style.top = (e.clientY-y)+"px";
    var trashLocation = findPos(document.getElementById('trashcan'));
    getScreenOff();
    if (draggie.className == 'drag' && 
	(e.clientX+scrOfX) >= trashLocation[0] && 
	(e.clientX+scrOfX) < trashLocation[0]+document.getElementById('trashcan').width && 
	(e.clientY+scrOfY) >= trashLocation[1] && 
	(e.clientY+scrOfY) < trashLocation[1]+document.getElementById('trashcan').height) { 
      document.getElementById('workbox').removeChild(draggie);
      dragging = false;
    }
    return false;
  }
}


// start dragging event
function dragGo(e){
  if(!e){
    //for IE
    var e = window.event;
    var eTar = e.srcElement;
  }else{
    //for Standard Compliant
    var eTar = e.target;
  }
  if(eTar.className != 'menuitems' && eTar.className != 'overmenuitems') {
    hidemenus();
  }
  // check to see if we clicked a draggable
  if (eTar.className == 'drag' || eTar.className == 'trashcan'){
    // set to true so we can drag
    dragging = true;
    // set which element to drag
    draggie = eTar;
    // check position of mouse cursor
    x = e.clientX-parseInt(draggie.style.left+0);
    y = e.clientY-parseInt(draggie.style.top+0);
    // initiate dragging event
    document.onmousemove = dragMove;
    return false;
  }
}


// initiates drag event check when we click mouse button
document.onmousedown = dragGo;


// stop dragging when we release mouse button
function dragStop(){
  if (dragging == true){
    dragging = false;
  }
  return false;
}


// initiates the event to stop dragging when mouse button is released
document.onmouseup = dragStop;


// see how much the screen is scrolled
// makes compatible with small screens
function getScreenOff() {
  scrOfX = 0;
  scrOfY = 0;
  if(window.pageXOffset || window.pageYOffset) {
    //Netscape compliant
    scrOfX = window.pageXOffset;
    scrOfY = window.pageYOffset;
  } else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) {
    //DOM compliant
    scrOfX = document.body.scrollLeft;
    scrOfY = document.body.scrollTop;
  } else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
    //IE6 standards compliant mode
    scrOfX = document.documentElement.scrollLeft;
    scrOfY = document.documentElement.scrollTop;
  }
}


// resize the work area, which will be the size of the finished image
function changeWorkboxSize(){
  // remove intro if it's there
  removeIntro();
  // check for a valid number on width
  if (document.resizeform.bgwide.value > 0) {
    // valid
    var newWbWidth = parseInt(document.resizeform.bgwide.value);
  }else{
    // not valid, set width to the default value and prevent errors
    document.resizeform.bgwide.value = imageDefaultWidth;
    var newWbWidth = imageDefaultWidth;
  }
  // check for max width
  if (newWbWidth > imageMaxWidth) {
    // it's over the max, so make it max instead
    document.resizeform.bgwide.value = imageMaxWidth;
    newWbWidth = imageMaxWidth;
  }
  // check for min width
  if (newWbWidth < imageMinWidth) {
    // it's under the min, so make it min instead
    document.resizeform.bgwide.value = imageMinWidth;
    newWbWidth = imageMinWidth;
  }
  // check for valid number of height
  if (document.resizeform.bgtall.value > 0) {
    // valid
    var newWbHeight = parseInt(document.resizeform.bgtall.value);
  }else{
    // not valid, set height to default value and prevent errors
    document.resizeform.bgtall.value = imageDefaultHeight;
    var newWbHeight = imageDefaultHeight;
  }
  // check for max height
  if (newWbHeight > imageMaxHeight) {
    // it's over the max, so make it max instead
    document.resizeform.bgtall.value = imageMaxHeight;
    newWbHeight = imageMaxHeight;
  }
  // check for min height
  if (newWbHeight < imageMinHeight) {
    // it's under the min, so make it min instead
    document.resizeform.bgtall.value = imageMinHeight;
    newWbHeight = imageMinHeight;
  }
  // change the size of the work area
  document.getElementById('workbox').style.width = newWbWidth+"px";
  document.getElementById('workbox').style.height = newWbHeight+"px";
  // change the value of the image size in the hidden form inputs for creation submit
  document.makerform.bgwide.value = newWbWidth;
  document.makerform.bgtall.value = newWbHeight;
  return false;
}


function preImage(infon,s) {
  document.getElementById('preview').src = s.src;
  if (s.width > s.height) {
    document.getElementById('preview').style.width = '100px';
    var percent = (s.width / 100);
    document.getElementById('preview').style.height = Math.floor(s.height / percent)+'px';
  }else if (s.height > s.width) {
    document.getElementById('preview').style.height = '100px';
    var percent = (s.height / 100);
    document.getElementById('preview').style.width = Math.floor(s.width / percent)+'px';
  }else{
    document.getElementById('preview').style.width = '100px';
    document.getElementById('preview').style.height = '100px';
  }
  document.getElementById('helptext').innerHTML = infoMessage[infon];
  return true;
}


function preSetup(e){
  if(!e){
    //for IE
    var e = window.event;
    var eTar = e.srcElement;
  }else{
    //for Standard/Compliant
    var eTar = e.target;
  }
  if (dragging == false){
    if (eTar.className == 'drag') preImage(1,eTar);
    if (eTar.className == 'trashcan') preImage(2,eTar);
  }
  return;
}


document.onmouseover = preSetup;


function dollSubmit() {
  if (document.getElementById('workbox').childNodes.length == 0 
  || document.getElementById('workbox').firstChild.id == 'instruct') {
    return false;
  }
  var goThrough = 0;
  var imagesJoined,imagesTall,imagesWide,imagesLeft,imagesTop,thisChild;
  var countImages = document.getElementById('workbox').childNodes.length;
  var imageParts = new Array(countImages);
  var imagesHeight = new Array(countImages);
  var imagesWidth = new Array(countImages);
  var imagesX = new Array(countImages);
  var imagesY = new Array(countImages);
  while ((goThrough+1) <= countImages) {
    imageParts[goThrough] = document.getElementById('workbox').firstChild.src;
    imagesHeight[goThrough] = document.getElementById('workbox').firstChild.height;
    imagesWidth[goThrough] = document.getElementById('workbox').firstChild.width;
    imagesX[goThrough] = parseInt(document.getElementById('workbox').firstChild.style.left);
    imagesY[goThrough] = parseInt(document.getElementById('workbox').firstChild.style.top);
    thisChild = document.getElementById('workbox').firstChild;
    document.getElementById('workbox').appendChild(thisChild);
    goThrough++;
  }
  document.makerform.imagessourcesform.value = imageParts.join(",");
  document.makerform.imagestallform.value = imagesHeight.join(",");
  document.makerform.imageswideform.value = imagesWidth.join(",");
  document.makerform.imagesleftform.value = imagesX.join(",");
  document.makerform.imagestopform.value = imagesY.join(",");
}


function clickTop(e){
  if(!e){
    //for IE
    var e = window.event;
    var eTar = e.srcElement;
  }else{
    //for Standard/Compliant    
    var eTar = e.target;
  }
  if (eTar.className == "drag"){
    var nexts = eTar.nextSibling;
    if (nexts == null) {
      document.getElementById('workbox').insertBefore(eTar,document.getElementById('workbox').firstChild);
    }else{
      document.getElementById('workbox').appendChild(eTar);
    }
  }else if(eTar.className == "trashcan") {
    if(confirm('¿Borrar todas las piezas de la zona de creación?')) clearprops();
  }
  return;
}


document.ondblclick = clickTop;


function menuBottom(){
  if (c.className == 'drag'){
    document.getElementById('workbox').insertBefore(c,document.getElementById('workbox').firstChild);
  }
  hidemenus();
}


function menuTop(){
  if (c.className == 'drag'){
    document.getElementById('workbox').appendChild(c);
  }
  hidemenus();
}


function menuclone(){
  if (c.className == 'drag'){
    addImage(c.src);
  }
  hidemenus();
}


function menudelete(){
  if (c.className == 'drag'){
    document.getElementById('workbox').removeChild(c);
  }
  hidemenus();
}


function zup(){
  if (c.className == 'drag'){
    nexts = c.nextSibling;
    if (c.nextSibling != null) {
      document.getElementById('workbox').insertBefore(c,nexts.nextSibling);
    }
  }
  hidemenus();
}


function zdown(){
  if (c.className == 'drag'){
    if (c.previousSibling != null) {
      document.getElementById('workbox').insertBefore(c,c.previousSibling);
    }
  }
  hidemenus();
}


function clearprops(){
  for(n = document.getElementById('workbox').childNodes.length; n > 0; n--) {
    document.getElementById('workbox').removeChild(document.getElementById('workbox').lastChild);
  }
  hidemenus();
}


function dptop(){
  if (document.getElementById('workbox').childNodes.length > 0) {
    document.getElementById('workbox').removeChild(document.getElementById('workbox').lastChild);
  }
  hidemenus();
}


function dpbottom(){
  if (document.getElementById('workbox').childNodes.length > 0) {
    document.getElementById('workbox').removeChild(document.getElementById('workbox').firstChild);
  }
  hidemenus();
}


function dimprops(){
  var thisChild = document.getElementById('workbox').firstChild;
  for(n = document.getElementById('workbox').childNodes.length; n > 0; n--) {
    thisChild.style.opacity = '0.'+dollDim;
    thisChild.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity='+dollDim+')';
    thisChild = thisChild.nextSibling;
  }
  c.style.opacity = '1.00';
  c.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=100)';
}


function brightprops(){
  var thisChild = document.getElementById('workbox').firstChild;
  for(n = document.getElementById('workbox').childNodes.length; n > 0; n--) {
    thisChild.style.opacity = '1.00';
    thisChild.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=100)';
    thisChild = thisChild.nextSibling;
  }
}


function highlight(){
  if(!e){
    //for IE
    var e = window.event;
    var eTar = e.srcElement;
  }else{
    //for Standard/Compliant
    var eTar = e.target;
  }
  if (eTar.className == "menuitems") {
    eTar.className = 'overmenuitems';
  }
}


function lowlight(){
  if(!e){
    //for IE
    var e = window.event;
    var eTar = e.srcElement;
  }else{
    //for Standard/Compliant
    var eTar = e.target;
  }
  if (eTar.className == "overmenuitems") {
    eTar.className = 'menuitems';
  }
}


function showmenutrash(mX,mY) {
  document.getElementById('trashmenu').style.left = mX+"px";
  document.getElementById('trashmenu').style.top = mY+"px";
  document.getElementById('trashmenu').style.visibility = "visible";
  return false;
}


function showmenuprop(mX,mY) {
  document.getElementById('propmenu').style.left = mX+"px";
  document.getElementById('propmenu').style.top = mY+"px";
  document.getElementById('propmenu').style.visibility = "visible";
  dimprops();
  return false;
}


function hidemenus() {
  if(document.getElementById('workbox').childNodes.length > 0) brightprops();
  document.getElementById('propmenu').style.visibility = "hidden";
  document.getElementById('trashmenu').style.visibility = "hidden";
}


function customContextMenu(e){
  if(!e){
    //for IE
    var e = window.event;
    var eTar = e.srcElement;
  }else{
    //for Standard/Compliant
    var eTar = e.target;
  }
  if (eTar.className == 'drag') {
    getScreenOff();
    c = eTar;
    showmenuprop(e.clientX+scrOfX,e.clientY+scrOfY);
  }else{
    getScreenOff();
    c = eTar;
    showmenutrash(e.clientX+scrOfX,e.clientY+scrOfY);
  }
  return false;
}


document.oncontextmenu = customContextMenu;


function findPos(obj) {
  var curleft = curtop = 0;
  if (obj.offsetParent) {
    curleft = obj.offsetLeft
    curtop = obj.offsetTop
    while (obj = obj.offsetParent) {
      curleft += obj.offsetLeft
      curtop += obj.offsetTop
    }
  }
  return [curleft,curtop];
}


// load the script
function loadMaker() {
  // if they refresh, the work area will go to the default size
  // make sure the forms reset as well
  document.resizeform.bgwide.value = imageDefaultWidth;
  document.resizeform.bgtall.value = imageDefaultHeight;
  document.makerform.bgwide.value = imageDefaultWidth;
  document.makerform.bgtall.value = imageDefaultHeight;
  document.getElementById('workbox').style.width = imageDefaultWidth+'px';
  document.getElementById('workbox').style.height = imageDefaultHeight+'px';
  return;
}