// Sliding drawers on the sidebar

// our global vars
// the delay between the slide in/out, and a little inertia

var sliders_initted = false;
      
var initSliders = function()
{
  sliders_initted = true;
  if ( KILL_SWITCH )
    return false;
    // detect whether the user has ie or not, how we get the height is different 
    var useragent = navigator.userAgent.toLowerCase();
    var ie = ((useragent.indexOf('msie') != -1) && (useragent.indexOf('opera') == -1) && (useragent.indexOf('webtv') == -1));
    
    if(ie)
      return;
    
    var divs = getElementsByClassName(document, "div", "slideblock");
    
    for(var i=0; i<divs.length; i++)
    {
        // set a unique id for this slider
        divs[i].metaid = i;
        
        // get the original height
        var baseheight = (ie) ? divs[i].offsetHeight + "px" : document.defaultView.getComputedStyle(divs[i], null).getPropertyValue('height', null);

        // use cookies to toggle whether to display it or not
        var id = ( divs[i].parentNode.firstChild.nextSibling ) ? divs[i].parentNode.firstChild.nextSibling.firstChild : divs[i].parentNode.parentNode.firstChild.nextSibling.firstChild;
        
        if ( !id.nextSibling )
          return;
        
        if(id.innerHTML || id.nextSibling.length < 1) id = id.innerHTML;
        else id = id.nextSibling.innerHTML; // Gecko fix
        
        var cookieName = 'mdgSliderState_'+i; // id.replace(' ', '_');
        //alert(cookieName + ': ' + readCookie(cookieName));
        if(readCookie(cookieName)=='closed')
        {
          divs[i].style.display = "none";
        }
        else
        {
          divs[i].style.display = "block";
        }

        // "save" our div height, because once it's display is set to none we can't get the original height again
        var d = new div();
        d.el = divs[i];
        d.ht = baseheight.substring(0, baseheight.indexOf("p"));

        // store our saved version
        divheights[i] = d;        
    }
}

addOnloadHook(initSliders);

// this is one of our divs, it just has a DOM reference to the element and the original height
function div(_el, _ht)
{
    this.el = _el;
    this.ht = _ht;
}

function toggle(t)
{
  if(IE)
    return false;
  if ( KILL_SWITCH )
    return false;
  if ( !sliders_initted )
    initSliders();
    // reset our inertia base and interval
    inertiabase = inertiabaseoriginal;
    clearInterval(slideinterval);

    // get our block
    block = t.parentNode.nextSibling;

    // for mozilla, it doesn't like whitespace between elements
    if(block.className == undefined)
        block = t.parentNode.nextSibling.nextSibling;
      
    if(block.style.display == "none")
    {
        block.style.display = "block";
        block.style.height = "1px";

        // our goal and current height
        targetheight = divheight(block);
        heightnow = 1;
        
        // remember toggled state
        cookieName = 'mdgSliderState_'+block.metaid; // t.innerHTML.replace(' ', '_');
        createCookie(cookieName, 'open', 3650);

        // our interval
        slideinterval = setInterval(slideout, slideintervalinc);
    }
    else
    {
        // our goal and current height
        targetheight = 1;
        heightnow = divheight(block);
        
        // remember toggled state
        cookieName = 'mdgSliderState_'+block.metaid; // t.innerHTML.replace(' ', '_');
        createCookie(cookieName, 'closed', 3650);

        // our interval
        slideinterval = setInterval(slidein, slideintervalinc);
    }
}

// this is our slidein function the interval uses, it keeps subtracting
// from the height till it's 1px then it hides it
function slidein()
{
    if(heightnow > targetheight)
    {
        // reduce the height by intertiabase * inertiainc
        heightnow -= inertiabase;

        // increase the intertiabase by the amount to keep it changing
        inertiabase += inertiainc;

        // it's possible to exceed the height we want so we use a ternary - (condition) ? when true : when false;
        block.style.height = (heightnow > 1) ? heightnow + "px" : targetheight + "px";
    }
    else
    {
        // finished, so hide the div properly and kill the interval
        clearInterval(slideinterval);
        block.style.display = "none";
    }
}

// this is the function our slideout interval uses, it keeps adding
// to the height till it's fully displayed
function slideout()
{
    block.style.display = 'block';
    if(heightnow < targetheight)
    {
        // increases the height by the inertia stuff
        heightnow += inertiabase;

        // increase the inertia stuff
        inertiabase += inertiainc;

        // it's possible to exceed the height we want so we use a ternary - (condition) ? when true : when false;
        block.style.height = (heightnow < targetheight) ? heightnow + "px" : targetheight + "px";
        
    }
    else
    {
        // finished, so make sure the height is what it's meant to be (inertia can make it off a little)
        // then kill the interval
        clearInterval(slideinterval);
        block.style.height = targetheight + "px";
    }
}

// returns the height of the div from our array of such things
function divheight(d)
{
    for(var i=0; i<divheights.length; i++)
    {
        if(divheights[i].el == d)
        {
            return divheights[i].ht;
        }
    }
}

/*
    the getElementsByClassName function I pilfered from this guy.  It's
    a useful function that'll return any/all tags with a specific css class.

    Written by Jonathan Snook, http://www.snook.ca/jonathan
    Add-ons by Robert Nyman, http://www.robertnyman.com
    
    Modified to match all elements that match the class name plus an integer after the name
    This is used in Enano to allow sliding sidebar widgets that use their own CSS
*/
function getElementsByClassName(oElm, strTagName, strClassName)
{
    // first it gets all of the specified tags
    var arrElements = (strTagName == "*" && document.all) ? document.all : oElm.getElementsByTagName(strTagName);
    
    // then it sets up an array that'll hold the results
    var arrReturnElements = new Array();

    // some regex stuff you don't need to worry about
    strClassName = strClassName.replace(/\-/g, "\\-");

    var oRegExp = new RegExp("(^|\\s)" + strClassName + "([0-9]*)(\\s|$)");
    var oElement;
    
    // now it iterates through the elements it grabbed above
    for(var i=0; i<arrElements.length; i++)
    {
        oElement = arrElements[i];

        // if the class matches what we're looking for it ads to the results array
        if(oElement.className.match(oRegExp))
        {
            arrReturnElements.push(oElement);
        }
    }

    // then it kicks the results back to us
    return (arrReturnElements)
}