/* 
   Author : Jeremy Keith
   url: http://adactio.com
   */
/*
makeSlideshow is triggered by another function (see, for example, archivedSites.js).
This function takes three arguments.
The first argument is an array of information.
The function uses this information to create a <div> and an <img>.
These are then instered into the document.
The second argument is an array of coordinates.
The function uses this information to add onmouseover behaviour to a list of links.
The mouseover behaviour invokes the slideElement function (see below).
The third argument is the link list itself.
If that link list doesn't exist, the function returns false.
*/
function makeSlideshow(details,coords,linkholder) {
 if (!document.getElementById) return false;
 if (!document.getElementById(linkholder)) return false;
 if (document.getElementById("project-holder")) {
 document.getElementById("project-holder").style.display = 'none';
 document.getElementById(linkholder).style.display = 'block';
 }
 var pane = document.createElement('div');
 pane.style.width = details['width'];
 pane.style.height = details['height'];
 pane.style.overflow = 'hidden';
 pane.className = 'screenthumb';
 pane.style.position = 'relative';
 var pic = document.createElement('img');
 pic.setAttribute('id',details['id']);
 pic.setAttribute('src',details['image']);
 pic.setAttribute('alt','');
 pic.style.border = '0';
 pic.style.position = 'absolute';
 pane.appendChild(pic);
 var linklist = document.getElementById(linkholder);
 linklist.parentNode.insertBefore(pane,linklist);
 var lnks = linklist.getElementsByTagName('a');
 for (var i=0;i<lnks.length;i++) {
  var linktext = lnks[i].childNodes[0].nodeValue;
  if (coords[linktext]) {
   lnks[i].elementId = details['id'];
   lnks[i].x = coords[linktext][0];
   lnks[i].y = coords[linktext][1];
   lnks[i].sliding = null;
   lnks[i].onmouseover = function() {
    slideElement(this.elementId,this.x,this.y,6);
   };
   lnks[i].onfocus = lnks[i].onmouseover;
  }
 }
}
/*
This function changes the 'left' and 'top' properties of an element.
The function takes four arguments.
The first argument is the ID of the element to be moved.
The second argument is the 'left' position that the element should be moved to.
The third argument is the 'top' position that the element should be moved to.
The fourth argument is the increment.
This determines how much the element moves each time.
For instance, sending 2 as the increment will halve the distance travelled by the element each time.
This function invokes itself (with a delay) until the element has reached the desired coordinates.
If you'd like to use this function yourself, go ahead.
Drop me a line to let me know where I can see it in action:
http://adactio.com/contact/
*/
function slideElement(elementId,x,y,inc) {
 if (!document.getElementById) return false;
 if (!document.getElementById(elementId)) return false;
 var element = document.getElementById(elementId);
 if (element.sliding) clearTimeout(element.sliding);
 if (!element.xpos) element.xpos = 0;
 if (!element.ypos) element.ypos = 0;
 if (element.xpos == x && element.ypos == y) return true;
 if (element.xpos > x) {
  var dist = Math.ceil((element.xpos-x)/inc);
  element.xpos = element.xpos - dist;
 }
 if (element.xpos < x) {
  var dist = Math.ceil((x-element.xpos)/inc);
  element.xpos = element.xpos + dist;
 }
 if (element.ypos > y) {
  var dist = Math.ceil((element.ypos-y)/inc);
  element.ypos = element.ypos - dist;
 }
 if (element.ypos < y) {
  var dist = Math.ceil((y-element.ypos)/inc);
  element.ypos = element.ypos + dist;
 }
 element.style.left = element.xpos+'px';
 element.style.top = element.ypos+'px';
 element.sliding = setTimeout('slideElement("'+elementId+'",'+x+','+y+','+inc+')',10);
}
/*
This is very similar to slideElement.
The difference is that this function changes the style property 'background-position'.
This function is not in active use.
Internet Explorer on Windows insisted on downloading the background image each time.
This made the function unusable.
*/
function slideBackground(elementId,x,y,inc) {
 if (!document.getElementById) return false;
 if (!document.getElementById(elementId)) return false;
 var element = document.getElementById(elementId);
 if (element.sliding) {
  clearTimeout(element.sliding);
 }
 if (!element.xpos) element.xpos = 0;
 if (!element.ypos) element.ypos = 0;
 if (element.xpos == x && element.ypos == y) return true;
 if (element.xpos > x) {
  var dist = Math.ceil((element.xpos-x)/inc);
  element.xpos = element.xpos - dist;
 }
 if (element.xpos < x) {
  var dist = Math.ceil((x-element.xpos)/inc);
  element.xpos = element.xpos + dist;
 }
 if (element.ypos > y) {
  var dist = Math.ceil((element.ypos-y)/inc);
  element.ypos = element.ypos - dist;
 }
 if (element.ypos < y) {
  var dist = Math.ceil((y-element.ypos)/inc);
  element.ypos = element.ypos + dist;
 }
 element.style.backgroundPosition = element.xpos+'px '+element.ypos+'px';
 element.sliding = setTimeout('slideBackground("'+elementId+'",'+x+','+y+','+inc+')',10);
}


/*
This function simply stores some information that will be used by the makeSlideshow function.
See global.js for details on the makeSlideshow function.
This function is triggered when the page loads.
The addLoadEvent.js file is required for this.
  */

function archivedSites() {
 var panel_details = new Array();
 panel_details['id'] = 'previewpane';
 panel_details['image'] = 'imgss/project.gif';
 panel_details['width'] = '150px';
 panel_details['height'] = '100px';
 var coords = new Array();
 coords['1'] = new Array(-150,0);
 coords['2'] = new Array(-300,0);
 coords['3'] = new Array(-450,0);
 coords['4'] = new Array(-600,0);
 var linkholder = 'thumblinks';
 makeSlideshow(panel_details,coords,linkholder);
}