var detailWidth = 30;
var maxCalendarWidth = 100;
var detailFunction = null;
//var detailFunction = doEvent;
// Detail speed ranges from 1 (slowest) to 10 (fastest)
var detailSpeed = 10;
var currentEvent = null;
var calendarType = "slider";
var calendarType = "fade";

var replacementLink = "";

var displayFunction = null;

var detailPane   = null;
var calendarPane = null;
var mask         = null;

var maxOpacity = 80;
var fadeInTime = 500;

var browserType, ie, opera;

var flashArray;

var myBody;
var bodyHeight;

function initCalendar()
{ 
   browserType = window.navigator.userAgent;
   if(browserType.indexOf("IE") != -1) {
      ie = true;
      // IE 6 doesn't fade out the whole width of the page. If someone knows how to fix this,
      //   please do and remove the following condition.
      if (browserType.indexOf("IE 6") != -1) {
        return;
      }
   }
   if(browserType.indexOf("Opera") != -1)
      opera = true;

   calendarPane  = document.getElementById("calendarView");
   detailPane    = document.getElementById("calendarDetail");
   detailContent = document.getElementById("calendarDetailContent");

   calendarPane.style.width=maxCalendarWidth+"%";
   
   if(calendarType == "slider")
   {
      displayFunction = expandDetail;
      document.getElementById("closeButton").href = "javascript: compressDetail(); void(0);";
      setSliderStyle();
   }
   else
   {
      document.getElementById("closeButton").href = "javascript: fadeOutDetail(); void(0);";
      displayFunction = fadeInDetail;
      setFadeStyle();
   }

   replaceLinks();
   if(ie)
      flashArray = document.getElementsByTagName("object");
   else
      flashArray = document.getElementsByTagName("embed");
   return true;
}

function expandDetail()
{
   if(detailPane.style.display != "block")
      detailPane.style.display = "block";

   var currentWidth = detailPane.style.width;
   currentWidth = Number(currentWidth.replace(/([0-9]*)[^0-9]+/,"$1"));

   if(currentWidth < detailWidth)
   {
      currentWidth+=detailSpeed;
      
      if(currentWidth > detailWidth)
         currentWidth = detailWidth;

      calendarPane.style.width = (maxCalendarWidth-currentWidth)+"%";
      detailPane.style.width = currentWidth+"%";
      setTimeout(expandDetail,1);
   }
   else
      if(detailFunction != null)
         setTimeout(detailFunction,0);
}

function compressDetail()
{
   if(detailPane.style.display != "none")
      detailPane.style.display = "none";

   var currentWidth = detailPane.style.width;
   currentWidth = Number(currentWidth.replace(/([0-9]*)[^0-9]+/,"$1"));
   if(currentWidth > 0)
   {
      currentWidth-=detailSpeed;

      if(currentWidth < 0)
         currentWidth = 0;

      calendarPane.style.width = (maxCalendarWidth-currentWidth)+"%";
      detailPane.style.width = currentWidth+"%";
      setTimeout(compressDetail,1);
   }
}

function replaceLinks()
{
   var linksArray = document.getElementsByTagName("a");

   for( test in linksArray)
   {   
      if(typeof(linksArray[test].href) == "string" && linksArray[test].href.match(/.*entries\/view.*/))
      {
         linksArray[test].onclick = function() {
           var tmp = this.href;
           tmp = tmp.replace(/.*view\/([0-9]+)/,"$1");
           showDetail(tmp, this.href);
           return false;
         };
         linksArray[test].target = "";
      }
   }
}

function showDetail(eventID, originalLink)
{
   currentEvent = eventID;
   detailContent.innerHTML = detailArray[currentEvent];
   // GMH: This checks for the existence of the Google Analytics pagetracker. If it's defined, 
   //   register a hit for this calendar event
   if (pageTracker) {	
        GAhit = originalLink.replace(/^http:\/\/[A-Za-z\.]+/, '');
        pageTracker._trackPageview(GAhit);   
   } 
   if(typeof(adminCalendar) == "function")
      adminCalendar(eventID);
   setTimeout(displayFunction,0);
}

function doEvent()
{
   alert(currentEvent);
}

function fadeInDetail()
{
   opacity("mask",0,maxOpacity,fadeInTime,toggleDetailPane);
}

function fadeOutDetail()
{
   opacity("mask",maxOpacity,0,fadeInTime,toggleDetailPane);
}

function toggleDetailPane()
{
   // Hide detail...
   if(detailPane.style.display == "block")
   {
      if(flashArray.length > 0)
      {
         for(var a = 0; a < flashArray.length; a++)
         {
            flashArray[a].style.visibility = "visible";
         }
      }
      detailPane.style.display = "none";
   }
   // Show detail...
   else
   {
      if(flashArray.length > 0)
      {
         for(var a = 0; a < flashArray.length; a++)
         {
            flashArray[a].style.visibility = "hidden";
         }
      }
      // Hide detail...
      var tmpY = getScreenTop();
      detailPane.style.top = tmpY + "px";
      detailPane.style.display = "block"
   }
}

function getScreenTop() 
{
   if(ie)
      return document.documentElement.scrollTop;
   else
      return window.pageYOffset;
}

/*************************************
 * This function gets an element by  *
 * id and changes the opacity of the *
 * element from opacStart to opacEnd *
 * in N milliseconds. There is an    *
 * optional parameter helperFunction *
 * which allows us to pass in a      *
 * function to be performed with the *
 * opacity change. If there is not a *
 * function to be performed with the *
 * opacity change, simply use "".    *
 *************************************/
function opacity(id, opacStart, opacEnd, N, helperFunction)
{
   // Rate at which the element will fade.
   var speed = Math.round(N / 100);
   var timer = 0;

   // If the element being faded has a starting opacity
   // of 0, then we want to make sure that it is visible.
   if(opacStart == 0)
    document.getElementById(id).style.display = "block";

   // We need to determine whether we're fading the
   // element in or fading it out.
   // If we're fading the element out...
   if(opacStart > opacEnd)
   {
      // If there is a function to be performed,
      // then we call it.
      if(helperFunction != "")
         helperFunction();

      // Start the loop to count down from
      // opacStart to opacEnd.
      for(i = opacStart; i >= opacEnd; i--)
      {
         setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
         timer++;
   }
      }
   // If we're fading in...
   else if(opacStart < opacEnd)
   {
      // Start the loop to count up from
      // opacStart to opacEnd.
      for(i = opacStart; i <= opacEnd; i++)
      {
         setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
         timer++;

         // If there is a function to be performed,
         // then we call it.
         if(i == opacEnd && helperFunction != "")
            helperFunction();
      }
   }

   // If the element being faded has an ending opacity
   // of 0, then we want to make sure that it is not visible
   // at all.
   if(opacEnd == 0)
      document.getElementById(id).style.display = "none";
}
 
 
/*************************************
 * This function gets an element by  *
 * id and changes the opacity of the *
 * element to opacity. It uses a     *
 * number of css attributes to make  *
 * sure that no matter what browser, *
 * the opacity is being changed.     *
 *************************************/
function changeOpac(opacity, id)
{
   var object = document.getElementById(id).style;
   object.opacity = (opacity / 100);
   object.MozOpacity = (opacity / 100);
   object.KhtmlOpacity = (opacity / 100);
   object.filter = "alpha(opacity=" + opacity + ")";
}
 
function setFadeStyle()
{
   mask = document.getElementById("mask");
   mask.style.position = "absolute";
   mask.style.top = "0";
   mask.style.MozOpacity = "0.0";
   mask.style.opacity = "0.0";
   mask.style.KhtmlOpacity = "0.0";
   mask.style.filter = "alpha(opacity=0)";
   mask.style.display = "none";
   mask.style.backgroundColor = "black";
   mask.style.width = "100%";

   var bodyArray = document.getElementsByTagName("body");
   myBody = bodyArray[0];
   bodyHeight = myBody.offsetHeight;

   // Make sure we cover the screen, even if we're on a
   // very small page.
   if( typeof( window.innerWidth ) == 'number' )
      windowHeight = window.innerHeight;   //Non-IE
   else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
      windowHeight = document.documentElement.clientHeight;   //IE 6+ in 'standards compliant mode'
   else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
      windowHeight = document.body.clientHeight;   //IE 4 compatible
   if(bodyHeight < windowHeight)
      bodyHeight = windowHeight;


   
   // Make sure we cover the whole screen (not just what is visible).
   mask.style.height = bodyHeight + "px";
   mask.style.overflow = "hidden";
   mask.style.position = "absolute";
   mask.style.top = "0";
   mask.style.left = "0";

   detailPane.style.width  = "60%";
   detailPane.style.height = "60%";
   detailPane.style.position = "absolute";

   detailPane.style.top  = "0";
   detailPane.style.left = "0";
   detailPane.style.backgroundColor = "white";
   detailPane.style.border = "5px solid black";
   detailPane.style.borderColor = "black black gray gray";
   detailPane.style.padding = "1%";
   detailPane.style.marginTop = "10%";
   detailPane.style.marginLeft= "20%";

   detailContent.style.color = "#333";
   detailContent.style.backgroundColor = "white";
   detailContent.style.border = "2px solid gray";
   detailContent.style.overflow = "auto";
   detailContent.style.height   = "86%";
   detailContent.style.padding  = "1%";
   detailContent.style.width    = "94%";
   detailContent.style.margin   = "2%";
}

function setSliderStyle()
{
   detailPane.style.height = calendarPane.offsetHeight;
   detailPane.style.backgroundColor = "#036";
   
   detailContent.style.backgroundColor = "white";
   detailContent.style.overflow = "auto";
   detailContent.style.height = "85%";
   detailContent.style.padding = "2%";
}