/* -------------------------------------- 
-- I must admit that creating the sliding
-- scripts took me quite a while because
-- I had a few qualms with the way it kept
-- on behaving. After about a month of
-- tinkering with it I finally got it to
-- behave the way I wanted it to. In an
-- effort to remember what I did as well
-- as a reference for anyone who might be
-- interested, I will describe the basic
-- concept. The following description
-- explains the problems I came accross
-- and what I did to fix the issue in,
-- my opinion, very specific detail.

Let me begin by saying that, in the end, I decided to use the setTimeout() function instead of the setInterval() function. The
primary reason for doing this is simply because I kept on switching between the two in an attempt to get things to finally work,
and setTimeout() was the one which I was implementing when everything finally came together.

Basic concept:
My basic concept of how these sliders work is that as you move your mouse over a link, a small box will appear which contains a
preview of what is on the page the link is directed towards. As the mouse moves off of the link, the small box will slide back into
its original position.

First problem:

It took me a little while to understand how the setInterval() and setTimeout() functions work and to get them to 'slide' a css object
(and no, I'm still not completely sure what the differences between the two are off the top of my head: To see implementation and
examples, check http://www.w3schools.com/ and do a google search for setInterval() and/or setTimeout()). Originally, I thought that
all I would really have to worry about would be getting the boxes to slide, but as I finally implemented them, I realized that the
boxes were not actually behaving as I imagined they would. Primarily, I noticed that when the mouse moved over the link, the box would
'slide' on screen (this, obviously, was intended) and while, if I moved the mouse off of the link, the box 'slid' back into place, if
the mouse gained focus onto another link the first box would stop wherever it was and the second box would begin its movement. As this
continued to occur, it began to look sloppier and sloppier. It ended up that I realized the problem centered around all of the boxes
having shared the same timer, so when one box would start sliding, it would cancel the timer and go on its way and when the focus on
the link changed, the timer would stop again. The solution to this was to create a separate timer for every link.

Second problem:
My second issue ended up being hidden as part of the first one in that I thought the two problems were the same until close to me
having figured everything out. My problem was basically that I was passing variables by value instead of by reference. This resulted
in (for the usage of setTimeout()) the boxes sliding out, but only one step at a time. Visually, every time I moved the mouse over a
link, the box would 'step' once and stop. Then, if I moved the cursor over the link again, it would step again. This would continue
only forward and not backwards. Specifically, the problem was that I was only passing values and therefore the variables themselves
would not increment. The real solution to this problem would be to pass the variables by reference (which I am not yet sure how to
do in javascript) In the meantime, there are several more functions (which are much more specific) than there realistically should be.
All told, if this was able to be implemented, I could probably cut this code down to about 4 or 5 functions. Until I figure that out
(if it is even possible).

The following code:
In the following code I will explain what each line actually does. As I have already mentioned, there are several functions which
are essentially the exact same thing except that they are for different links. When it gets to these functions, I will only describe
the first appearance of that function in order to avoid repeating myself any more than I already have.

*/

var beg = 5;		// px position when the slider is fully shown on the screen
var end = -290;		// px position when the slider is fully hidden on the screen 

var pos = end;		// starting style.right px position (this is equal to the fully hidden position (end))

var step = 5;		// this is the number of px a box will move during every increment (too hight and boxes move choppily)
var speed = 10;		// this is the speed in ms for each step (total speed is equal to speed * step) (too low and it will use too much processing)

/* The following variables are constant variables which will be used to point to the boxes by their respective id's (the id's are equal to the variables */
var index = 'slider-index';
var links = 'slider-links';
var pictures = 'slider-pictures';
var archives = 'slider-archives';
var aboutme = 'slider-aboutme';

/* The following are other constant variables */
var on = 'on';		// Constant variable which checks to see if the direction is sliding 'on' ('off' is default, so there will be no variable for it)
var raise = '2';	// Constant variable which is used to change the z-index of a box as it is sliding on screen
var lower = '1';	// Constant variable which is used to change the z-index of a box as it is sliding off screen

/* The following are the individual timer variables for each link */
var index_timer;
var links_timer;
var pictures_timer;
var archives_timer;
var aboutme_timer;

/* Since I want each box to move independently, they each need to have a variable which holds the px location of style.right */
var index_pos = pos;
var links_pos = pos;
var pictures_pos = pos;
var archives_pos = pos;
var aboutme_pos = pos;

/* slide{Link}(dir) - 'dir' indicates the direction that the individual box is sliding (on or off) */
function slideIndex(dir)
{
  clearTimeout(index_timer);	// The timer needs to be stopped in case the box is still sliding.

  if(dir == on)			// If the function is called and 'on' is set, then the boxes are to be slid onto the screen
  {
    setZIndex(index, raise);	// To make it look more visually appealing, the box that is currently sliding on is also to be on top of the others
    slideOnIndex();		// Physically slide the box ({Link}) onto the screen
  }

  else
  {
    setZIndex(index, lower);	// To make it look more visually appealing, any box which does not have focus, is to be set to this level (the box sliding on is on top)
    slideOffIndex();		// Slide the {Link} box off screen
  }
}

function slideLinks(dir)
{
  clearTimeout(links_timer)

  if(dir == on)
  {
    setZIndex(links, raise);
    slideOnLinks();
  }

  else
  {
    setZIndex(links, lower);
    slideOffLinks();
  }
}

function slidePictures(dir)
{
  clearTimeout(pictures_timer);

  if(dir == on)
  {
    setZIndex(pictures, raise);
    slideOnPictures();
  }

  else
  {
    setZIndex(pictures, lower);
    slideOffPictures();
  }
}

function slideArchives(dir)
{
  clearTimeout(archives_timer);

  if(dir == on)
  {
    setZIndex(archives, raise);
    slideOnArchives();
  }

  else
  {
    setZIndex(archives, lower);
    slideOffArchives();
  }
}

function slideAboutme(dir)
{
  clearTimeout(aboutme_timer);

  if(dir == on)
  {
    setZIndex(aboutme, raise);
    slideOnAboutme();
  }

  else
  {
    setZIndex(aboutme, lower);
    slideOffAboutme();
  }
}

/* function slideOn{Link}() - takes no variables */
function slideOnIndex()
{
  if(index_pos >= beg)			// If the current position of the box is equal to the position it needs to get to to be on screen, then:
  {
    clearTimeout(index_timer);		//	stop the timer for that {Link}
    return;				//	and quit out of the function (end of cycling)
  }

  index_pos += step;			// If you have reached this point, then increment the px position of the box
  setStyleRight(index, index_pos);	// This line physically moves the box ({Link}) to {Link}_pos
  index_timer = setTimeout("slideOnIndex()", speed);	// Wait the specified amount of time (speed) and then run the function again
}

function slideOffIndex()
{
  if(index_pos <= end)
  {
    clearTimeout(index_timer);
    return;
  }

  index_pos -= step;
  setStyleRight(index, index_pos);
  index_timer = setTimeout("slideOffIndex()", speed);
}


function slideOnLinks()
{
  if(links_pos >= beg)
  {
    clearTimeout(links_timer);
    return;
  }

  links_pos += step;
  setStyleRight(links, links_pos);
  links_timer = setTimeout("slideOnLinks()", speed);
}

function slideOffLinks()
{
  if(links_pos <= end)
  {
    clearTimeout(links_timer);
    return;
  }

  links_pos -= step;
  setStyleRight(links, links_pos);
  links_timer = setTimeout("slideOffLinks()", speed);
}


function slideOnPictures()
{
  if(pictures_pos >= beg)
  {
    clearTimeout(pictures_timer);
    return;
  }

  pictures_pos += step;
  setStyleRight(pictures, pictures_pos);
  pictures_timer = setTimeout("slideOnPictures()", speed);
}

function slideOffPictures()
{
  if(pictures_pos <= end)
  {
    clearTimeout(pictures_timer);
    return;
  }

  pictures_pos -= step;
  setStyleRight(pictures, pictures_pos);
  pictures_timer = setTimeout("slideOffPictures()", speed);
}


function slideOnArchives()
{
  if(archives_pos >= beg)
  {
    clearTimeout(archives_timer);
    return;
  }

  archives_pos += step;
  setStyleRight(archives, archives_pos);
  archives_timer = setTimeout("slideOnArchives()", speed);
}

function slideOffArchives()
{
  if(archives_pos <= end)
  {
    clearTimeout(archives_timer);
    return;
  }


  archives_pos -= step;
  setStyleRight(archives, archives_pos);
  archives_timer = setTimeout("slideOffArchives()", speed);
}


function slideOnAboutme()
{
  if(aboutme_pos >= beg)
  {
    clearTimeout(aboutme_timer);
    return;
  }

  aboutme_pos += step;
  setStyleRight(aboutme, aboutme_pos);
  aboutme_timer = setTimeout("slideOnAboutme()", speed);
}

function slideOffAboutme()
{
  if(aboutme_pos <= end)
  {
    clearTimeout(aboutme_timer);
    return;
  }

  aboutme_pos -= step;
  setStyleRight(aboutme, aboutme_pos);
  aboutme_timer = setTimeout("slideOffAboutme()", speed);
}

/* This simple function takes the box's ID and the new position it is to be moved to and then physically moves it */
function setStyleRight(id, new_pos)
{
  document.getElementById(id).style.right = new_pos + 'px';
}

/* This function takes the box's ID and the direction (dir = z-index) and moves it, physically, to that z-index */
function setZIndex(id, dir)
{
  document.getElementById(id).style.zIndex = dir;
}