// http://css-tricks.com/learning-jquery-fading-menu-replacing-content/

$(function(){
  $("#message").hide(); // hide the email success message on opening
  
  // sets the default tab based on the URL GET variable, if any
  var urlPath = document.location.search.split("="); // grabs url and splits at =
  var activeButton = urlPath[1]; // sets active button to the GET value
  if (activeButton == null) { // if no GET value, sets the default to mail
    activeButton = "mail";
    activeDiv = "mail";
  }
  $activeButton = "#" + activeButton + "-button"; // add '#' to the front and '-button' to the end
  $activeDiv = "#" + activeButton; // add '#' to the front

// all buttons are first listed here
  $("#mail-button").css({
    opacity: 0.6,
    borderWidth: 1
  });
  $("#email-button").css({
    opacity: 0.6,
    borderWidth: 1
  });
  $("#phone-button").css({
    opacity: 0.6,
    borderWidth: 1
  });
  $("#advocate-button").css({
    opacity: 0.6,
    borderWidth: 1
  });
  $("#dmv-button").css({
    opacity: 0.6,
    borderWidth: 1
  });
  $("#mved-button").css({
    opacity: 0.6,
    borderWidth: 1
  });

  // then the active button's opacity and border width are set
  $($activeButton).css({
    opacity: 1,
    borderWidth: 5
  });
  
  $($activeDiv).show(); // show the active div

  // clicking function
  $("#page-wrap div.button").click(function(){
    $clicked = $(this);
    // if the button is not already "transformed" AND is not animated
    // i.e., won't affect the active button
    if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
      $clicked.animate({ // set opacity, border thickness to new values
        opacity: 1,
        borderWidth: 5
      }, 200 ); // the speed of the transition (smaller numbers are faster)
      // each button div MUST have a "xx-button" and the target div must have an id "xx" 
      var idToLoad = $clicked.attr("id").split('-');
      // we search through the content for the visible div and we fade it out
      $("#content").find("div:visible").fadeOut("fast", function(){
        // once the fade out is completed, we start to fade in the right div
        $(this).parent().find("#"+idToLoad[0]).fadeIn();
      })
    } // end of the 'if' statement

    $clicked.siblings(".button").animate({ // we reset the other buttons to default style
      opacity: 0.6,
      borderWidth: 1
    }, 200 ); // end of reset other buttons function
    
    // hide the email success message if it's visible and show the email_form instead
    if ($("#message").is(":visible")) {
      $("#message").hide();
      $("#email_form").show();
    } // end of show/hide if statement
  }); // end of clicking function

  // hover effect
  $("#page-wrap div.button").hover(function(){
    $hovered = $(this);
    // only works on elements that don't have opacity set to "1" (ie., not the active button)
    if ($hovered.css("opacity") != "1") {
      $hovered.animate({
        opacity: .95, // set to .95 instead of 1.0 so it won't conflict with the active button
        borderWidth: 5
      }, 200 ); // speed
    } // end of if statement
  }, // end of hover function
  
  // this is to reset it back to its previous opacity & border after un-hovering
  function() {
    $hovered = $(this);
    if ($hovered.css("opacity") != "1") { // won't effect active button
      $hovered.animate({
        opacity: 0.6,
        borderWidth: 1
      }, 200);
    } // end of if statement
  }); // end of reset opacity function
  
});