var browser = new Browser();

// Global object to hold drag information.

var dragObj = new Object();
var dragObj2 = new Object();
var dragObj3 = new Object();


// deklarace promennycj
var size = 325; // sirka elementu

function startup(){
	$(document).ready(function() {
		
		$("a.lightbox").fancybox({
		'zoomSpeedIn': 300,
		'zoomSpeedOut': 300,
		'overlayShow': false
		});
	});
	
  //document.getElementById('more_clicky').onmousedown =
  //document.getElementById('other_clicky').onmousedown =
  if(document.getElementById('clickablehmotnost')!=null){
		document.getElementById('clickablehmotnost').onmousedown = function (event) {
			e = 'hmotnost';
			from = 35;
			to = 145
			var pos = getRelativeCoordinates(event, document.getElementById('clickable'+e));
			var m = document.getElementById(e+'el');
			pos.x += 110; // pocatecni pozice
			pos.x -= 25; // polovina obrazku
			m.style.left = pos.x +'px';
			pos.x -= 110; // pocatecni pozice
			pos.x += 25; // polovina obrazku
			document.getElementById(e).value=Math.round((to-from)/size*pos.x+from);
			dragStart( event, e, from, to);
		}
  }
  if(document.getElementById('clickablevyska')!=null){
		document.getElementById('clickablevyska').onmousedown = function (event) {
			e = 'vyska';
			from = 125;
			to = 235
			var pos = getRelativeCoordinates(event, document.getElementById('clickable'+e));
			var m = document.getElementById(e+'el');
			pos.x += 110; // pocatecni pozice
			pos.x -= 25; // polovina obrazku
			m.style.left = pos.x +'px';
			pos.x -= 110; // pocatecni pozice
			pos.x += 25; // polovina obrazku
			document.getElementById(e).value=Math.round((to-from)/size*pos.x+from);
			dragStart( event, e, from, to);
		}
  }
  if(document.getElementById('clickablejste')!=null){
		document.getElementById('clickablejste').onmousedown = function (event) {
			e = 'jste';
			var m = document.getElementById(e+'el');
			if(m.style.left=='143px')
			m.style.left = '105px';
			else m.style.left = '143px';
		}
  }
}

function getAbsolutePosition(element) {
	if(element){
		var r = { x: element.offsetLeft, y: element.offsetTop };
		if (element.offsetParent) {
			var tmp = getAbsolutePosition(element.offsetParent);
			r.x += tmp.x;
			r.y += tmp.y;
		}
	}else{
		var r = { x: 0, y: 0 };
	}
	return r;
};
/**
 * Retrieve the coordinates of the given event relative to the center
 * of the widget.
 *
 * @param event
 *   A mouse-related DOM event.
 * @param reference
 *   A DOM element whose position we want to transform the mouse coordinates to.
 * @return
 *    A hash containing keys 'x' and 'y'.
 */
function getRelativeCoordinates(event, reference) {
  var x, y;
  event = event || window.event;
  var el = event.target || event.srcElement;
 
  if (!window.opera && typeof event.offsetX != 'undefined') {
    // Use offset coordinates and find common offsetParent
    var pos = { x: event.offsetX, y: event.offsetY };
 
    // Send the coordinates upwards through the offsetParent chain.
    var e = el;
    while (e) {
      e.mouseX = pos.x;
      e.mouseY = pos.y;
      pos.x += e.offsetLeft;
      pos.y += e.offsetTop;
      e = e.offsetParent;
    }
 
    // Look for the coordinates starting from the reference element.
    var e = reference;
    var offset = { x: 0, y: 0 }
    while (e) {
      if (typeof e.mouseX != 'undefined') {
        x = e.mouseX - offset.x;
        y = e.mouseY - offset.y;
        break;
      }
      offset.x += e.offsetLeft;
      offset.y += e.offsetTop;
      e = e.offsetParent;
    }
 
    // Reset stored coordinates
    e = el;
    while (e) {
      e.mouseX = undefined;
      e.mouseY = undefined;
      e = e.offsetParent;
    }
  }
  else {
    // Use absolute coordinates
    var pos = getAbsolutePosition(reference);
    x = event.pageX  - pos.x;
    y = event.pageY - pos.y;
  }
  // Subtract distance to middle
  return { x: x, y: y };
}
function change( event, e, from, to){
	//pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById(e.id).offsetLeft;
	//pos_x = document.getElementById(e.id).offsetLeft;
	var pos = getRelativeCoordinates(event, document.getElementById('clickable'+e));
	var m = document.getElementById(e+'el');
	pos.x += 110; // pocatecni pozice
	pos.x -= 25; // polovina obrazku
	m.style.left = pos.x +'px';
	pos.x -= 110; // pocatecni pozice
	pos.x += 25; // polovina obrazku

	document.getElementById(e).value=Math.round((to-from)/size*pos.x+from);
	dragStart( event, e, from, to);
	//pos_x= pos.x;
	//pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById(e.id).offsetTop;
	//e.style.left = (pos_x-1) ;
	//e.style.top = (pos_y-15) ;
	//e.style.visibility = "visible" ;
	//document.pointform.form_x.value = pos_x;
	//document.pointform.form_y.value = pos_y;
	return false;
}


function Browser() {

  var ua, s, i;

  this.isIE    = false;
  this.isNS    = false;
  this.version = null;

  ua = navigator.userAgent;

  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  // Treat any other "Gecko" browser as NS 6.1.

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }
}

function dragStart( event , e, from, to) {
  var x;

  // If an element id was given, find it. Otherwise use the element being
  // clicked on.
  if(e=='hmotnost'){
  	dragObj.elNode = document.getElementById(e+'el');
  	dragObj.from = from;
  	dragObj.to = to;
  }else if(e=='vyska'){
  	dragObj2.elNode = document.getElementById(e+'el');
  	dragObj2.from = from;
  	dragObj2.to = to;
  }else{
  	dragObj3.elNode = document.getElementById(e+'el');
  	dragObj3.from = from;
  	dragObj3.to = to;
  }
  // If an element id was given, find it. Otherwise use the element being
  // clicked on.

  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
  }else {
    x = event.clientX + window.scrollX;
  }

  // Save starting positions of cursor and element.
  if(e=='hmotnost'){
		dragObj.cursorStartX = x;
		dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
		dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);
	
		if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
		if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;
  }else if(e=='vyska'){
		dragObj2.cursorStartX = x;
		dragObj2.elStartLeft  = parseInt(dragObj2.elNode.style.left, 10);
		dragObj2.elStartTop   = parseInt(dragObj2.elNode.style.top,  10);
	
		if (isNaN(dragObj2.elStartLeft)) dragObj2.elStartLeft = 0;
		if (isNaN(dragObj2.elStartTop))  dragObj2.elStartTop  = 0;
  }else{
		dragObj3.cursorStartX = x;
		dragObj3.elStartLeft  = parseInt(dragObj3.elNode.style.left, 10);
		dragObj3.elStartTop   = parseInt(dragObj3.elNode.style.top,  10);
	
		if (isNaN(dragObj3.elStartLeft)) dragObj3.elStartLeft = 0;
		if (isNaN(dragObj3.elStartTop))  dragObj3.elStartTop  = 0;
  }


  // Capture mousemove and mouseup events on the page.

  if (browser.isIE) {
    document.attachEvent("onmousemove", dragGo);
    document.attachEvent("onmouseup",   dragStop);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  } else {
    document.addEventListener("mousemove", dragGo,   true);
    document.addEventListener("mouseup",   dragStop, true);
    event.preventDefault();
  }
}

function dragGo(event) {
  var x;
  // Get cursor position with respect to the page.
  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
  } else {
    x = event.clientX + window.scrollX;
  }
  
	if (browser.isIE)
		e = window.event.srcElement;
	else
		e = event.target;
	e = e.id.substring(9);
  // overi jeslti povoli presun, pripadne nastavi omezeni na krajni hodnoty 
	var pos = getRelativeCoordinates(event, document.getElementById('clickable'+e));
	//var m = document.getElementById('hmotnostel');
	//m.style.left = pos.x +'px';
	//pos.x -= 110; // pocatecni pozice
	//pos.x += 25; // polovina obrazku

  if(pos.x>=0 && pos.x<=size){
		// Move drag element by the same amount the cursor has moved.
		if(e=='hmotnost'){
			document.getElementById(e).value=Math.round((dragObj.to-dragObj.from)/size*pos.x+dragObj.from);
			pos.x += 110; // pocatecni pozice
			pos.x -= 25; // polovina obrazku
			dragObj.elNode.style.left = pos.x + "px";
		}else if(e=='vyska'){
			document.getElementById(e).value=Math.round((dragObj2.to-dragObj2.from)/size*pos.x+dragObj2.from);
			pos.x += 110; // pocatecni pozice
			pos.x -= 25; // polovina obrazku
			dragObj2.elNode.style.left = pos.x + "px";
		}else{
			document.getElementById(e).value=Math.round((dragObj3.to-dragObj3.from)/size*pos.x+dragObj3.from);
			pos.x += 110; // pocatecni pozice
			pos.x -= 25; // polovina obrazku
			dragObj3.elNode.style.left = pos.x + "px";
		}
  }

  if (browser.isIE) {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  } else
    event.preventDefault();
}

function dragStop(event) {
  // Stop capturing mousemove and mouseup events.
  if (browser.isIE) {
    document.detachEvent("onmousemove", dragGo);
    document.detachEvent("onmouseup",   dragStop);
  } else {
    document.removeEventListener("mousemove", dragGo,   true);
    document.removeEventListener("mouseup",   dragStop, true);
  }
}