function init()
{
  draggable = new Array(); // array will contain all visible draggables
  zIndex = new Array(); // array of draggables sorted by zIndex (lowest first)
  dragged_item = new Number(); // number of draggable that is dragged
  margin = 64; // margin (px); draggables cannot be moved beyond margin @ left & bottom
  loaded = false; // disable mouseOver draggable-shift effect when draggables not loaded completely
  update = "notupdated"; // flag to indicate if draggables positions are already updated at server
  var now = new Date();
  t_pick = now.getTime(); // initialize pick-up time
  shifted = false; // draggables not shifted by default
  need_update = false;
  move_done = false;
// left_window = false;
}

// Enable document wide events and enable mouseOver draggable-shift effect
function finish()
{
//  document.captureEvents(onmouseout);
  document.onmousemove = mouseMove; // enable/capture mouseMove event
  document.onmouseup = function () {draggable[parseInt(dragged_item)].dragging = false; return true;} // document wide stop dragging when mouseUp

  document.onmouseout = function (e) {
//    if (loaded && draggable[parseInt(dragged_item)].dragging && move_done) left_window = true;
    if (!e) var e = event; // explicitly get event if not already given (some browsers need this)
    if (e.clientX < 0 || e.clientX >= win_x || e.clientY < 0 || e.clientY >= win_y) draggable[parseInt(dragged_item)].dragging = false;
    return true;
  } // document wide stop dragging when mouse leaves browser window

//  document.onmouseover = function (e) {
//    if (!e) var e = event; // explicitly get event if not already given (some browsers need this)    
//    if ((!ie && e.which == 1) || (ie && e.button == 1)) alert ("Hi"); 
//    alert(e.which);
//    return false;
//  }


  window.onresize = function () {getWindowSize(); resizeItemFrame(win_x, win_y);} // update window size variables and resize item frame after resize
//  getWindowSize;
//  resizeItemFrame(win_x,win_y);
  loaded = true; // enable mouseOver draggable-shift effect
}

// Quick sort core algorithm
function quick_sort(arry, col, cols, lo_par, hi_par)
{
  var lo = lo_par;
  var hi = hi_par;
  var mid = 0;
  var temp = 0;
  if (col>=cols) col=0;
  if (hi_par > lo_par)
  {
    mid = arry[Math.floor((lo_par+hi_par)/2)*cols+col];
    while (lo<=hi)
    {
      while (lo<hi_par && arry[lo*cols+col]<mid)
        lo++;
      while (hi>lo_par && arry[hi*cols+col]>mid)
        hi--;
      if (lo<=hi)
      {
        for (var i=0; i<cols; i++)
	{
	  temp = arry[lo*cols+i];
	  arry[lo*cols+i] = arry[hi*cols+i];
	  arry[hi*cols+i] = temp;
	}
	lo++;
	hi--;
      }
    }
    if (lo_par<hi) quick_sort(arry, col, cols, lo_par, hi);
    if (lo<hi_par) quick_sort(arry, col, cols, lo, hi_par);
  }
  return arry;
}

// Array sort routine (col=column to sort on; cols=total number of columns)
function sort_array(arry, col, cols)
{
  sorted_arry = new Array(arry.length);
  sorted_arry = quick_sort(arry, col, cols, 0, arry.length/cols - 1);
  return sorted_arry;
}


// Place text in center of image
function place_text(draggable_name)
{
  var image_obj = document.getElementById(draggable_name);
  var text_obj = document.getElementById(draggable_name+'_text');
  var text_width = text_obj.offsetWidth;
  var text_height = text_obj.offsetHeight;
  var image_width = parseInt(image_obj.style.width);
  var image_height = parseInt(image_obj.style.height);
  text_obj.style.left = Math.round((image_width - text_width)/2) + 'px';
  text_obj.style.top = Math.round((image_height - text_height)/2) + 'px';
  text_obj.onmousedown = function () {return true;};
  text_obj.onmouseup = function () {return true;};
  text_obj.onmouseover = function () {return false;};
  text_obj.onmouseout = function () {return false;};
  return true;
}

// Read in image into draggable-array
function read_image(draggable_name, draggable_url, draggable_type, draggable_status)
{	
  var i = draggable.length; // first free entry in draggable array
  draggable[i] = document.getElementById(draggable_name);
  draggable[i].name = draggable_name;
  draggable[i].link = draggable_url;
  draggable[i].type = draggable_type;
  draggable[i].status = draggable_status;
  draggable[i].idx = i; // draggable index/number
  var x = parseInt(draggable[i].style.left);
  var y = parseInt(draggable[i].style.top);
  x = (x < win_x - margin) ? x : win_x - margin;
  y = (y < win_y - margin) ? y : win_y - margin;
  x = (x < margin - parseInt(draggable[i].style.width)) ? margin - parseInt(draggable[i].style.width) : x;
  y = (y < margin - parseInt(draggable[i].style.height)) ? margin - parseInt(draggable[i].style.height) : y;
  draggable[i].style.left = x + "px";
  draggable[i].style.top = y + "px";
  draggable[i].def_x = x; // store start position (to detect 'has been moved')
  draggable[i].def_y = y;
  draggable[i].x_old = 65535; // initialize old draggable position
  draggable[i].y_old = 65535;
  draggable[i].x_shift = 0; // initialize draggable shift values
  draggable[i].y_shift = 0;
  draggable[i].dragging = false;
  draggable[i].onmousedown = mouseDown;
  draggable[i].onmouseup = mouseUp;
  draggable[i].onmouseover = mouseOver;
  draggable[i].onmouseout = mouseOut;
  zIndex[draggable[i].style.zIndex] = i; // put draggable number in zIndex LUT
  place_text(draggable_name);
  return true;
}



function mouseDown(e)
{
  if (!e) var e = event; // explicitly get event if not already given (some browsers need this)
  if (window.proc_menu_on_item) if (proc_menu_on_item(this.name) && (e.shiftKey || e.ctrlKey || e.altKey || e.metaKey)) return false; // in admin mode: don't start moving if modifier keys pressed
  var now = new Date();
  t_pick = now.getTime(); // store pick-up time
  if (loaded) document.getElementById(this.name + "_text").style.visibility = "visible"; // draggable text visible
  if (!this.dragging)
  {
    this.dragging = true;
    this.dx = e.clientX - parseInt(this.style.left); // prevent cursor snapping
    this.dy = e.clientY - parseInt(this.style.top);
    this.old_x = parseInt(this.style.left); // store previous position used for dead zone effect
    this.old_y = parseInt(this.style.top);
    dragged_item = this.idx;
  }
  else
    this.dragging = false; // just to be sure: prevent sticky draggables
  return false;
}

// Mouse move event handler
function mouseMove(e)
{
  if (!e) var e = event;
  var i = new Number(dragged_item); // convert from string to integer
  if (ie && !e.button) 
  {
    draggable[i].dragging = false;
    return false; // don't move if mouse button not pressed (only works in MSIE)
  }
  if (draggable[i].dragging && (draggable[i].status & 1))
  {
    if (draggable[i].style.zIndex != draggable.length - 1) // draggable not already on top
    {
      var z = new Number(draggable[i].style.zIndex);
      for (var j=z+1; j<draggable.length; j++) // move draggables above current down wrt. zIndex
      {
        draggable[zIndex[j]].style.zIndex = draggable[zIndex[j]].style.zIndex - 1;
        zIndex[j-1] = zIndex[j];
      }
      draggable[i].style.zIndex = draggable.length - 1; // current draggable on top
      zIndex[draggable.length - 1] = i; // also in zIndex LUT
    }
    var x = e.clientX - draggable[i].dx;
    var y = e.clientY - draggable[i].dy;
    x = (x < win_x - margin) ? x : win_x - margin; // don't exceed margin
    y = (y < win_y - margin) ? y : win_y - margin;
    x = (x < margin - parseInt(draggable[i].style.width)) ? margin - parseInt(draggable[i].style.width) : x;
    y = (y < margin - parseInt(draggable[i].style.height)) ? margin - parseInt(draggable[i].style.height) : y;
    draggable[i].style.left = x + "px";
    draggable[i].style.top = y + "px";
    document.getElementById(draggable[i].name + "_text").style.visibility = "visible"; // draggable text visible, even if mouse moved too fast
  }
  move_done = true;
  return true;
}

// Mouse up event handler
function mouseUp(e)
{
  this.dragging = false; // stop dragging
  if (!shifted) document.getElementById(this.name + "_text").style.visibility = "visible"; // draggable text invisible, even if mouseOut already happened
  var dead_zone = 2; // dead zone in px
  if (Math.abs(parseInt(this.style.left) - this.old_x) <= dead_zone || Math.abs(parseInt(this.style.top) - this.old_y) <= dead_zone) // draggable moved more than dead zone?
  {
    var click_speed = 200; // click speed in ms
    var now = new Date(); 
    t_drop = now.getTime();
    if (t_drop - t_pick < click_speed) // clicked instead of slow mouse down - mouse up?
      update_draggables(this); // update draggable positions and follow link
  }
  return true;
}

// Mouse over event handler
function mouseOver(e)
{
//  alert("MouseOver");
  var shift = 3; // draggable shift in px
  if (!e) var e = event;
  if (this.dragging || !loaded) return false; // no shift if draggable is dragged or draggables not loaded completely
  if (shifted) return false; // skip shift if already shifted
  var xc = parseInt(this.style.left) + parseInt(this.style.width)/2; // calculate center of draggable
  var yc = parseInt(this.style.top) + parseInt(this.style.height)/2;
  var dx = (e.clientX - xc);
  var dy = (e.clientY - yc);
  var len = Math.sqrt(dx*dx+dy*dy);
 
  var x = this.x_shift + parseInt(this.style.left);
  var y = this.y_shift + parseInt(this.style.top);
  this.style.left = x + "px";
  this.style.top = y + "px";
  document.getElementById(this.name + "_text").style.visibility = "visible"; // draggable text visible
  shifted = true; // prevent invalid shifts
  return false;
}


// Mouse out event handler
function mouseOut(e)
{
  if (!e) var e = event;
  if (!loaded) return false; // no shift if draggables not loaded completely
//  if (!shifted) return false; // don't unshift if not shifted
  var x = parseInt(this.style.left) - this.x_shift; // unshift
  var y = parseInt(this.style.top) - this.y_shift;
  this.x_shift = 0; // reset shift values
  this.y_shift = 0;
  this.style.left = x + "px";
  this.style.top = y + "px";
  document.getElementById(this.name + "_text").style.visibility = "hidden"; // draggable text invisible
  shifted = false; // allow new draggable shifts
  return false;
}

init(); // Initialize arrays and variables immediately


function lisa() {
var lisa = document.getElementById('lisa');
if ( lisa.className == 'hidden' ) {
lisa.className = 'visible';
} else {
lisa.className = 'hidden';
}
}



function bio() {
var bio = document.getElementById('bio');
if ( bio.className == 'hidden' ) {
bio.className = 'visible';
} else {
bio.className = 'hidden';
}
}



function gewoon() {
var gewoon = document.getElementById('gewoon');
if ( gewoon.className == 'hidden' ) {
gewoon.className = 'visible';
} else {
gewoon.className = 'hidden';
}
}

function hilltop() {
var hilltop = document.getElementById('hilltop');
if ( hilltop.className == 'hidden' ) {
hilltop.className = 'visible';
} else {
hilltop.className = 'hidden';
}
}

function ipo() {
var ipo = document.getElementById('ipo');
if ( ipo.className == 'hidden' ) {
ipo.className = 'visible';
} else {
ipo.className = 'hidden';
}
}


function summer() {
var summer = document.getElementById('summer');
if ( summer.className == 'hidden' ) {
summer.className = 'visible';
} else {
summer.className = 'hidden';
}
}


function dubbel() {
var dubbel = document.getElementById('dubbel');
if ( dubbel.className == 'hidden' ) {
dubbel.className = 'visible';
} else {
dubbel.className = 'hidden';
}
}

function CZ101() {
var CZ101 = document.getElementById('CZ101');
if ( CZ101.className == 'hidden' ) {
CZ101.className = 'visible';
} else {
CZ101.className = 'hidden';
}
}

function social() {
var social = document.getElementById('social');
if ( social.className == 'hidden' ) {
social.className = 'visible';
} else {
social.className = 'hidden';
}
}


function ensoniq() {
var ensoniq = document.getElementById('ensoniq');
if ( ensoniq.className == 'hidden' ) {
ensoniq.className = 'visible';
} else {
ensoniq.className = 'hidden';
}
}

function boek() {
var boek = document.getElementById('boek');
if ( boek.className == 'hidden' ) {
boek.className = 'visible';
} else {
boek.className = 'hidden';
}
}

function NS10() {
var NS10 = document.getElementById('NS10');
if ( NS10.className == 'hidden' ) {
NS10.className = 'visible';
} else {
NS10.className = 'hidden';
}
}

function rare() {
var rare = document.getElementById('rare');
if ( rare.className == 'hidden' ) {
rare.className = 'visible';
} else {
rare.className = 'hidden';
}
}

function revox() {
var revox = document.getElementById('revox');
if ( revox.className == 'hidden' ) {
revox.className = 'visible';
} else {
revox.className = 'hidden';
}
}

function garden() {
var garden = document.getElementById('garden');
if ( garden.className == 'hidden' ) {
garden.className = 'visible';
} else {
garden.className = 'hidden';
}
}

function TR() {
var TR = document.getElementById('TR');
if ( TR.className == 'hidden' ) {
TR.className = 'visible';
} else {
TR.className = 'hidden';
}
}

function TBH() {
var TBH = document.getElementById('TBH');
if ( TBH.className == 'hidden' ) {
TBH.className = 'visible';
} else {
TBH.className = 'hidden';
}
}

function Studio() {
var Studio = document.getElementById('Studio');
if ( Studio.className == 'hidden' ) {
Studio.className = 'visible';
} else {
Studio.className = 'hidden';
}
}

function dropbox() {
var dropbox = document.getElementById('dropbox');
if ( dropbox.className == 'hidden' ) {
dropbox.className = 'visible';
} else {
dropbox.className = 'hidden';
}
}

function Shags() {
var Shags = document.getElementById('Shags');
if ( Shags.className == 'hidden' ) {
Shags.className = 'visible';
} else {
Shags.className = 'hidden';
}
}