function switchSelection() {
  var selectionList = document.getElementById('selectionList');
  if(selectionList.className == 'hidden') {
    selectionList.className = 'visible';
    var selCurItem = document.getElementById('selectionCurrentItem');
    selCurItem.className = 'active';
  }
  else {
    selectionList.className = 'hidden';
    var selCurItem = document.getElementById('selectionCurrentItem');
    selCurItem.className = 'inactive';
  }
  document.body.onmousedown = hideList;
}

function hideList() {
  var selectionList = document.getElementById('selectionList');
  selectionList.className = 'hidden';
  var selCurItem = document.getElementById('selectionCurrentItem');
  selCurItem.className = 'inactive';
}

function setSelection(val) {
  var selectionInput = document.getElementById('selectionInput');
  selectionInput.value = val;
  var selectionValue = document.getElementById('selectionCurrentItem');
  selectionValue.innerHTML = val;
}
          
function rewriteSelection() {
 var myDiv = document.getElementById('searchCategoryContainer');
 var selectBoxStr = '';   

 selectBoxStr += '<div id="searchSelectBoxContainer">';
 selectBoxStr += '<input id="selectionInput" class="invisible" name="category" value="" />';
 selectBoxStr += ' <div id="searchSelectBox">';
 selectBoxStr += '  <div id="selectionCurrentItem" class="inactive" onclick="switchSelection();"></div>';
 selectBoxStr += '  <div id="selectionList" class="hidden">';
 selectBoxStr += '   <div class="selectionListItem" onmousedown="setSelection(\'alle Bereiche\');">alle Bereiche</div>';
 selectBoxStr += '   <div class="selectionListItem" onmousedown="setSelection(\'Gitarre & Bass\');">Gitarre &amp; Bass</div>';
 selectBoxStr += '   <div class="selectionListItem" onmousedown="setSelection(\'Recording\');">Recording</div>';
 selectBoxStr += '   <div class="selectionListItem" onmousedown="setSelection(\'Keyboard\');">Keyboard</div>';
 selectBoxStr += '   <div class="selectionListItem" onmousedown="setSelection(\'Drums\');">Drums</div>';
 selectBoxStr += '   <div class="selectionListItem" onmousedown="setSelection(\'DJ & PA\');">DJ &amp; PA</div>';
 selectBoxStr += '  </div>';
 selectBoxStr += ' </div>';
 selectBoxStr += '</div>';
 myDiv.innerHTML = selectBoxStr;
}

function rewriteSearchButton() {
 var myDiv = document.getElementById('searchButtonContainer');
 var rewriteStr = '';
 rewriteStr += '<div id="changedSearchButton" class="changedSearchButtonUp" onmousedown="var d = document.getElementById(\'changedSearchButton\'); d.className = \'changedSearchButtonDown\';" onmouseout="var d = document.getElementById(\'changedSearchButton\'); d.className = \'changedSearchButtonUp\';" onclick="var f = document.getElementById(\'searchForm\'); f.submit();">Los</div>';
 myDiv.innerHTML = rewriteStr;
}