/* Javascript */

var wrapNoJSClassName = 'clickmenu_wrap_noJS';
var wrapClassName = 'clickmenu_wrap';
var targetClassName = 'clickmenu_target';
var wrapSingleClassName = 'clickmenu_wrap_single';
var wrapSingleActiveClassName = 'clickmenu_wrap_single_active';
var contentClassName = 'content_element';
var bgClassName = 'clickmenu_background';
var bgImageHeight = 42;

//In IE, document.getElementsByClassName is not defined, so a smiliar function like this is needed
function getElementsByClassName(classname, node)  {
    if(!node) node = document.getElementsByTagName("body")[0];
    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}

function genClasses() {
  //The content is shown by default, so when Javascript is deactivated, the user can see the content.
  //genClasses() hides the content and places the background arrow.
  
  //Rename the wrapClasses, so the correct stylesheet will be applied and place the background
  var wrapTagsNoJS = getElementsByClassName(wrapNoJSClassName, document);
  for (var i = 0;i<wrapTagsNoJS.length;i++){
    
    wrapTagsNoJS[i].className = wrapClassName;
    
    //Get the wrapper's height
    var tarTag = getElementsByClassName(targetClassName, wrapTagsNoJS[i]);
    var wrapHeight = wrapTagsNoJS[i].offsetHeight - tarTag[0].offsetHeight;
    
    //Get the correct background top offset
    var marginTop = (wrapHeight - bgImageHeight) / 2;
    
    //Set the background top offset
    getElementsByClassName(bgClassName, wrapTagsNoJS[i])[0].style.top = marginTop + "px";
    
  }
}

function klapp(val){
  
  //Get the wrapper for the current clickmenu
  var wrapDiv = val.parentNode;
  
  //Reset the active state (should always be one element, so the loop is unnecessary, but one never knows)
  var activeSingleWrap = getElementsByClassName(wrapSingleActiveClassName, wrapDiv);
  for (var i=0;i<activeSingleWrap.length;i++){
    activeSingleWrap[i].className = wrapSingleClassName;
  }
  
  //Set current class name to active
  val.className = wrapSingleActiveClassName;
  
  //Get the content elements to copy
  var cont = getElementsByClassName(contentClassName, val);
  
  //Get the target div tag
  var tarTag = getElementsByClassName(targetClassName, wrapDiv)[0];
  
  //Clear the target div tag
  tarTag.innerHTML = '';
  
  //Copy the content elements into the target div tag
  for (var i=0;i<cont.length;i++){
    tarTag.innerHTML = tarTag.innerHTML + cont[i].innerHTML;
  }
  
}