(function($) {
  $(document).ready(function() {

    // Check to see if we're using IE6 or other browsers
    var ie6 = false;
    jQuery.each($.browser, function(i, val) {
      if (i=="msie" && jQuery.browser.version.substr(0,3)=="6.0") {
        ie6 = true;
      }
    });

    // Add click events to segments. Make each one stay selected in clicked and deselected if clicked again. Also select the corresponding check box
    $("#interactive-map area").click(function() {
      var selectedSegment = $(this).attr("id").substring(4);  // strips the "map-" from the start of the id

      // Serve gifs to IE6 and below. Serve pngs to all other browsers
      var idOfImage;
      if (ie6) {
        idOfImage = "#" + selectedSegment + "-selected-ie";
      } else {
        idOfImage = "#" + selectedSegment + "-selected";
      }

      if ($(idOfImage).hasClass("hide")) {

        // highlight segment
        $(idOfImage).removeClass("hide");
        $(idOfImage).addClass("selected");
        $(idOfImage).removeClass("hover");

        // tick corresponding checkbox
        $("#" + selectedSegment).attr("checked", "checked");

      } else {

        // remove highlight from segment
        $(idOfImage).removeClass("selected");
        $(idOfImage).removeClass("hover");
        $(idOfImage).addClass("hide");

        // untick corresponding checkbox
        $("#" + selectedSegment).attr("checked", "");
      }
    });

    // Add click events to check boxes. Make each one select or deselect the corresponding wheel segment

    // Add hover events to segments.
    $("div.overout").mouseover(function(){
      $("p:first",this).text("mouse over");
      $("p:last",this).text(++i);
    }).mouseout(function(){
      $("p:first",this).text("mouse out");
    });

    $("#interactive-map area").mouseover(function() {

      var idOfImage;
      if (ie6) {
        idOfImage = "#" + $(this).attr("id").substring(4) + "-selected-ie";
      } else {
        idOfImage = "#" + $(this).attr("id").substring(4) + "-selected";
      }
      $(idOfImage).addClass("hover");

    }).mouseout(function() {

      var idOfImage;
      if (ie6) {
        idOfImage = "#" + $(this).attr("id").substring(4) + "-selected-ie";
      } else {
        idOfImage = "#" + $(this).attr("id").substring(4) + "-selected";
      }
      $(idOfImage).removeClass("hover");

    });

    // If user checks or unchecks a checkbox, reflect this change in examplar wheel
    $("table.exemplar_search input").click(function() {

      var idOfImage;
      if (ie6) {
        idOfImage = "#" + $(this).attr("id") + "-selected-ie";
      } else {
        idOfImage = "#" + $(this).attr("id") + "-selected";
      }
      if ($(this).attr("checked")) {
        // highlight segment
        $(idOfImage).removeClass("hide");
        $(idOfImage).addClass("selected");
        $(this).focus();
      } else {
        // remove highlight from segment
        $(idOfImage).removeClass("selected");
        $(idOfImage).addClass("hide");
        $(this).focus();
      }
    });

  });
})(jQuery);