$(document).ready(function() {
  $("[class^=mouseover]").hover(
    function() {
      var index = getElementIndex(this.className);

      var number_src = $("li.mouseover-" + index + " img").attr("src");
      $("li.mouseover-" + index + " img").attr("src", number_src.replace("gray", "white")); 

	  var number_src1 = $(".rutekart_punkt img.mouseover-" + index ).attr("src");
      $(".rutekart_punkt img.mouseover-" + index).attr("src", number_src1.replace("gray", "white")); 
	        
      var thumb_src = $(".rutekart_illustrasjon img.mouseover-" + index).attr("src");
      $(".rutekart_illustrasjon img.mouseover-" + index).attr("src", thumb_src.replace("transparent_", ""));

      $(".arrowcontainer img").css("visibility", "visible");
      $(".arrowcontainer img").css("left", getArrowPosition(index, $("li[class^='mouseover']").length) + "px");

      $(".imagecontainer_midt").css("display", "none");
      $("#article-" + index).css("display", "block");
    },
    function() {
      var index = getElementIndex(this.className);

      var number_src = $("li.mouseover-" + index + " img").attr("src");
      $("li.mouseover-" + index + " img").attr("src", number_src.replace("white", "gray")); 
	  
	  var number_src = $(".rutekart_punkt img.mouseover-" + index).attr("src");
      $(".rutekart_punkt img.mouseover-" + index ).attr("src", number_src.replace("white", "gray")); 
      
      var thumb_src = $(".rutekart_illustrasjon img.mouseover-" + index).attr("src");
      $(".rutekart_illustrasjon img.mouseover-" + index).attr("src", thumb_src.replace("148", "transparent_148"));

      $(".arrowcontainer img").css("visibility", "hidden");

      $(".imagecontainer_midt").css("display", "block");
      $("#article-" + index).css("display", "none");
    }
  );

  $(".kampanje_unselected").hover(
    function() {
      var image = $(this).find("img")
      image.attr("src", image.attr("src").replace("transparent_", ""));
      $(this).css("color", "black");
      $(this).find("a").css("color", "black");
    },
    function() {
      var image = $(this).find("img")
      image.attr("src", image.attr("src").replace("140x", "transparent_140x"));
      $(this).css("color", "#A4A4A4");
      $(this).find("a").css("color", "#A4A4A4");
    }
  );

  $(".kampanje_unselected").click(function() {
    location.href = $(this).find("a").attr("href");
  });
});

function getArrowPosition(index, total_points) {
  if (total_points == 3) {
    switch (index) {
      case "1":
        return 11;
      case "2":
        return 300;
      case "3":
        return 533;
    }
  } else if (total_points = 4) {
    switch (index) {
      case "1":
        return 11;
      case "2":
        return 49;
      case "3":
        return 300;
      case "4":
        return 533;
    }
  }
}

function getElementIndex(name)
{
  return name.replace("mouseover-", "");
}