var MAX_MENU_COUNT = 4
var BAR_HEIGHT = 26;
var INACTIVE_POSITION = 632;

var aTimer = null;
var vTimer = null;
var hTimer = null;

var lastBar = '';

var menu_img_array = new Array( '', 'StrookKantoor.jpg', 'StrookTelefonie.jpg', 'StrookInternet.jpg', 'StrookContact.jpg', 'StrookVacatures.jpg', 'StrookPers.jpg', 'StrookZoek.jpg');
var submenu_links = new Array('contact_link','vacature_link','pers_link','zoek_link') ;

var plain_bar_images = new Array('ict_balk.jpg','kantoor_balk.jpg','telefonie_balk.jpg','internet_balk.jpg');
var shadow_bar_images = new Array('ict_balk_schaduw.jpg','kantoor_balk_schaduw.jpg','telefonie_balk_schaduw.jpg','internet_balk_schaduw.jpg');

var currentMovingbars = 0;

var mainMenuMoving = false;

function findAbsPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1)
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findAbsPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }

function delObjectNodeById(parentID, id)
{
   var parent = document.getElementById(parentID);

   child = document.getElementById(id)
   if ( child != null)
   {
      parent.removeChild(child);
   }

}

function delObjectNode(parentID, nummer)
{
   var parent = document.getElementById(parentID);

   if ( parent.childNodes[nummer])
   {
      parent.removeChild(parent.childNodes[nummer]);
   }

}

function setStrookBackground( bgimg)
{
      var strookBG = document.getElementById('img_ph');
      if ( strookBG != null)
      {
         var images = strookBG.getElementsByTagName("img");
         var steden = document.getElementById("steden_bar");

         var htmlText = '<img id="' + bgimg + '"  src="images/stroken/' + bgimg + '" class="strook" />';

         if ( steden != null)
         {
            strookBG.innerHTML = htmlText + strookBG.innerHTML;
            if ( ICTBrowserCompatible )
            {
               cf = new Crossfader( new Array( "steden_bar" ), -1, 2500, 5000 );
               setTimeout( "delObjectNodeById('img_ph', 'steden_bar')", 3000);
            }
            else
               delObjectNodeById('img_ph', 'steden_bar');
         }
         else if ( images.length  > 0)
         {
            strookBG.innerHTML = htmlText + strookBG.innerHTML;
            if ( ICTBrowserCompatible )
            {
               cf = new Crossfader( new Array( images.item(1).id ), -1, 2500, 5000 );
               setTimeout( "delObjectNode('img_ph', 1)", 3000);
            }
            else
               delObjectNode('img_ph', 1);
         }
         else
            strookBG.innerHTML = htmlText;
      }

}

function InitiateMenus( menuid )
{
   var i = 0;
   for ( ; i < MAX_MENU_COUNT ; i++)
   {
      var mbar = document.getElementById('menu_bar_' + i);
      if (mbar != null)
      {
         mbar.className = mbar.className.replace(" active", "");
         mbar.className = mbar.className.replace(" start", "");
         mbar.style.backgroundImage = 'url(images/balken/' + shadow_bar_images[i] + ')';
      }

      if ( menuid != null && menuid == i )
      {
         mbar.className += " active";
         mbar.style.backgroundImage = 'url(images/balken/' + plain_bar_images[i] + ')';
      }


   }
}

function showObject( obj, show)
{
   if ( show ) {
      obj.style.display = 'block';
      obj.style.visibility = 'visible';
   } else {
      obj.style.display = 'none';
      obj.style.visibility = 'hidden';
   }
}

function moveContentVertical( obj, targetY, offset, mvUp, relpos, timeout)
{
   elm = document.getElementById( obj);
   if ( relpos)
      elm.style.position = 'relative';
   else
      elm.style.position = 'absolute';
   //elm.style.left = 0;

   var curTop = parseInt( elm.style.top.replace('px','').replace('pt',''));
   var newTop = curTop;
   if ( curTop != targetY){
      if ( mvUp)
           newTop = curTop - offset;
      else
           newTop = curTop + offset;
   }

   //showObject( elm, true)
   delta = Math.abs( newTop - targetY);
   var proceed = false;
   if ( newTop > targetY && mvUp)
      proceed = true;
   else if ( newTop < targetY && !mvUp)
      proceed = true;
   else if ( delta == 0 )
      proceed = true;

   var nt = newTop + 'px';
   elm.style.top = nt;
   if ( delta > 0 && proceed)
   {

      if ( delta <= 10)
      {
         offset = 1;
      }
      else if ( delta <= 20 && offset > 3)
      {
         offset = 3;
      }
      vTimer = setTimeout( "moveContentVertical('"+ obj + "'," + targetY +  "," + offset + "," + mvUp + "," + relpos +  "," + timeout + ')' , timeout);
   }
   else
   {
      currentMovingbars -= 1;
      //alert (' Moving - '+  currentMovingbars);
   }
}

function moveContentHorizontal( obj, targetX, offset, mvLeft, relpos, timeout)
{
   elm = document.getElementById( obj);
   if ( relpos)
      elm.style.position = 'relative';
   else
      elm.style.position = 'absolute';
   //elm.style.top = 0;

   var curLeft = parseInt( elm.style.left.replace('px','').replace('pt',''));
   var newLeft = curLeft;
   if ( curLeft != targetX){
      if ( mvLeft)
           newLeft = curLeft - offset;
      else
           newLeft = curLeft + offset;
   }

   //showObject( elm, true)
   delta = Math.abs( newLeft - targetX);
   var proceed = false;
   if ( newLeft > targetX && mvLeft)
      proceed = true;
   else if ( newLeft < targetX && !mvLeft)
      proceed = true;
   else if ( delta == 0 )
      proceed = true;

   var nl =  newLeft+'px';
   elm.style.left = nl;
   if ( delta > 0 && proceed )
   {
      if ( delta <= 10)
      {
         offset = 1;
      }
      else if ( delta <= 20 && offset > 3)
      {
         offset = 3;
      }

      hTimer = setTimeout( "moveContentHorizontal('"+ obj + "'," + targetX +  "," + offset + "," + mvLeft + "," + relpos +  "," + timeout + ')' , timeout);
   }
   else
   {
      currentMovingbars -= 1;
      //alert (' Moving - '+  currentMovingbars);
   }
}

function MoveBars( submenu)
{
   var i = 0;
   var activated = false;

   //if ( aTimer != null) return;
    //alert ('bar !' );
   if ( currentMovingbars > 0)
   {
      return false;
   }

   htiming = 0
   for ( ; i < MAX_MENU_COUNT ; i++)
   {
      var mbar = document.getElementById('menu_bar_' + i);
    //alert ('bar !' + mbar);
      if (mbar != null)
      {
         var curX = mbar.style.left.replace('px','').replace('pt','');
         var curY = mbar.style.top.replace('px','').replace('pt','');

         if ( curX == '' || curX == null)
         {
            curX = 0;
            curY = i * BAR_HEIGHT;
         }

         mbar.style.position = 'absolute';
         mbar.style.left = (curX+'px');
         mbar.style.top = (curY+'px');

         if ( mbar.className.indexOf('active') > 0)
         {
            mbar.style.backgroundImage = 'url(images/balken/' + plain_bar_images[i] + ')';
            setTimeout( "moveContentHorizontal( '" + ( 'menu_bar_' + i) + "', 0, 10, true, false, 20)", 700);

            setTimeout( "moveContentVertical( '" + ( 'menu_bar_' + i) + "', 0, 5, true, false, 20)", 10);
            activated = true;
            currentMovingbars += 2;
         }
         else
         {
            mbar.style.backgroundImage = 'url(images/balken/' + shadow_bar_images[i] + ')';

            if ( parseInt( mbar.style.top.replace('px','').replace('pt','')) <  INACTIVE_POSITION)
            {
               setTimeout( "moveContentHorizontal( '" + ( 'menu_bar_' + i) + "', " +INACTIVE_POSITION+ ", 10, false, false, 20)", htiming);
               htiming += 333;
               currentMovingbars += 1;
            }
            var ypos = 0;
            if ( !( activated || submenu))
            {
               ypos = ( i + 1 ) * BAR_HEIGHT;
            }
            else
            {
               ypos = i * BAR_HEIGHT;
            }
            var curTop = parseInt( mbar.style.top.replace('px','').replace('pt',''));
            setTimeout( "moveContentVertical( '" + ( 'menu_bar_' + i) + "', " + ypos+ ", 5," + ( ( curTop > ypos) ? "true" : "false") + ", false, 20)", 2500);

            currentMovingbars += 1;
         }
      }
   }

   return true
}

function MoveBarsLeft()
{
   var i = 0;
   var activated = false;

   //if ( aTimer != null) return;
    //alert ('bar !' );
   if ( currentMovingbars > 0)
   {
      return false;
   }

   htiming = 0
   for ( ; i < MAX_MENU_COUNT ; i++)
   {
      var mbar = document.getElementById('menu_bar_' + i);
    //alert ('bar !' + mbar);
      if (mbar != null)
      {
         var curX = mbar.style.left.replace('px','').replace('pt','');
         var curY = mbar.style.top.replace('px','').replace('pt','');

         if ( curX == '' || curX == null)
         {
            curX = 0;
            curY = i * BAR_HEIGHT;
         }

         mbar.style.position = 'absolute';
         mbar.style.left = (curX+'px');
         mbar.style.top = (curY+'px');

         if ( parseInt( mbar.style.top.replace('px','').replace('pt','')) <  INACTIVE_POSITION)
         {
            setTimeout( "moveContentHorizontal( '" + ( 'menu_bar_' + i) + "', " +INACTIVE_POSITION+ ", 10, false, false, 20)", 10);
            htiming += 333;
            currentMovingbars += 1;

            if ( mbar.className.indexOf('active') > 0 ||  mbar.className.indexOf('start') > 0)
            {
                mainMenuMoving = true;
            }
         }
         var ypos = i * BAR_HEIGHT;

         var curTop = parseInt( mbar.style.top.replace('px','').replace('pt',''));
         setTimeout( "moveContentVertical( '" + ( 'menu_bar_' + i) + "', " + ypos+ ", 5," + ( ( curTop > ypos) ? "true" : "false") + ", false, 20)", 2000);

         currentMovingbars += 1;
      }
   }

   return true
}

function makePlace()
{
}

function setStaticBars(menuid)
{
   var i = 0;
   var activated = false;

   for ( ; i < MAX_MENU_COUNT ; i++)
   {
      var mbar = document.getElementById('menu_bar_' + i);
    //alert ('bar !' + mbar);
      if (mbar != null)
      {
         if ( mbar.className.indexOf('active') > 0 )
         {
            mbar.style.left = '0px';
            mbar.style.top = '0px';
            activated = true;
         }
         else
         {
            mbar.style.position = 'absolute';
            mbar.style.left = '632px';
            if ( !( activated || menuid < 0))
            {
               mbar.style.top = (( i + 1 ) * BAR_HEIGHT)+'px';
            }
            else
            {
               mbar.style.top = (i * BAR_HEIGHT)+'px';
            }
         }
      }
   }
}

function SetMenubar(menuID)
{
   var bar = document.getElementById('menu_bar_' + menuID);

   if ( bar != null)
   {
      if ( bar.className.indexOf('active') < 0 )
      {
         // first remove active class from other menu's
         InitiateMenus( null);

         // activate clicked menu
         bar.className = bar.className  + " active";

         if ( ICTBrowserCompatible )
         {

            if ( !MoveBars( false, false)) return false;
         }
         else
         {
            InitiateMenus( menuID);
            setStaticBars(menuID);
         }
      }
   }

   if ( menu_img_array[menuID] != '')
   {
      setStrookBackground( menu_img_array[menuID]);
   }

   var grey = document.getElementById('menu_bar_grey');
   grey.style.position = 'absolute';
   grey.style.top = '0px';
   grey.style.left = INACTIVE_POSITION+'px';
   grey.style.display = 'none';
   grey.style.visibility = 'hidden';
   grey.style.zIndex = 0;

   var tmp = document.getElementById('menu_bar_tmp');
   tmp.style.position = 'absolute';
   tmp.style.top = '0px';
   tmp.style.left = INACTIVE_POSITION+'px';
   tmp.style.display = 'none';
   tmp.style.visibility = 'hidden';
   tmp.style.zIndex = 0;

   var greyTitle = document.getElementById('grey_title');
   greyTitle.innerHTML = '';

   for ( j =0 ; j < submenu_links.length; j++)
   {
      var obj = document.getElementById(submenu_links[j]);
      if ( obj != null)
      {
          obj.className = obj.className.replace( 'active', '');
      }
   }

   return true;
}

function SetSubMenubar( subMenuImg, menuid, titletext)
{
   var mainMenu = document.getElementById('main_menu');
   if (mainMenu != null)
   {
      mainMenu.style.backgroundRepeat = 'no-repeat';
      mainMenu.style.backgroundImage = 'url('+ subMenuImg +')';
   }

   InitiateMenus( menuid);

   setStaticBars(menuid);

   if ( menuid < 0)
   {
      var grey = document.getElementById('menu_bar_grey');
      grey.style.position = 'absolute';
      grey.style.top = '0px';
      grey.style.left = '0px';
      grey.style.display = 'block';
      grey.style.visibility = 'visible';
      grey.style.zIndex = 12;


      var tmp = document.getElementById('menu_bar_tmp');
      tmp.style.position = 'absolute';
      tmp.style.top = '0px';
      tmp.style.left = INACTIVE_POSITION+'px';
      tmp.style.display = 'none';
      tmp.style.visibility = 'hidden';
      tmp.style.zIndex = 0;

      var greyTitle = document.getElementById('grey_title');
      greyTitle.innerHTML = titletext;
   }
}

function moveSubMenubar( menuID, newTitle,obj)
{

   //alert( greyTitle.innerHTML);
   var greyTitle = document.getElementById('grey_title');
   if ( greyTitle == null || greyTitle.innerHTML == newTitle)
   {
      return false;
   }
   if ( menu_img_array[menuID+4] != '')
   {
      setStrookBackground( menu_img_array[menuID+4]);
   }
   if ( currentMovingbars > 0)
   {
      return false;
   }


   for ( j =0 ; j < submenu_links.length; j++)
   {
      var link = document.getElementById(submenu_links[j]);
      if ( link != null)
      {
          link.className = link.className.replace( 'active', '');
      }
   }
   obj.className = obj.className  + " active";

   if ( ICTBrowserCompatible )
      MoveBarsLeft( false, true);
   else
   {
      InitiateMenus( -1);

      setStaticBars(-1);
   }

   var tmpTitle = document.getElementById('tmp_title');
   tmpTitle.innerHTML = greyTitle.innerHTML;
   greyTitle.innerHTML = newTitle;

   var grey = document.getElementById('menu_bar_grey');
   grey.style.position = 'absolute';
   grey.style.top = '0px';
   grey.style.left = '0px';
   grey.style.display = 'block';
   grey.style.visibility = 'visible';
   grey.style.zIndex = 10;

   InitiateMenus( -1);
        //setTimeout( "moveContentHorizontal( 'menu_bar_grey', 0, 5, true, false, 20)", 10);
   if ( !mainMenuMoving)
   {
       //setTimeout( "moveContentHorizontal( 'menu_bar_grey', 0, 5, true, false, 20)", 10);
      var tmp = document.getElementById('menu_bar_tmp');
      tmp.style.position = 'absolute';
      tmp.style.top = '0px';
      tmp.style.left = '0px';
      tmp.style.display = 'block';
      tmp.style.visibility = 'visible';
      tmp.style.zIndex = 12;

      if ( ICTBrowserCompatible )
      {
         setTimeout( "moveContentHorizontal( 'menu_bar_tmp', " +INACTIVE_POSITION+ ", 15, false, false, 20)", 10);
         currentMovingbars += 1;
      }
      else
      {
         tmp.style.position = 'absolute';
         tmp.style.top = '0px';
         tmp.style.left = INACTIVE_POSITION+'px';
      }
   }

   mainMenuMoving = false;

}