/////////////////////////////////////////////////////////////////
//
// Designed and coded by Michael Mike Neubig, www.LifeInPlace.org
//
// implements a liquid design 
//
// tested under 
//   Mozilla 1.7.12 
//   Firefox 1.5
//   IE      6.0.2800.1106.xpsp1.020828-1920
//
// semi-colons are not nec., but allow xemacs to 
// font-lock color correctly
//
// 2005-11-05 first version 
//
/////////////////////////////////////////////////////////////////

/*******************************************/
// stylistic parameters
//
    var xref = 0
    var yref = 0
    var givennm = "Prelude."
    var middlenm = "1."
    var Blank = givennm + middlenm + "Blank.gif"
    var World = givennm + middlenm + "World.jpg"
    var Blife = givennm + middlenm + "Blife.gif"
    var Wlife = givennm + middlenm + "Wlife.gif"
    var Place = givennm + middlenm + "Place.gif"
    var middlenm = "2."
    var next_page = givennm + middlenm + "html"
    var homepage = 'http://www.lifeinplace.com'


function preload_images(){
  var ia = new Array();
  ia[0] = Blank ;
  ia[1] = Blife ;
  ia[2] = Wlife ;
  ia[3] = Place ;
  ia[4] = World ;

  var pre = new Array()
  for (n=0; n < /*>*/ ia.length; n++){
    pre[n] = new Image();
    pre[n].src = ia[n];
  }
  if(0){
    document.write('n preloaded = '+pre.length+'<br>');
    for (n=0; n < /*>*/ pre.length; n++){
      document.write(pre[n].src+'<br>');
    }
  }
}

 

/*******************************************/
// sensitive  parameters
    top_max = -680
    top_min = 150
  
/*******************************************/
// globals
    var backdrop_width_native 
    var backdrop_height_native
    var backdrop_top_init  
    var backdrop_left_init 
  
    var foremask_width_native  
    var foremask_height_native 
    var foremask_top_init  
    var foremask_left_init 
  
    var xDown
    var yDown
    var xNow
    var yNow
    var xLast
    var yLast
  
    var top_bgn
    var left_bgn
  
    var BackItem 
    var LifeItem 
    var DragItem 
    var dragable 
    var drag_event
  
    var top_clip_init
    var bot_clip_init
    var top_clip_centered
    var bot_clip_centered
  
    var ready_for_next

//####################################################################
function wsadd(s,a,b){
  window.status += s + ': ' + a + '  ' + b + '    '
}


function new_top(){
  //window.status = "new_top:  "
  var y
  y = top_bgn + yNow - yDown 
  y = Math.max(y, top_max)
  y = Math.min(y, top_min)
  //window.status += y
  return y
}


function new_clip(){
  //window.status = "new_clip:  "
  var r, top_clip, bot_clip

  top_clip = -1 * parseInt(DragItem.style.top) 
  bot_clip = top_clip + backdrop_height_native

  r = "rect("+ top_clip +"px, auto, "+ bot_clip +"px, auto)" 
  //window.status += r
  return r
}


function reposition(){
  //window.status = "reposition:  "
  var y = new_top()
  //window.status += y
  DragItem.style.top = y + "px"
  LifeItem.style.top = y + "px"
}


function reclip(){
  //window.status = "reclip:  "
  var r = new_clip()
  //window.status += r
  DragItem.style.clip = r
  LifeItem.style.clip = r
}

function do_drag(evt){
  if (dragable){
    if (!evt && window.event){
      evt = window.event
    }
    if(evt){ // avoid older browsers
      drag_event = evt
      window.status = 'do_drag:  '
      wsadd('bgn', top_bgn, left_bgn)
      wsadd('down', xDown, yDown)
      xNow = drag_event.clientX
      yNow = drag_event.clientY 
      wsadd('now', xNow, yNow)
      reposition()
      reclip()
      return false
    }
  }
}


function do_down(evt){
  window.status = 'do_down:  '
  if (!evt && window.event){
    evt = window.event
  }
  if(evt){ // avoid older browsers
    BackItem = document.getElementById('QQ')
    LifeItem = document.getElementById('BB')
    DragItem = document.getElementById('MM')

    top_bgn  = parseInt(DragItem.style.top  + 0)
    left_bgn = parseInt(DragItem.style.left + 0)
    wsadd('bgn', top_bgn, left_bgn)

    xDown = evt.clientX
    yDown = evt.clientY
    wsadd('down', xDown, yDown)

    document.onmousemove = do_drag
    ready_for_next       = true
    dragable             = true
    return false
  }
}
 
   
function do_up(){
  //window.status = 'do_up:  '
  document.onmousemove = null
  dragable = false
}

function reset_window(){
  //window.status = 'reset_window:  '
  document.onmousemove = null
  init_images()
  position_images()
  dragable = false
  ready_for_next = false
}


function init_images(){
  //window.status = 'init_images: '
  var s,e

  s              = 'QQ'
  //window.status += s
  e              = document.getElementById(s)
  e.className    = "backdrop"
  e.src          = World
                                     
  s              = 'BB'
  //window.status += s
  e              = document.getElementById(s)
  e.className    = "drag2"   
  e.src          = Blife

  s              = 'LL'
  //window.status += s
  e              = document.getElementById(s)
  e.className    = "whtlife" 
  e.src          = Wlife

  s              = 'MM'
  //window.status += s
  e              = document.getElementById(s)
  e.className    = "dragable"
  e.src          = Place
}


function init_vars(){  
  //window.status = 'init_vars: '
  var s
  var e

  s                      = 'QQ'
  //window.status         += s
  e                      = document.getElementById(s)
  backdrop_width_native  = e.width
  backdrop_height_native = e.height

  s                      = 'MM'
  //window.status         += s
  e                      = document.getElementById(s)
  foremask_width_native  = e.width
  foremask_height_native = e.height

  overrun = (foremask_height_native - backdrop_height_native)/2

  backdrop_top_init  = yref
  backdrop_left_init = xref

  foremask_top_init  = yref - overrun
  foremask_left_init = xref

  top_clip_centered = overrun
  bot_clip_centered = overrun + backdrop_height_native
  
  top_clip_init = top_clip_centered 
  bot_clip_init = bot_clip_centered

  dragable = false
  ready_for_next = true
}


function position_bodydiv(){
  //window.status = 'position_body_div: '
  var s
  var e
  s = 'bodydiv'
  //window.status     += s
  e                  = document.getElementById(s)
  e.style.position   =  "absolute"
  e.style.top        = 50 + '%'
  e.style.left       = 50 + '%'
  e.style.width      =  backdrop_width_native      + 'px';
  e.style.height     =  backdrop_height_native     + 'px';
  e.style.marginTop  = -backdrop_height_native / 2 + 'px';
  e.style.marginLeft = -backdrop_width_native  / 2 + 'px';

}


function position_images(){
  //window.status = 'position_images: '
  var s
  var e

  s = 'QQ'
  //window.status   += s
  e                = document.getElementById(s)
  e.style.position = "absolute"
  e.style.top      = backdrop_top_init  + 'px'
  e.style.left     = backdrop_left_init + 'px'
  e.style.zIndex = "1"
                                     
  s = 'BB'
  //window.status   += s
  e                = document.getElementById(s)
  e.style.position = "absolute"
  e.style.top      = foremask_top_init  + 'px'
  e.style.left     = foremask_left_init + 'px'
  e.style.clip     = "rect(" + top_clip_init + "px, auto, " + bot_clip_init + "px, auto)" 
  e.style.zIndex = "2"

  s = 'LL'
  //window.status   += s
  e                = document.getElementById(s)
  e.style.position = "absolute"
  e.style.top      = backdrop_top_init  + 'px'
  e.style.left     = backdrop_left_init + 'px'
  e.style.zIndex = "3"

  s = 'MM'
  //window.status     += s
  e                  = document.getElementById(s)
  e.style.position   = "absolute"
  e.style.top        = foremask_top_init  + 'px'  
  e.style.left       = foremask_left_init + 'px'  
  e.style.onmouseout = do_up
  e.style.clip       = "rect(" + top_clip_init + "px, auto, " + bot_clip_init + "px, auto)" 
  e.style.zIndex = "4"
}


function prep_links(){
}


function A_prep(){
// redefined in Prelude.A.js
}


function prep(){
  //window.status = 'prep: '
  prep_links()
  A_prep();
  init_images()
  init_vars()
  position_images()
  position_bodydiv()

  document.onmousedown = do_down
  document.onmouseup   = do_next
  document.onmouseout  = reset_window
  window.onresize      = reset_window
}


function cref(){
  var u = document.referrer;
  if(u.length == 0 ){
    return
  }
  u = u.substr(0,homepage.length+5);
  u = u.toLowerCase();
  if(!u.match('lifeinplace') && !u.match('mikeneubig') && !u.match('michaelneubig')  && !u.match('depthsofbeauty')){
    window.location = homepage;
  }
}

function do_next(){
  //window.status = 'do_next: '
  if(ready_for_next){
    reset_window()
    var s = setTimeout('changes();',800)
  }else{
    reset_window()
  }
}
function changes(){
  window.status = 'changes: '
  document.getElementById('QQ').src =  Blank
  document.getElementById('BB').src =  Blank
  document.getElementById('LL').src =  Blank
  document.getElementById('MM').src =  Blank
  window.location = next_page
}

function bgn(){  
  cref();
  window.status = 'bgn: '

  preload_images()
  prep()
  window.status = 'draggable'
}