/** @file editor.js
 * 9. 1. 2009  
 * @masivni upravy - LOSERT/Styblo
 * info@vlastni-prani.cz 
 *  @original author Bronislav Klucka, Bronislav.Klucka@pro2-soft.com,
 *          Copyright © 2008+ Bronislav.Klucka
 *
 *
 * This script is licenced under MPL
 *
 *
 */


var step = 0;
//var request = HttpRequest();

var imagesHolder = null;
var dragging = false;
var mLayer = null;
var mDownX = 0;
var mDownY = 0;
var fotoY = 0;
var fotoX = 0;
var maxTop = 0;
var maxLeft = 0;
var canDragmLayer = true;
var preview = null;
var texts = null;
var checkValues = true;
var displayAllTools = false;
var lastLayer = false;
var draged_text;
var layer0 = '';
var layer1 = '';
var layer3 = '';
var layerObjects = new Array();
var pic_source;

String.prototype.trim =      function() {
 	return (this.replace(/^[\s\xA0]+/, "").replace(/[\s\xA0]+$/, ""));
}

/**
 * BODY element event called if page is loaded
 */
function onLoad(e,source,motive,w,h,x,y,sc,t0,t0_x,t0_y,t0_w,t0_h,t1,t1_x,t1_y,t1_w,t1_h,t2,t2_x,t2_y,t2_w,t2_h,t3,t3_x,t3_y,t3_w,t3_h)
{
  imagesHolder = document.getElementById("editor");
  preview = document.getElementById('editor-text-preview');
  texts = document.getElementById('editor-text-texts');
  document.body.onmouseup = mouseUp;
  document.body.onmousemove = mouseMove;
  fotoX = x;
  fotoY = y;
  createLayer(motive, w, h, '0');
  setFoto(0,0,0,sc);
  pic_source = source;    
//fialovej srac, kterej se muze dat pryc
  

//vztvoreni jiz vlozenych textu
//text0  
if (t0 != '0')
{
  var node = document.createElement('span');
  node.className = "editor text_layer movable";
  node.id = 'text0';
  setSpanBackground(node, t0, t0_w, t0_h, t0_x, t0_y);
  imagesHolder.appendChild(node);
  node.onmousedown = mouseDown;
  node.onmouseup = mouseUp;
  node.ondblclick = removeImg;
}
//text1  
//alert(t1);
if ((t1 != '0') && (t2 != undefined))
{
//alert(t1);
  var node = document.createElement('span');
  node.className = "editor text_layer movable";
  node.id = 'text1';
  setSpanBackground(node, t1, t1_w, t1_h, t1_x, t1_y);
  imagesHolder.appendChild(node);
  node.onmousedown = mouseDown;
  node.onmouseup = mouseUp;
  node.ondblclick = removeImg;
}
//text2


if ((t2 != undefined) && (t2 !='0'))
{
  var node = document.createElement('span');
  node.className = "editor text_layer movable";
  node.id = 'text2';
  setSpanBackground(node, t2, t2_w, t2_h, t2_x, t2_y);
  imagesHolder.appendChild(node);
  node.onmousedown = mouseDown;
  node.onmouseup = mouseUp;
  node.ondblclick = removeImg;
}

if ((t3 != undefined) && (t3 !='0'))
{
  var node = document.createElement('span');
  node.className = "editor text_layer movable";
  node.id = 'text3';
  setSpanBackground(node, t3, t3_w, t3_h, t3_x, t3_y);
  imagesHolder.appendChild(node);
  node.onmousedown = mouseDown;
  node.onmouseup = mouseUp;
  node.ondblclick = removeImg;
}


/*
  if (___version == 6)
  {
    var images = document.getElementById('editor-text-font-box').getElementsByTagName('img');
    for (var i = 0; i < images.length; ++i)
    {
      images[i].src += ".gif";
    }
  }
*/
  
}

function prepField(src,width,height)
{
  imagesHolder = document.getElementById("editor");
  imagesHolder.Height = height;
  preview = document.getElementById('editor-text-preview');
  texts = document.getElementById('editor-text-texts');
  document.body.onmouseup = mouseUp;
  document.body.onmousemove = mouseMove;
}





function setSpanBackground(span, url, width, height, left, top)
{
  
  /*alert(span);
  alert(url);
  alert(height);
  alert(left);
  alert(top);*/
  span.style.width = width + "px";
  span.style.height = height + "px";
  span.style.top = top + "px";
  span.style.left = left + "px";
  
  span.style.backgroundImage = "url(" + url + ")";
  span.style.backgroundRepeat = "no-repeat";
  
  
  if (inMSIE())
  {
    span.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader" +
      "(src=\'" +url+"\', sizingMethod='scale');";
  }
  else
  {
    span.style.backgroundImage = "url(" + url + ")";
    span.style.backgroundRepeat = "no-repeat";
  }
}


/**
 * event called if layer from select is changed
 */
function changeLayer(layer)
{
  var select = document.getElementById("editor-layers-select-" + layer);
  var data = select.options[select.selectedIndex].value;
  if (!data) data = "0|||0|||";
  var datas = data.split("|||");
  var image = document.getElementById("editor-" + layer);
  setSpanBackground(image, datas[2], datas[0], datas[1], 0, 0);
  if (layer == 2)
  {
    var tl = layer + 1;
    document.getElementById("editor-layers-select-" + tl).selectedIndex = 0;
    changeLayer(tl);
    image.onmousedown = mouseDown;
    image.onmouseup = mouseUp;

    if (!image.className.match('movable')) image.className += ' movable';

  }
}

/**
 * function creates object layer
 * @param src string, image source
 * @param width integer , image width
 * @param height integer , image height
 * @param layer integer , layer
 */
function createLayer(src, width, height, layer)
{
  if (layer == 0) layer0 = src;
  else if (layer == 1) layer1 = src;
  else if (layer == 3)
  {
    layer3 = src;
    lastLayer = src != '';
  }
  //document.write(layer);
  var image = document.getElementById("editor-" + layer);
  setSpanBackground(image, src, width, height, 0, 0);
}

/**
 * function creates object layer
 * @param src string , image source
 * @param width integer, image width
 * @param height integer, image height
 */
function createObjectLayer(src, width, height)
{
  if (lastLayer)
  {
    return;
  }

  var node = document.createElement('span');
  node.className = "editor movable object_layer red";
  node.title = src;
 
  setSpanBackground(node, src, width, height, 0, 0);
  var image = document.getElementById("editor-3");
 // document.write(imagesHolder);
 
 // document.write(src);
  imagesHolder.insertBefore(node, image);
  node.onmousedown = mouseDown;
  node.onmouseup = mouseUp;
  node.ondblclick = removeImg;
}

/**
 * function removes layer
 */
function removeImg(e)
{

  dragging = false;
  cancelBubble(e);
  return;
  var t = getTarget(e);
  if (t.className.match('movable'))
  {
    if (confirm(mmsed2))
      {
        imagesHolder.removeChild(t);
        /*
        var i = 0;
        var spans = imagesHolder.getElementsByTagName('span');
        for (var j = 0; j < spans.length; j++)
        {
          span = spans[j];
          if (span.className.match('text_layer'))
          {

            ++i;
          }
        }
        alert(i);
        */

      }
  }
}

/**
 * body element event for mouse up
 */

/**
 * event called is mouse button is pressed on movable layer
 */
function mouseDown(e)
{
  var t = getTarget(e);
  
  if (t.className.match('movable')) mLayer = t;

  if ((mLayer != null) && (canDragmLayer))
  {
    maxTop = imagesHolder.offsetHeight - t.offsetHeight;
    maxLeft = imagesHolder.offsetWidth - t.offsetWidth;
    draged_text = t.id;
    mDownX = getTargetX(e);
    mDownY = getTargetY(e);
    
    dragging = true;
  }
  
  cancelBubble(e);
}

function cancelBubble(e){
	if (e == null) e = event;
	if (e.stopPropagation) e.stopPropagation() ;
	else e.cancelBubble = true;
}


/**
 * event called if mouse is moving above draggable layer
 */
function mouseMove(e)
{
  hand_x33 = document.getElementById("text3-x");
  
  if (inFF())
  {
  ex = e.clientX;
  hand_x33.value = e.clientY;
  ey = e.clientY-150;
  }
  else
  {
  ex = e.x;
  ey = e.y;
  } 
  if ((mLayer != null) && (dragging) && (canDragmLayer))
  {
    if (ex != undefined)
    {
    var x = ex;
    }
    else
    {
    var x = 0;
    }
    
    
    if (ey != undefined)
    {
    var y = ey;
    }
    else
    {
    var y = 0;
    }
    
    
    var nt = (mLayer.style.top ? parseInt(mLayer.style.top) : 0) + y - mDownY;
    var nl = (mLayer.style.left ? parseInt(mLayer.style.left) : 0) + x - mDownX;
    
    nt = Math.max(0, Math.min(maxTop, y - mDownY));
    nl = Math.max(0, Math.min(maxLeft, x - mDownX-0));
    
    mLayer.style.top =  nt + "px";
    mLayer.style.left = nl + "px";
    /* */
    
    if (draged_text == "text0")
    {
    
    
    hand_x = document.getElementById("text0-x");
    hand_y = document.getElementById("text0-y");
    
    
    hand_x.value = nl;
    hand_y.value = nt;  
    }

    if (draged_text == "text1")
    {
    hand_x = document.getElementById("text1-x");
    hand_y = document.getElementById("text1-y");
    hand_x.value = nl;
    hand_y.value = nt;  
    }
    
    if (draged_text == "text2")
    {
    hand_x = document.getElementById("text2-x");
    hand_y = document.getElementById("text2-y");
    hand_x.value = nl;
    hand_y.value = nt;  
    }
    
    if (draged_text == "text3")
    {
    hand_x = document.getElementById("text3-x");
    hand_y = document.getElementById("text3-y");
    hand_x.value = nl;
    hand_y.value = nt;  
    }    
    
    
    /* */
  }
  cancelBubble(e);

}

function mouseUp(e)
{
  dragging = false;
  cancelBubble(e);
/*  
	isDownSrc = false;
	painting = false;
	e_resize = false;
	w_resize = false;
	s_resize = false;
	n_resize = false;
  nw_resize = false;
  se_resize = false;
	moving = false;
	d_Top = false;
	d_Left = false;
	d_Right = false;
	d_Bottom = false;
*/
  
  
}



/**
 * function returns mouse left position according to images container
 * @return integer
 */
function getMouseX(e)
{
  //document.write(e);
  return getDocX(e) - absLeft(imagesHolder);
}

/**
 * function returns mouse top position according to images container
 * @return integer
 */
function getMouseY(e)
{
  return getDocY(e) - absTop(imagesHolder);
}

/**
 * next button to display text inseting
 */
function prevName()
{
  var spans = imagesHolder.getElementsByTagName('span');
  for (var i = 0; i < spans.length; i++)
  {
    if (spans[i].className.match('editor'))
    {
      spans[i].style.borderWidth = "1px";
    }
  }
  if (displayAllTools) return;
  document.getElementById("editor-text").style.display = 'block';
  document.getElementById("editor-name").style.display = 'none';
}

/**
 * next button to display layers
 */
function prevText()
{
  if (displayAllTools) return;
  document.getElementById("editor-layers").style.display = 'block';
  document.getElementById("editor-text").style.display = 'none';
}

/**
 * next button to display text inseting
 */
function nextText()
{
  if (displayAllTools) return;
  document.getElementById("editor-layers").style.display = 'none';
  document.getElementById("editor-text").style.display = 'block';
}

/**
 * nex button to display name
 */
function nextName()
{
  var spans = imagesHolder.getElementsByTagName('span');
  for (var i = 0; i < spans.length; i++)
  {
    if (spans[i].className.match('editor'))
    {
      spans[i].style.borderWidth = "0px";
    }
  }
  if (displayAllTools) return;
  document.getElementById("editor-text").style.display = 'none';
  document.getElementById("editor-name").style.display = 'block';

}

/**
 * text preview button clicked
 */
function previewText()
{
  var img = document.getElementById('editor-text-preview');
  var clrE = document.getElementById('editor-text-color');
  var txtE = document.getElementById('editor-text-text');
  var sizE = document.getElementById('editor-text-size');
  var fntE = null;

  var url = "tools.php?action=text_preview";
  url += "&text=" + encodeURIComponent(txtE.value);
  url += "&size=" + encodeURIComponent(sizE.value);
  url += "&color=" + encodeURIComponent(clrE.options[clrE.selectedIndex].value);

  for (var i = 1; i <= 8; ++i)
  {
    fntE = document.getElementById('radio-font-' + i);
    if (fntE.checked) url += "&font=" + encodeURIComponent(fntE.value);
  }
  img.src = url;
  document.getElementById('editor-text-add-btn').style.display = "inline-block";
}

/**
 * function to add text to image
 */
function addText(name,type)
{


  if (type == 'watch')
  var url = "tady-hlidam-ja.html?state=3";
  else if (type == 'myvalt')
  var url = "udelej-si-vlastni-velikonocni-prani-2009.html?&state=3";
  else if (type == 'mypf')
  var url = "udelej-si-vlastni-pf-prani-2009.html?&state=3";
  else if (type == 'postc')
  var url = "vlastni-online-pohlednice.html?state=3";


  url += "&pth0=" + encodeURIComponent(layer0);
  url += "&fotox=" + fotoX;
  url += "&fotoy=" + fotoY;


  url += "&textaddid=" + name;
  url += "&status=text-add";

  //object_layer

  var nTexts = new Array();
  var nPos = new Array();
  var span = null;


  spans = imagesHolder.getElementsByTagName('span');
  for (var j = 0; j < spans.length; j++)
  {
    span = spans[j];
    if (span.className.match('text_layer'))
    {
      nTexts.push(span.id);
      nPos.push(span.offsetLeft + "x" + span.offsetTop);
    }
  }

  url += "&text0-text="+document.getElementById('text0-text').value;
  url += "&text1-text="+document.getElementById('text1-text').value;
  url += "&text2-text="+document.getElementById('text2-text').value;
  url += "&text3-text="+document.getElementById('text3-text').value;


  var clr0 = document.getElementById('text0-color');
  var clr1 = document.getElementById('text1-color');
  var clr2 = document.getElementById('text2-color');
  var clr3 = document.getElementById('text3-color');

  //bavy
  
  url += "&text0-color="+clr0.options[clr0.selectedIndex].value;
  url += "&text1-color="+clr1.options[clr1.selectedIndex].value;
  url += "&text2-color="+clr2.options[clr2.selectedIndex].value;
  url += "&text3-color="+clr2.options[clr3.selectedIndex].value;
  //fonty  

  var fnr0 = document.getElementById('text0-font');
  var fnr1 = document.getElementById('text1-font');
  var fnr2 = document.getElementById('text2-font');
  var fnr3 = document.getElementById('text3-font');


  url += "&text0-font="+fnr0.options[fnr0.selectedIndex].value;
  url += "&text1-font="+fnr1.options[fnr1.selectedIndex].value;
  url += "&text2-font="+fnr2.options[fnr2.selectedIndex].value;
  url += "&text3-font="+fnr2.options[fnr3.selectedIndex].value;
  

  var fs0 = document.getElementById('text0-fs');
  var fs1 = document.getElementById('text1-fs');
  var fs2 = document.getElementById('text2-fs');
  var fs3 = document.getElementById('text3-fs');

  //bavy
  
  url += "&text0-fs="+fs0.options[fs0.selectedIndex].value;
  url += "&text1-fs="+fs1.options[fs1.selectedIndex].value;
  url += "&text2-fs="+fs2.options[fs2.selectedIndex].value;
  url += "&text3-fs="+fs2.options[fs3.selectedIndex].value;



  url += "&text0-x="+document.getElementById('text0-x').value;
  url += "&text0-y="+document.getElementById('text0-y').value;
  url += "&text1-x="+document.getElementById('text1-x').value;
  url += "&text1-y="+document.getElementById('text1-y').value;
  url += "&text2-x="+document.getElementById('text2-x').value;
  url += "&text2-y="+document.getElementById('text2-y').value;
  url += "&text3-x="+document.getElementById('text3-x').value;
  url += "&text3-y="+document.getElementById('text3-y').value;

  
  url += "&code="+document.getElementById('text-code').value;
  url += "&scale="+document.getElementById('pic-scale').value;

  document.location = url;

  
}


/**
 * send data and display result
 */
function makePF(type)
{

  if (type == 'watch')
  var url = "tady-hlidam-ja.html?&status=set-pf&state=4";
  else if (type == 'myvalt')
  var url = "udelej-si-vlastni-velikonocni-prani-2009.html?&status=set-pf&state=4";
  else if (type == 'mypf')
  var url = "udelej-si-vlastni-pf-prani-2009.html?&status=set-pf&state=4";
  else if (type == 'postc')
  var url = "vlastni-online-pohlednice.html?&status=set-pf&state=4";
  
  url += "&pth0=" + encodeURIComponent(layer0);
  url += "&fotox=" + fotoX;
  url += "&fotoy=" + fotoY;

  //object_layer

  var nTexts = new Array();
  var nPos = new Array();
  var span = null;


  spans = imagesHolder.getElementsByTagName('span');
  for (var j = 0; j < spans.length; j++)
  {
    span = spans[j];
    if (span.className.match('text_layer'))
    {
      nTexts.push(span.id);
      nPos.push(span.offsetLeft + "x" + span.offsetTop);
    }
  }

  
  url += "&text0-text="+encodeURIComponent(document.getElementById('text0-text').value);
  url += "&text1-text="+encodeURIComponent(document.getElementById('text1-text').value);
  url += "&text2-text="+encodeURIComponent(document.getElementById('text2-text').value);
  url += "&text3-text="+encodeURIComponent(document.getElementById('text3-text').value);



  //pozice

  var clr0 = document.getElementById('text0-color');
  var clr1 = document.getElementById('text1-color');
  var clr2 = document.getElementById('text2-color');
  var clr3 = document.getElementById('text3-color');

  //bavy
  
  
  
  url += "&text0-color="+clr0.options[clr0.selectedIndex].value;
  url += "&text1-color="+clr1.options[clr1.selectedIndex].value;
  url += "&text2-color="+clr2.options[clr2.selectedIndex].value;
  url += "&text3-color="+clr2.options[clr3.selectedIndex].value;
  
  //fonty  

  var fs0 = document.getElementById('text0-fs');
  var fs1 = document.getElementById('text1-fs');
  var fs2 = document.getElementById('text2-fs');
  var fs3 = document.getElementById('text3-fs');

  //bavy
  
  url += "&text0-fs="+fs0.options[fs0.selectedIndex].value;
  url += "&text1-fs="+fs1.options[fs1.selectedIndex].value;
  url += "&text2-fs="+fs2.options[fs2.selectedIndex].value;
  url += "&text3-fs="+fs2.options[fs3.selectedIndex].value;


  var fnr0 = document.getElementById('text0-font');
  var fnr1 = document.getElementById('text1-font');
  var fnr2 = document.getElementById('text2-font');
  var fnr3 = document.getElementById('text3-font');

  url += "&text0-font="+fnr0.options[fnr0.selectedIndex].value;
  url += "&text1-font="+fnr1.options[fnr1.selectedIndex].value;
  url += "&text2-font="+fnr2.options[fnr2.selectedIndex].value;
  url += "&text3-font="+fnr2.options[fnr3.selectedIndex].value;



  url += "&text0-x="+document.getElementById('text0-x').value;
  url += "&text0-y="+document.getElementById('text0-y').value;
  url += "&text1-x="+document.getElementById('text1-x').value;
  url += "&text1-y="+document.getElementById('text1-y').value;
  url += "&text2-x="+document.getElementById('text2-x').value;
  url += "&text2-y="+document.getElementById('text2-y').value;
  url += "&text3-x="+document.getElementById('text3-x').value;
  url += "&text3-y="+document.getElementById('text3-y').value;


  url += "&code="+document.getElementById('text-code').value;
  url += "&scale="+document.getElementById('pic-scale').value;
  url += "&email="+encodeURIComponent(document.getElementById('adr-email').value);
  
  document.location = url;
}

//nastaveni pozice a velikosti fotky
function setFoto(x,y,dir,scale)
{
   var image = document.getElementById("pic-editor-image");
   
   if (scale == 0)
   scale = document.getElementById('pic-scale').value;
  
   if (dir == 0)
   {fotoY -= 5;}
    
   if (dir == 1)
   {fotoX -= 5;}
    
   if (dir == 2)
   {fotoX += 5;}
    
   if (dir == 3)
   {fotoY += 5;}
     
  image.style.marginTop = fotoY+"px";
  image.style.marginLeft = fotoX+"px";
  
    image.style.height= scale+"%";
}

//pomocne fce
function inOpera()
{
	return (window.opera) ? true : false;
}

function inMSIE()
{
  return (document.all && !inFF() && !inOpera());
}

function inFF()
{
	return (navigator.appName.indexOf("Netscape") >= 0) ? true : false;
}


function getTarget(e)
{
	if (e == null) e = window.event;
	var o;
	if (e.target) o = e.target;
	else if (event.srcElement) o = event.srcElement;
	return o;
}

function getDocX(e)
{
  var x= 0;
  var m = isMSIE();
	if (e == null) e = event;
	if (isMSIE()) x =  e.offsetX + absLeft(getTarget(e));
	else x= e.pageX;
  return x;
}


function getDocY(e)
{
  var y = 0;
  var m = inMSIE();

	if (e == null) e = event;
	if (inMSIE()) y =  e.offsetY + absTop(getTarget(e));
	else y = e.pageY;
	return y;
}

function getTargetX(e)
{
	if (e == null) e = event;
	if (inFF()) return e.layerX;
	else return e.offsetX;
}

function getTargetY(e)
{
	if (e == null) e = event;
	if (inFF()) return e.layerY;
	else return e.offsetY;
}

function absLeft(o)
{
	var ret = o.offsetLeft;
	if (o.offsetParent) ret += absLeft(o.offsetParent);
	return ret;
}

function absTop(o)
{
	var ret = o.offsetTop;
	
	if (o.offsetParent) ret += absTop(o.offsetParent);
	return ret;
}


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