/*
Panorama Slider v0.9
2010.06.25 by BusinessApps, s.r.o.
http://www.buapps.com/

Developer: Robert Toth
robert.toth (@) buapps.com

Usage:
  add this function call to your body tag:
    onload="phone_init(width, refreshRate, speed);"
  where
    "width"        is width of the background picture (panorama),
    "refreshRate"  sets refresh rate of panorama in milliseconds,
    "speed"        sets number of pixels the panorama will slide on every refresh event

  and to your HTML code add "header" and "phone" elements (both having background
  image set in CSS style, "header" has back- and "phone" has fore-ground image
    <div id="header">
      <div id="phone" onmousemove="phone_move(event)" onmouseover="phone_over();" onmouseout="phone_out()">
        <img src="images/phone.gif"/>
      </div>
    </div>
*/

// objects
var phone;
var div;

// variables
var backWidth;       // width of background picture
var refreshRate;     // refresh rate of script
var backSpeed;       // speed of background sliding
var divWidth;        // total width of parent element
var phoneWidth;      // width of phone element
var phoneWidth2;     // half of the width
var spaceWidth;      // space available for "sliding" the phone
var mousePos;
var functionId;
var running = false;
var isMouseDown = false;
var initialized = false;


function phone_init(back,refresh,speed) {
  phone = document.getElementById('iphone');
  div = document.getElementById('header');

  backWidth = back;
  refreshRate = refresh;
  backSpeed = speed;

  divWidth = div.clientWidth;
  phoneWidth = phone.clientWidth;
  phoneWidth2 = Math.round(phoneWidth/2);
  spaceWidth = divWidth-phoneWidth;
  initialized = true;
}


function phone_move(e) {
  if (initialized == false)
    return;
  var tempX = (e.pageX ? e.pageX : e.clientX + document.documentElement.scrollLeft);
  var obj = div;
  var tempOffset = 0;
  if (obj.offsetParent) {
    do tempOffset += obj.offsetLeft;
    while (obj = obj.offsetParent);
  }
  mousePos = tempX-tempOffset;

  if (functionId == undefined)
    functionId = setTimeout('phone_over()',refreshRate);
}


function phone_out() {
  if (initialized == false)
    return;
  if (functionId != undefined) {
    clearTimeout(functionId);
    functionId = undefined;
  }
}


function phone_over() {
  if (initialized == false)
    return;
  // if mousePos isn't set yet, exit
  if (mousePos == undefined)
    return;

  // if function instance is already running, exit (this shouldn't normally happen,
  //   it's only a compatibility fix for really slow computers)
  if (running == true)
    return;

  running = true;

  // setting new phone position
      var newPos = mousePos - phoneWidth2;
      newPos = Math.min( Math.max(newPos, 0), spaceWidth );
      phone.style.margin = '44px auto 0 '+newPos+'px';

  // moving background picture (if needed)
      var maxBackOffset = backWidth-divWidth; // space available for background "sliding"
      if (div.style.backgroundPosition)       // actual background offset
        var backOffset = -parseInt(div.style.backgroundPosition);
      else
        var backOffset = maxBackOffset/2;

      // move to the left
      if (newPos==0 && backOffset>5) {
        backOffset-=backSpeed;
        div.style.backgroundPosition = -backOffset+'px 0px';
      }
      // move to the right
      if (newPos==spaceWidth && backOffset<maxBackOffset-5) {
        backOffset+=backSpeed;
        div.style.backgroundPosition = -backOffset+'px 0px';
      }

  // moving foreground picture
      phone.style.backgroundPosition = -(newPos+backOffset)+'px -43px';

  // calling new instance of function in future
      running = false;
      if (functionId != undefined)
        functionId = setTimeout('phone_over()',refreshRate);
}