//
// Card Table 
// Copyright 2007, Stephen Detwiler
//
//

var gRequestPool = null;
var gSelected = null;
var gDownX;
var gDownY;

var gIndex=0;
var gIntervalId = 0;
var gCardIndex = new Array();
var gMouseIsDown = false;
var gTrans = 1.0;
var gTransIntervalId = 0;

var gCardW = 266;
var gCardH = 160;

var gRangeSelect;

var gActiveMenu = null;

// Debug trace function.
function trace(str)
{
  var t = document.getElementById("tracediv");
  if(t == null)
    return;
  var s = new String();
  s = str + "<br>" + t.innerHTML;
  s = s.substr(0, 800);
  t.innerHTML = s;
}


///////////////////////////////////////////
// RequestHandler class.
// Handles request callbacks.
///////////////////////////////////////////
function RequestHandler(pool, client)
{
  this.mPool = pool;      // Owning RequestPool.
  this.mClient = client;  // Servicing XMLHttpRequest client.
  this.mRequest = null;   // The request to service.
  this.mOnReadyStateChange = null; // The XMLHttpRequest callback.

  //-----------------------------------------
  // request function.
  // Makes an HTTP request and notifies callback when ready.
  //-----------------------------------------
  RequestHandler.prototype.request = function(request)
  {
    this.mRequest = request;
    this.mClient.open(this.mRequest.mVerb, this.mRequest.mUrl, true);

    // Setting this every time for IE6 xmlhttprequest reuse.
    this.mClient.onreadystatechange = this.mOnReadyStateChange;

    this.mClient.send(null);
  };

  //-----------------------------------------
  // Internal callback function.
  //-----------------------------------------
  function createCallback(s)
  {
    var scope = s;
    var callbackFunc = function()
    {
      if(scope.mClient.readyState == 4)
      {
        // SCD: Strange hack. The callback function can't resolve this.mCard, so pass as parameter.
        // Call registered callback for this request.
        scope.mRequest.mCb(scope.mClient);
  
        // Return the XMLHttpRequest client for future use.
        scope.mPool.returnClient(scope.mClient);
      };
    };

    return callbackFunc;
  };

  // Create callback for the XMLHttpRequest client.
  this.mOnReadyStateChange = createCallback(this);
}





///////////////////////////////////////////
// Request class.
///////////////////////////////////////////
function Request(verb, url, callback)
{
//  trace("Request constructor. callback.mCard = " + callback.mCard);
  this.mVerb = verb;
  this.mUrl = url;
  this.mCb = callback;

//  trace("Request constructor. this.mCb.mCard = " + this.mCb.mCard);

}








///////////////////////////////////////////
// Pool of clients to handle requests.
///////////////////////////////////////////
function RequestPool(depth)
{
//  trace("Building RequestPool of size " + depth);
  this.mClientArray = new Array();
  var i;
  for(i=0; i<depth; ++i)
  {
    var curr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP.3.0");
    this.mClientArray[i] = curr;
  }

  this.mRequestArray = new Array();

  //-----------------------------------------
  // request function.
  //-----------------------------------------
  RequestPool.prototype.request = function(verb, url, callback)
  {
    this.mRequestArray.push(new Request(verb, url, callback));
    this.service();
  };


  //-----------------------------------------
  // Internal Functions.
  //-----------------------------------------


  //-----------------------------------------
  // service function.
  //-----------------------------------------
  RequestPool.prototype.service = function()
  {
//    trace("service");
    // Any outstanding requests?
    if(this.mRequestArray.length == 0)
    {
      return;
    }

    // Any available clients?    
    if(this.mClientArray.length == 0)
    {
      return;
    }

    // Get a client.
    var client = this.mClientArray.pop();

    // Get a request.
    var curr = this.mRequestArray.pop();

    var rh = new RequestHandler(this, client);
    rh.request(curr);
  };

  //-----------------------------------------
  // return client function.
  //-----------------------------------------
  RequestPool.prototype.returnClient = function(client)
  {
//    trace("returnClient");
    this.mClientArray.push(client);
    this.service();
  };
}









function mousedown(e, n)
{
  n = this.id;
  if(e == null)
  {
    e = window.event;
  }
  gMouseIsDown = true;  
  ++gIndex;
  gSelected = gCardIndex[n];

  gSelected.mView.style.zIndex = gIndex;
  gSelected.mCurrX = parseInt(gSelected.mView.style.left);
  gSelected.mCurrY = parseInt(gSelected.mView.style.top);
  gSelected.mTargetX = gSelected.mCurrX;
  gSelected.mTargetY = gSelected.mCurrY;
  gSelected.mDx = 0;
  gSelected.mDy = 0;

  gDownX = parseInt(e.clientX)-gSelected.mCurrX;
  gDownY = parseInt(e.clientY)-gSelected.mCurrY;
  return false;
}

function mouseup(e)
{
  n = this.id;
  if(e == null)
  {
    e = window.event;
  }

  gMouseIsDown = false;  
  if(gSelected)
  {
    if(gSelected.id == "highHandle" || gSelected.id == "lowHandle")
    {
      gSelected = null;
      return false;
    }

    gSelected.mCurrX = parseInt(gSelected.mView.style.left);
    gSelected.mCurrY = parseInt(gSelected.mView.style.top);

    gSelected.mTargetX = gSelected.mCurrX + Math.floor(gSelected.mDx*3);
    gSelected.mTargetY = gSelected.mCurrY + Math.floor(gSelected.mDy*3);

    // If momentum, animate.
    if(Math.abs(gSelected.mDx) > 2 || Math.abs(gSelected.mDy) > 2)
      startStep();
    else
      enableTrans();      

    gSelected = null;
  }

  return false;
}

function mousemove(e)
{
  if(e == null)
  {
    e = window.event;
  }

  if(gSelected)
  {
    if(gSelected.id == "highHandle" || gSelected.id == "lowHandle")
    {
      gRangeSelect.mousemove(e);
      return false;
    }

    // Can't drag expanded cards.
    if(gSelected.mCollapsed == false)
      return false;

    var newX = parseInt(e.clientX)-gDownX;
    var newY = parseInt(e.clientY)-gDownY;
    gSelected.mDx = newX - gSelected.mCurrX;
    gSelected.mDy = newY - gSelected.mCurrY;
    gSelected.mCurrX = newX;
    gSelected.mCurrY = newY;
    gSelected.mTargetX = newX;
    gSelected.mTargetY = newY;

    startStep();      
  }

  return false;
}


function mouseover(e, n)
{
  n = this.id;
  if(e == null)
  {
    e = window.event;
  }
  var cardObj = gCardIndex[n];
//  cardObj.mView.style.background = "#333333";
}

function mouseout(e, n)
{
  n = this.id;

  if(e == null)
  {
    e = window.event;
  }
  var cardObj = gCardIndex[n];
//  cardObj.mView.style.background = "#000000";
}


///////////////////////////////////
// Range Selection widget class.
///////////////////////////////////
function RangeSelect()
{
  this.mYearStart = 1995;
  this.mYearEnd = 2008;

  this.mHandleWidth = 10;
  this.mLow = 11;
  this.mHigh = 279;
  this.mMin = 10;
  this.mMax = 280;
  this.mNormalizedMax = this.mYearEnd - this.mYearStart;
  this.mRangePct = 100;

  this.mDownX = 0;

  this.mNormalizedLow = 0;
  this.mNormalizedHigh = 100;

  this.mLowHandle = document.getElementById("lowHandle");
  this.mHighHandle = document.getElementById("highHandle");
  this.mRange = document.getElementById("range");


  this.mLowHandle.style.left = this.mLow + "px";
  this.mHighHandle.style.left = this.mHigh + "px";



  //-----------------------------------------
  //-----------------------------------------
  this.setRange = function()
  {
    this.mRange.style.left = (this.mLow+this.mHandleWidth) + "px";
    this.mRange.style.width = ((this.mHigh-this.mLow)-this.mHandleWidth) + "px";
  
    this.mRangePct = parseInt(100*(this.mHigh - this.mLow)/(this.mMax-this.mMin));

    var oldLow = this.mNormalizedLow;
    var oldHigh = this.mNormalizedHigh;

    this.mNormalizedLow = this.mYearStart + parseInt(this.mLow/(this.mMax-this.mMin) * this.mNormalizedMax);
    this.mNormalizedHigh = this.mYearStart + parseInt(this.mHigh/(this.mMax-this.mMin) * this.mNormalizedMax);
    
    this.mRange.innerHTML = this.mNormalizedLow + " - " + this.mNormalizedHigh;

    if(oldLow != this.mNormalizedLow || oldHigh != this.mNormalizedHigh)
    {
      filterCardsByDateRange(this.mNormalizedLow, this.mNormalizedHigh)
    }
  }


  //-----------------------------------------
  //-----------------------------------------
  this.mousemove = function(e)
  {
     var currX = parseInt(gSelected.style.left) + (parseInt(e.clientX) - this.mDownX);
     if(gSelected.id == "highHandle")
     { 
       if((currX > this.mLow) && (currX < this.mMax) && (currX > this.mMin))
       {
         gSelected.style.left = currX + "px";
       }
       this.mHigh = currX;
     }
 
     else if(gSelected.id == "lowHandle")
     { 
       if((currX < this.mHigh) && (currX < this.mMax) && (currX > this.mMin))
       {
         gSelected.style.left = currX + "px";
       }
       this.mLow = currX;
     }
     else
     {
       return;
     }
 
     this.mDownX = parseInt(e.clientX);
 
     this.setRange();

     return false;
  }  
}



function rangemousedown(e)
{
  if(e.srcElement) // IE
    gSelected = e.srcElement;
  else             // Moz
    gSelected = e.target;
  gRangeSelect.mDownX = parseInt(e.clientX);
  return false;
}



function rangemouseup(e)
{
  gSelected = null;
  return false;
}

///////////////////////////////////
// Card class.
///////////////////////////////////
function Card()
{
  this.mTitle = new String();
  this.mStartDate = new String();
  this.mEndDate = new String();
  this.mDescription = new String();
  this.mView = null;
  this.mTargetX = 0;
  this.mTargetY = 0;
  this.mTargetW = gCardW;
  this.mTargetH = gCardH;
  this.mCurrW = gCardW;
  this.mCurrH = gCardH;
  this.mCollapsedX = 0;
  this.mCollapsedY = 0;
  this.mCollapsed = true;
  this.mDx = 0; // Distance translated on x for last move.
  this.mDy = 0; // Distance translated on y for last move.
  this.mPostId = 0; // Wordpress posting id.
  this.mThumbnailUrl = "";
  this.mDescriptionDiv = null;


  function createCallback(s)
  {
    var scope = s;
    var callbackFunc = function(xmlhttpreq)
    {
      scope.mDescriptionDiv.innerHTML = xmlhttpreq.responseText;
    };
    
    return callbackFunc;
  };

  this.loadCardCb = createCallback(this);
}




function setRandomTarget(card)
{
  var w = parseInt(document.body.clientWidth) - gCardW; // magic width of card.
  var h = parseInt(document.body.clientHeight) - (gCardH + 20); // magic height of card + 20.

  card.mView.style.zIndex = gIndex;

  card.mCurrX = w/2;
  card.mCurrY = h/2;
  card.mTargetX =  Math.floor(Math.random() * w);
  card.mTargetY =  Math.floor(Math.random() * h);
  card.mDx = Math.floor(Math.random() * 10);
  card.mDy = Math.floor(Math.random() * 10);
}




function expandCard(n)
{
  var cardObj = gCardIndex[n];

  if(cardObj.mCollapsed == false)
    return;

   cardObj.mCollapsed = false;

  cardObj.mCollapsedX = parseInt(cardObj.mView.style.left);//cardObj.mTargetX;
  cardObj.mCollapsedY = parseInt(cardObj.mView.style.top);//cardObj.mTargetY;
  cardObj.mTargetX = 5;
  cardObj.mTargetY = 5;


  var wW = parseInt(document.body.clientWidth);
  var wH = parseInt(document.body.clientHeight);

  // Landscape.
  if(wW > wH)
  {
    cardObj.mTargetW = wW * .9;
    cardObj.mTargetH = cardObj.mTargetW * (gCardH/gCardW);

    if(cardObj.mTargetH > wH)
    {
      cardObj.mTargetH = wH * .9;
      cardObj.mTargetW = cardObj.mTargetH * (gCardW/gCardH);
    }
  }

  // Portrait.
  else
  {
    cardObj.mTargetW = wW * .9;
    cardObj.mTargetH = cardObj.mTargetW * (gCardH/gCardW);


  }

  cardObj.mView.style.fontSize = "24pt";
  ++gIndex;
  cardObj.mView.style.zIndex = gIndex;

  startStep();
}



function collapseCard(n)
{
  var cardObj = gCardIndex[n];

  if(cardObj.mCollapsed == true)
    return;
 
   cardObj.mCollapsed = true;

  cardObj.mView.style.fontSize = "10pt";
  
  cardObj.mTargetX = cardObj.mCollapsedX;
  cardObj.mTargetY = cardObj.mCollapsedY;
  cardObj.mTargetW = gCardW;
  cardObj.mTargetH = gCardH;

  startStep();
}



function hideCard(n)
{
  var curr = gCardIndex[n];

//  curr.mTransCurr = 1.0;
  curr.mTransStep = -0.15;
  curr.mTransTarget = 0.0;

 // curr.mView.style.display="none";

}

function showCard(n)
{
  var curr = gCardIndex[n];

  curr.mTransStep = 0.15;
  curr.mTransTarget = 0.95;

//  cardObj.mView.style.display="block";
}

function toggleCard(e, n)
{
  n = this.id;
  var cardObj = gCardIndex[n];

  if(cardObj.mCollapsed)
    expandCard(n);

  else
    collapseCard(n);
}

function filterCardsByDateRange(start, end)
{
  var i;
  for(i=0; i < gCardIndex.length; ++i)
  {
    var curr = gCardIndex[i];
    if(curr.mStartYear >= start && curr.mStartYear <= end)
    {
      showCard(curr.mView.id);
    }
    else
    {
      hideCard(curr.mView.id);
    }
  }

  if(!gTransIntervalId)
    gTransIntervalId = setInterval("stepTrans2()", 1000/60);
}


function loadCard(cardObj)
{
  var url = "?p=" + cardObj.mPostId + "&c=" + cardObj.mPostId;
  gRequestPool.request("GET", url, cardObj.loadCardCb);
}

// function createCardView(cardObj)
// {
// //<div class="dnd" onmousedown="return mousedown(event);"><div class="card">
// //    <div class="cardImg"></div>
// //    <div class="cardStats">
// //      <span class="cardTitle">Tokyo Photography</span>
// //      <span class="cardDate">2006-09 - 2007-03</span>
// //      <span class="cardCategory">photography</span>
// //      <span class="cardCategory">travel</span>
// //    </div>
// //    <div class="cardDescription">description. <span class="cardMore">more...</span></div>
// //  </div></div>
// 
//   var dnd = document.createElement("DIV");
//   dnd.setAttribute("class", "dnd");
//   dnd.setAttribute("className", "dnd");
// 
//   dnd.setAttribute("id", gCardIndex.length);
// 
//   dnd.onmousedown = mousedown;
//   dnd.onmouseover = mouseover;
//   dnd.onmouseout = mouseout;
//   dnd.ondblclick = toggleCard;
// 
//   var card = document.createElement("DIV");
//   card.setAttribute("class", "card");
//   card.setAttribute("className", "card");
// 
//   var cardImg = null;
//   if(cardObj.mThumbnailUrl.length > 0)
//   {
//     cardImg = document.createElement("IMG");
//     cardImg.setAttribute("class", "cardImg");
//     cardImg.setAttribute("className", "cardImg");
//     cardImg.setAttribute("src", cardObj.mThumbnailUrl);
//   }
// 
//   var cardStats = document.createElement("DIV");
//   cardStats.setAttribute("class", "cardStats");
//   cardStats.setAttribute("className", "cardStats");
// 
//   var cardTitle = document.createElement("SPAN");
//   cardTitle.setAttribute("class", "cardTitle");
//   cardTitle.setAttribute("className", "cardTitle");
//   cardTitle.innerHTML = cardObj.mTitle;
// 
//   var cardDate = document.createElement("SPAN");
//   cardDate.setAttribute("class", "cardDate");
//   cardDate.setAttribute("className", "cardDate");
//   cardDate.innerHTML = cardObj.mStartYear + " " + cardObj.mEndDate;
// 
//   var cardDescription = document.createElement("DIV");
//   cardDescription.setAttribute("class", "cardDescription");
//   cardDescription.setAttribute("className", "cardDescription");
//   cardDescription.innerHTML = cardObj.mDescription;
//   cardObj.mDescriptionDiv = cardDescription;
// 
//   cardStats.appendChild(cardTitle);
//   cardStats.appendChild(cardDate);
// 
//   if(cardImg != null)
//     card.appendChild(cardImg);
//   card.appendChild(cardStats);
//   card.appendChild(cardDescription);
//   dnd.appendChild(card);
// 
//   ++gIndex;
// 
//   loadCard(cardObj);
// 
//   return dnd;
// }


function createCardView(cardObj, loadFromServer)
{
//<div class="dnd" onmousedown="return mousedown(event);"><div class="card">
//    <div class="cardImg"></div>
//    <div class="cardStats">
//      <span class="cardTitle">Tokyo Photography</span>
//      <span class="cardDate">2006-09 - 2007-03</span>
//      <span class="cardCategory">photography</span>
//      <span class="cardCategory">travel</span>
//    </div>
//    <div class="cardDescription">description. <span class="cardMore">more...</span></div>
//  </div></div>

  var dnd = document.createElement("DIV");
  dnd.setAttribute("class", "dnd");
  dnd.setAttribute("className", "dnd");

  dnd.setAttribute("id", gCardIndex.length);

  dnd.onmousedown = mousedown;
  dnd.onmouseover = mouseover;
  dnd.onmouseout = mouseout;
  dnd.ondblclick = toggleCard;

  var card = document.createElement("DIV");
  card.setAttribute("class", "card");
  card.setAttribute("className", "card");

  var cardImg = null;
  if(cardObj.mThumbnailUrl.length > 0)
  {
    cardImg = document.createElement("IMG");
    cardImg.setAttribute("class", "cardImg");
    cardImg.setAttribute("className", "cardImg");
    cardImg.setAttribute("src", cardObj.mThumbnailUrl);
  }

  var cardStats = document.createElement("DIV");
  cardStats.setAttribute("class", "cardStats");
  cardStats.setAttribute("className", "cardStats");

  var cardTitle = document.createElement("SPAN");
  cardTitle.setAttribute("class", "cardTitle");
  cardTitle.setAttribute("className", "cardTitle");
  cardTitle.innerHTML = cardObj.mTitle;

  var cardDate = document.createElement("SPAN");
  cardDate.setAttribute("class", "cardDate");
  cardDate.setAttribute("className", "cardDate");
  cardDate.innerHTML = cardObj.mStartYear + " " + cardObj.mEndDate;

  var cardDescription = document.createElement("DIV");
  cardDescription.setAttribute("class", "cardDescription");
  cardDescription.setAttribute("className", "cardDescription");
  cardDescription.innerHTML = cardObj.mDescription;
  cardObj.mDescriptionDiv = cardDescription;

  cardStats.appendChild(cardTitle);
  cardStats.appendChild(cardDate);

  if(cardImg != null)
    card.appendChild(cardImg);
  card.appendChild(cardStats);
  card.appendChild(cardDescription);
  dnd.appendChild(card);

  ++gIndex;

  if(loadFromServer)
    loadCard(cardObj);

  return dnd;
}




function enableTrans()
{
  if(gTransIntervalId)
    return;


  for(i=0; i < gCardIndex.length; ++i)
  {
    var curr = gCardIndex[i];
    curr.mTransCurr = 1.0;
    curr.mTransStep = -.025;
    curr.mTransTarget = 0.95;
  }

  gTransIntervalId = setInterval("stepTrans2()", 1000/60);
}

function disableTrans()
{

  for(i=0; i < gCardIndex.length; ++i)
  {
    var curr = gCardIndex[i];
    curr.mTransCurr = 1.0;
    curr.mTransStep = 0.0;
    curr.mTransTarget = 1.0;
  }

  if(gTransIntervalId == 0)
    gTransIntervalId = setInterval("stepTrans2()", 1000/60);
 

//  gTransIntervalId = 0;
//  gTrans = 1.0;
//  for(i=0; i < gCardIndex.length; ++i)
//  {
//    var curr = gCardIndex[i];
//    curr.mView.style.MozOpacity = gTrans;
//    curr.mView.style.filter = "";
//  }
}

function stepTrans()
{
  gTrans-=.025;
  if(gTrans<=0.95)
  {
    gTrans = 0.95;
    clearInterval(gTransIntervalId);
    gTransIntervalId = 0;
  }

  for(i=0; i < gCardIndex.length; ++i)
  {
    var curr = gCardIndex[i];
    curr.mView.style.MozOpacity = gTrans;
    curr.mView.style.filter = "alpha(style=0,opacity=" + (gTrans*100) + ")";
  }
}


function stepTrans2()
{
  var bRemain = false;
  var bNew;

  for(i=0; i < gCardIndex.length; ++i)
  {
    bNew = false;
    var curr = gCardIndex[i];
    var newTrans = curr.mTransCurr + curr.mTransStep;

    // If Trans is decresing and curr is larger than target.
    if((curr.mTransStep < 0) && curr.mTransCurr > curr.mTransTarget)
    {
      bRemain = true;
      bNew = true;
    }

    // If trans is increasing and curr is smaller than target.
    else if((curr.mTransStep > 0) && curr.mTransCurr < curr.mTransTarget)
    {
      bRemain = true;
      bNew = true;
    }

    // Disable trans state.
    else if(curr.mTransStep == 0)
    {
      bNew = true;
    }

    if(bNew)
    {
      curr.mTransCurr = newTrans;
      curr.mView.style.MozOpacity = curr.mTransCurr;
      curr.mView.style.filter = "alpha(style=0,opacity=" + (curr.mTransCurr*100) + ")";
    }

  }  

  if(!bRemain)
  {  
    clearInterval(gTransIntervalId);
    gTransIntervalId = 0;
  }
//  trace("bRemain: " + bRemain);
}


function startStep()
{
  disableTrans();
  if(!gIntervalId)
    gIntervalId = setInterval("step()", 1000/60);
}

function step()
{
  var bRemain = false;

  var i;
  for(i=0; i < gCardIndex.length; ++i)
  {
    var newX;
    var newY;
    var newW;
    var newH;

    var curr = gCardIndex[i];
 
    newX = ((curr.mTargetX - curr.mCurrX)/2.5);
    newY = ((curr.mTargetY - curr.mCurrY)/2.5);
    newW = ((curr.mTargetW - curr.mCurrW)/2);
    newH = ((curr.mTargetH - curr.mCurrH)/2);

//    trace("[" + i + "]" + newW + ", " + newH + "target: " + curr.mTargetW + ", " + curr.mTargetH);

    if((Math.abs(newX) > 1) || (Math.abs(newY) > 1) || (Math.abs(newW) > 1) || (Math.abs(newH) > 1))
    {
      bRemain = true;
      curr.mCurrX += newX;
      curr.mCurrY += newY;
      curr.mCurrW += newW;
      curr.mCurrH += newH;
    }
    else
    {
      curr.mDx = 0;
      curr.mDy = 0;
      curr.mCurrX = curr.mTargetX;
      curr.mCurrY = curr.mTargetY;
      curr.mCurrW = curr.mTargetW;
      curr.mCurrH = curr.mTargetH;
    }

    curr.mView.style.left = curr.mCurrX + "px";
    curr.mView.style.top = curr.mCurrY + "px";
    curr.mView.style.width = curr.mCurrW + "px";
    curr.mView.style.height = curr.mCurrH + "px";
  }

  if(bRemain == false)
  {
    if(gMouseIsDown == false)
      enableTrans();
  
    clearInterval(gIntervalId);
    gIntervalId = 0;
  }
}

function getArgs() 
{
  var args = new Object();
  var query = location.search.substring(1);
  var pairs = query.split("&");
  for(var i = 0; i < pairs.length; i++)
  {
    var pos = pairs[i].indexOf('=');
    if (pos == -1) 
      continue;
    var argname = pairs[i].substring(0,pos);
    var value = pairs[i].substring(pos+1);
    args[argname] = unescape(value);
  }
  return args;
}

function lookForCard()
{
  var args = getArgs();
  if(args.c)
  {
    var c = parseInt(args.c);
    for(i=0; i < gCardIndex.length; ++i)
    {
      var curr = gCardIndex[i];
      if(curr.mPostId == c)     
      {
        expandCard(i);
        break;
      }

    }

  } 
// 	  else
//    trace("no c");
}

function initCardTable()
{
  gRequestPool = new RequestPool(4);
  gCardTable = document.getElementById("cardTable");
  gActiveMenu = document.getElementById("time");
  gRangeSelect = new RangeSelect();
  gRangeSelect.setRange();
  buildCards();
  createWelcomeCard();
  startStep();
  lookForCard();
}

function setActiveMenu(name)
{
  gActiveMenu.style.display = "none";
  gActiveMenu = document.getElementById(name);
  gActiveMenu.style.display = "block";
}

function createWelcomeCard()
{
    card = new Card();
    card.mPostId = 99999999;
    card.mTitle = "Welcome";
    card.mStartYear = "2008";
    card.mStartMonth = "1";
    card.mEndDate = "";
    card.mDescription = "Find something interesting by dragging the cards around. Double click on a card to learn more.";
    card.mThumbnailUrl = "";
    card.mView = createCardView(card);

    var w = parseInt(document.body.clientWidth) - gCardW; // magic width of card.
    var h = parseInt(document.body.clientHeight) - (gCardH + 20); // magic height of card + 20.
    card.mView.style.zIndex = gIndex;
    card.mCurrX = w/2;
    card.mCurrY = h/2;
    card.mTargetX =  card.mCurrX;
    card.mTargetY =  card.mCurrY;
    card.mDx = Math.floor(Math.random() * 10);
    card.mDy = Math.floor(Math.random() * 10);
    gCardIndex.push(card);
  

    gCardTable.appendChild(card.mView);
}