var timerlen = 5;
var slideAniLen = 450;
var InDr;

var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var endWidth = new Array();

var CurrentHeight = new Array();
var CurrentWidth = new Array();

var moving = new Array();
var dir = new Array();
var moving = 'NA';
var AlreadySliding = null;
var AlreadyResizing = null;
function ResizeDiv(objname) {
  if (AlreadyResizing != null) {
    return;
  }
  AlreadyResizing = true;
  if (document.getElementById(objname).style.display == 'block') {
    obj[objname] = document.getElementById(objname);
    endHeight[objname] = 120;
    endWidth[objname] = 250;
    startTime[objname] = (new Date()).getTime();
    CurrentHeight[objname] = 270;
    CurrentWidth[objname] = 539;
    obj[objname].style.height = "270px";
    obj[objname].style.width = "539px";
    obj[objname].style.display = '';
    moving = 'small';
    timerID[objname] = setInterval('slidetickAll(\'' + objname + '\');', timerlen);
  }

  else {
    obj[objname] = document.getElementById(objname);
    document.getElementById('spacer1').style.display = 'none';
    document.getElementById('spacer2').style.display = 'none';
    document.getElementById('spacer3').style.display = 'none';
    if (objname == 'Relax') {
      document.getElementById('comfort').style.display = 'none';
      document.getElementById('Relax').style.display = 'block';
      document.getElementById('peace').style.display = 'none';
      document.getElementById('villa').style.display = 'none';
    }
    if (objname == 'peace') {
      document.getElementById('Relax').style.display = 'none';
      document.getElementById('peace').style.display = 'block';
      document.getElementById('villa').style.display = 'none';
      document.getElementById('comfort').style.display = 'none';
    }
    if (objname == 'villa') {
      document.getElementById('Relax').style.display = 'none';
      document.getElementById('peace').style.display = 'none';
      document.getElementById('villa').style.display = 'block';
      document.getElementById('comfort').style.display = 'none';
    }
    if (objname == 'comfort') {
      document.getElementById('Relax').style.display = 'none';
      document.getElementById('peace').style.display = 'none';
      document.getElementById('villa').style.display = 'none';
      document.getElementById('comfort').style.display = 'block';
    }
    //FINAL HT AND WT OF THE TRAY
    endHeight[objname] = 270;
    endWidth[objname] = 539;

    startTime[objname] = (new Date()).getTime();
    obj[objname].style.height = "0px";
    obj[objname].style.width = "0px";
    moving = 'large';
    timerID[objname] = setInterval('slidetickAll(\'' + objname + '\');', timerlen);
  }
}

function slidedown(objname) {
  if (moving[objname])
    return;

  if (document.getElementById(objname).style.display != "none")
    return; // cannot slide down something that is already visible

  moving[objname] = true;
  dir[objname] = "down";
  startslide(objname);
}
function slideleft(objname) {
  if (moving[objname])
    return;

  if (document.getElementById(objname).style.display == "none")
    return; // cannot slide down something that is already visible

  moving[objname] = true;
  dir[objname] = "left";
  startslide(objname);
}

function slideright(objname) {
  if (moving[objname])
    return;

  if (document.getElementById(objname).style.display != "none")
    return; // cannot slide down something that is already visible

  moving[objname] = true;
  dir[objname] = "right";

  startslide(objname);
}

function slideup(objname) {
  if (moving[objname])
    return;

  if (document.getElementById(objname).style.display == "none")
    return; // cannot slide up something that is already hidden

  moving[objname] = true;
  dir[objname] = "up";
  startslide(objname);
}

function startslide(objname) {
  obj[objname] = document.getElementById(objname);
  endHeight[objname] = parseInt(obj[objname].style.height);
  endWidth[objname] = parseInt(obj[objname].style.width);

  startTime[objname] = (new Date()).getTime();

  if (dir[objname] == "down") {
    obj[objname].style.height = "1px";
  }
  if (dir[objname] == "right") {
    obj[objname].style.width = "1px";
  }

  obj[objname].style.display = "block";

  timerID[objname] = setInterval('slidetick(\'' + objname + '\');', timerlen);
}

function slidetick(objname) {
  var elapsed = (new Date()).getTime() - startTime[objname];

  if (elapsed > slideAniLen)
    endSlide(objname);
  else {
    if (dir[objname] == "up" || dir[objname] == "down") {
      var d = Math.round(elapsed / slideAniLen * endHeight[objname]);
      if (dir[objname] == "up")
        d = endHeight[objname] - d;

      obj[objname].style.height = d + "px";
    }
    else {
      var d = Math.round(elapsed / slideAniLen * endWidth[objname]);
      if (dir[objname] == "left") {
        d = endWidth[objname] - d;
      }

      obj[objname].style.width = d + "px";
    }
  }
  return;
}
function slidetickAll(objname) {
  var elapsed = (new Date()).getTime() - startTime[objname];
  if (elapsed > slideAniLen)
    endSlide(objname);
  else {
    var xHeight = Math.round(elapsed / slideAniLen * endHeight[objname]);

    if (moving == 'small') {
      xHeight = CurrentHeight[objname] - xHeight;
    }
    obj[objname].style.height = xHeight + "px";
    var xWidth = Math.round(elapsed / slideAniLen * endWidth[objname]);
    if (moving == 'small') {
      xWidth = CurrentWidth[objname] - xWidth;
    }
    obj[objname].style.width = xWidth + "px";
  }
  return;
}

function endSlide(objname) {
  clearInterval(timerID[objname]);

  if (dir[objname] == "up" || dir[objname] == "left")
    obj[objname].style.display = "none";

  obj[objname].style.height = endHeight[objname] + "px";
  obj[objname].style.width = endWidth[objname] + "px";

  delete (moving[objname]);
  delete (timerID[objname]);
  delete (startTime[objname]);
  delete (endHeight[objname]);
  delete (endWidth[objname]);
  delete (dir[objname]);
  AlreadySliding = null;
  AlreadyResizing = null;

  if (moving == 'small') {
    document.getElementById('Relax').style.display = '';
    document.getElementById('SlideA').src = 'imgs/common/Slider_BlueOFF.gif';
    document.getElementById('peace').style.display = '';
    document.getElementById('SlideB').src = 'imgs/common/Slider_YellowOFF.gif';
    document.getElementById('villa').style.display = '';
    document.getElementById('SlideC').src = 'imgs/common/Slider_YellowOFF.gif';
    document.getElementById('comfort').style.display = '';
    document.getElementById('SlideD').src = 'imgs/common/Slider_BlueOFF.gif';

    document.getElementById('spacer1').style.display = '';
    document.getElementById('spacer2').style.display = '';
    document.getElementById('spacer3').style.display = '';
    document.getElementById(objname).style.display = '';
  }
  if (moving != 'small') {
    ChangeDottedImage(objname);
  }
  return;
}
function toggleSlide(objname, direction, hideDiv) {
  if (AlreadySliding != null) {
    return;
  }
  AlreadySliding = 1;
  if (direction == 'vertical') {
    if (document.getElementById(objname).style.display == "none") {
      document.getElementById(hideDiv).style.display == "none";
      document.getElementById(hideDiv).style.visibility = "hidden";
      // div is hidden, so let's slide down
      slidedown(objname);
    } else {
      // div is not hidden, so slide up
      slideup(objname);
    }
  }
  else if (direction == 'horizontol') {

    if (document.getElementById(objname).style.display == "none") {
      slideright(objname);

    } else {
      // div is not hidden, so slide up
      slideleft(objname);
    }
  }
}
function ChangeDottedImage(objname) {
  if (objname == 'Relax') {
    document.getElementById('SlideB').style.display = 'block';
    document.getElementById('SlideB').style.visibility = 'visible';
    document.getElementById('SlideB').src = 'imgs/common/Slider_YellowBigOFF.gif';
  }
  if (objname == 'peace') {
    document.getElementById('SlideC').style.display = 'block';
    document.getElementById('SlideC').style.visibility = 'visible';
    document.getElementById('SlideC').src = 'imgs/common/Slider_YellowBigOFF.gif';
  }
  if (objname == 'villa') {
    document.getElementById('SlideD').style.display = 'block';
    document.getElementById('SlideD').style.visibility = 'visible';
    document.getElementById('SlideD').src = 'imgs/common/Slider_BlueBigOFF.gif';
  }
  if (objname == 'comfort') {
    document.getElementById('SlideA').style.display = 'block';
    document.getElementById('SlideA').style.visibility = 'visible';
    document.getElementById('SlideA').src = 'imgs/common/Slider_BlueBigOFF.gif';
  }
}