$(document).ready(function()
{  
  //set default
  $(".content").addClass("home");
  $(".singlescreen").show();
  $(".singlescreen li.first").show();
  $(".tabs").show();
  $(".aandoeningen").show();
  $(".jq-index-hand").show();
  $(".jq-show-aandoeningen").addClass("selected");


  //hide behandelingen div and show aandoeningen div
  $(".jq-show-aandoeningen").click(function(){
    $(".behandelingen").hide();
    $(".jq-show-behandelingen").removeClass("selected");

    $(".aandoeningen").show();
    $(".jq-show-aandoeningen").addClass("selected");
  });


  //hide aandoeningen div and show behandelingen div
  $(".jq-show-behandelingen").click(function(){
    $(".aandoeningen").hide();
    $(".jq-show-aandoeningen").removeClass("selected");

    $(".behandelingen").show();
    $(".jq-show-behandelingen").addClass("selected");
  });


  //show index-list according to which image was hovered
  $(".aandoeningen-images span").click(function(){
    $(".aandoeningen-images span").removeClass("active");
    $(this).addClass("active");
  });
   
   //too confusing??
//  $(".jq-img-hand").mouseover(function(){
//    $(".jq-img-hand img").attr("src", "/static/images/special/hand-hover.jpg"); 
//    $(".jq-index").hide();
//    $(".jq-index-hand").show();  
//  });
//  $(".jq-img-hand").mouseout(function(){ $(".jq-img-hand img").attr("src", "/static/images/special/hand.jpg"); });

//  $(".jq-img-pols").mouseover(function(){
//    $(".jq-img-pols img").attr("src", "/static/images/special/pols-hover.jpg");
//    $(".jq-index").hide();
//    $(".jq-index-pols").show();  
//  });
//  $(".jq-img-pols").mouseout(function(){ $(".jq-img-pols img").attr("src", "/static/images/special/pols.jpg"); });
//  
//  $(".jq-img-zenuw").mouseover(function(){
//    $(".jq-img-zenuw img").attr("src", "/static/images/special/zenuw-hover.jpg");
//    $(".jq-index").hide();
//    $(".jq-index-zenuw").show();  
//  });
//  $(".jq-img-zenuw").mouseout(function(){ $(".jq-img-zenuw img").attr("src", "/static/images/special/zenuw.jpg"); });
//  //too confusing??
  
  //set imagemap areas and their mouseover actions
  $(".jq-index a").each(function(idx, item) {
    var a = $(this);
    var id = $(this).attr('id');
    var coords = $(this).attr("rel").split(",");    
    var elArea = document.createElement("AREA");
    
    if(id.indexOf("hand") > -1)
      var maps = document.getElementById('map-hand');

    if(id.indexOf("pols") > -1)
      var maps = document.getElementById('map-pols');

    if(id.indexOf("zenuw") > -1)
      var maps = document.getElementById('map-zenuw');

    if(coords[0] > 0)
    {
      elArea.coords = coords;
      elArea.shape = "rectangle";
      elArea.alt = "Aandoening";
      elArea.href = $(this).attr("href");
      elArea.onmouseover = function(){ 
        ResetImages($(a).attr("id"));
        SetIndex($(a).attr("id"));
        $(".jq-index a").removeClass("hover");
        $(a).addClass("hover");
        SetImage($(a).attr("id"));
      };
      elArea.onmouseout = function(){ 
        $(".jq-index a").removeClass("hover");
        ResetImages($(a).attr("id"));
      };
      maps.appendChild(elArea);
    }
  });


  //show image according to which link in the index-list was clicked
  //and set button href to the aandoening
  $(".jq-index a").mouseover(function(){ // or mouseover?
    aandoening = this.id; //example 'jq-hand-1'
    SetImage(aandoening);
  });

  $(".jq-index a").mouseout(function(){
    a = this.id;
    ResetImages(a);
    $(".jq-index a").removeClass("hover");
  });

});


function ResetImages(a) {
  if(a.indexOf("hand") > -1) {
    $(".jq-img-hand img").attr("src", "/static/images/special/hand-hover.jpg");
    $(".jq-img-pols img").attr("src", "/static/images/special/pols.jpg");
    $(".jq-img-zenuw img").attr("src", "/static/images/special/zenuw.jpg");
  }
  
  if(a.indexOf("pols") > -1) {
    $(".jq-img-hand img").attr("src", "/static/images/special/hand.jpg");
    $(".jq-img-pols img").attr("src", "/static/images/special/pols-hover.jpg");
    $(".jq-img-zenuw img").attr("src", "/static/images/special/zenuw.jpg");
  }
  
  if(a.indexOf("zenuw") > -1) {
    $(".jq-img-hand img").attr("src", "/static/images/special/hand.jpg");
    $(".jq-img-pols img").attr("src", "/static/images/special/pols.jpg");
    $(".jq-img-zenuw img").attr("src", "/static/images/special/zenuw-hover.jpg");
  }
}


function SetIndex(a) {
  $(".jq-index").hide();

  if(a.indexOf("hand") > -1)
    $(".jq-index-hand").show();  

  if(a.indexOf("pols") > -1)
    $(".jq-index-pols").show();  
  
  if(a.indexOf("zenuw") > -1)
    $(".jq-index-zenuw").show();  
}


function SetImage(aandoening) {
  aandoening = aandoening.replace("jq-", "");

  if(aandoening.indexOf("hand") > -1)
    $(".jq-img-hand img").attr("src", "/static/images/special/" + aandoening + ".jpg");

  if(aandoening.indexOf("pols") > -1)
    $(".jq-img-pols img").attr("src", "/static/images/special/" + aandoening + ".jpg");

  if(aandoening.indexOf("zenuw") > -1)
    $(".jq-img-zenuw img").attr("src", "/static/images/special/" + aandoening + ".jpg");
}