function inlineSize(el){var hiddenStyle = "left:-10000px;top:-10000px;height:auto;width:auto;position:absolute;";var clone = document.createElement('div');for (var i in el.style){try{if ((el.style[i] != '') && (el.style[i].indexOf(":") > 0)){clone.style[i] = el.style[i];}}catch(e){}}document.all ? clone.style.setAttribute('cssText', hiddenStyle) : clone.setAttribute('style', hiddenStyle);clone.innerHTML = el.innerHTML;el.parentNode.appendChild(clone);var rect = {width:clone.clientWidth,height:clone.clientHeight};el.parentNode.removeChild(clone);return rect;}

function mouseCoords(ev)
{
  try
  {
	if(ev.pageX || ev.pageY)
	{
		return {x:ev.pageX, y:ev.pageY};
	}
  }
  catch(e){}
	return{ x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
					 y:ev.clientY + document.body.scrollTop  - document.body.clientTop};
}

function getMouseOffset(target, ev){
	ev = ev || window.event;

	var docPos    = getPosition(target);
	var mousePos  = mouseCoords(ev);
  
	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};	
}

function getPosition(el)
{
  var x = 0, y = 0;
  while(el)
  {
    x += el.offsetLeft;
    y += el.offsetTop;
    el = el.offsetParent;
  }
	return {x:x, y:y};
}

/*--------------------------------------------------------------------*/

function init()
{
  cn_div = document.getElementById('cn');
  cn_div.style.left = "0px";
  sc_div = document.getElementById('sc');
  bl_div = document.getElementById('bl');
  br_div = document.getElementById('br');
  sb_div = document.getElementById('sb');
  sb_div.style.left = "0px";
  
  _xs = .5;
  _x = .5;
  
  sc_timer = null;
  
  evin();
  
  window.onresize = document.body.onresize = function()
  {
    evin();
    if(fw() > cw()) to(_x);
  };
}

function evin()
{
  if(fw() > cw())
  {
    if(sb_div.onmousedown == null)
    {
      sc_div.onclick = scc;
      bl_div.onclick = lsc;
      br_div.onclick = rsc;
      sb_div.onmousedown = scs;
      document.onmouseup = sce;
    }
    sb_div.style.display = "";
    to(_xs);
  }
  else
  {
    sc_div.onclick = null;
    bl_div.onclick = null;
    br_div.onclick = null;
    sb_div.onmousedown = null;
    document.onmouseup = null;
    sb_div.style.display = "none";
  }
}

function lsc()
{
  sto(xs() - 0.1);
}

function rsc()
{
  sto(xs() + 0.1);
}

function fw()
{
  return inlineSize(cn_div).width;
}

function cw()
{
  return cn_div.parentNode.clientWidth;
}

function sw()
{
  return sc_div.clientWidth;
}

function xs()
{
  return -parseInt(cn_div.style.left) / (fw() - cw());
}

function to(x)
{
  if(x > 1) x = 1;
  if(x < 0) x = 0;

  _x = x;
  
  cn_div.style.left = Math.round(-_x * (fw() - cw())) + "px";
  sb_div.style.left = Math.round(_x * (sw() - 100)) + "px";
}

function sto(x)
{
  if(x > 1) x = 1;
  if(x < 0) x = 0;
  
  _xs = x;
  _x = xs();
  
  tm();
  sc_timer = setTimeout(tm, 50);
}

function tm()
{
  _x += (_xs - _x) / 4;
  to(_x);
  
  if(Math.abs(_x - _xs) >= 0.001)
  {
    sc_timer = setTimeout(tm, 50);
  }
}

function scs(ev)
{
  if(sc_timer) clearTimeout(sc_timer);
  
  ev = ev || window.event;
  m_x = mouseCoords(ev).x;  
  
  document.onmousemove = scm;
  return false;
}

function scm(ev)
{
  ev = ev || window.event;
  var m_nx = mouseCoords(ev).x;
  var x = xs() - (m_x - m_nx) / (sw() - 100);
  m_x = m_nx;
  
  to(x);
  return false;
}

function sce()
{
  document.onmousemove = null;
  return false;
}

function scc(ev)
{
  ev = ev || window.event;
  var sc_mx = getMouseOffset(sc_div, ev).x;
  var sb_x = parseInt(sb_div.style.left);
  
  if(sc_mx < sb_x)
  {
    sto(xs() - .25);
  }
  else if(sc_mx > sb_x + 100)
  {
    sto(xs() + .25);
  }
  
  return false;
}