$(document).ready(function () {
	
    //Default Action for tabs
    $(".goalstabcontent").hide(); //Hide all content
    $("#goalsnav li:first").addClass("active").show(); //Activate first tab
    $(".goalstabcontent:first").show(); //Show first tab content
    
    //Make all tabs the same height
    var maxHeight = 0;
    $("#goalsnav li a").each(function(index) {
      if ($(this).height() > maxHeight) {
        maxHeight = $(this).height();
      }
    });
    
    $("#goalsnav li a").each(function(index) {
      $(this).height(maxHeight);
    });
    
  	//On Click Event
    $("#goalsnav li").click(function () {
        $(this).find("a").blur();
        $("#goalsnav").trigger("tabsshow");
        $("#goalsnav li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".goalstabcontent").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).show(); //Show the active content
        return false;
    });

    // This is required to manipulate the rotator html before initiating the rotator plug-in for XHTML w3c compliance
    // Ideally, the template would output as follows:
    //	<div class="rotator-text">
    //		<p>
    //			<a href="location.html">Text/Html which is <strong>displayed on top</strong> of the image</a>
    //		</p>
    //	</div>
    // But because the template captures the paragraph within a TinyMCE field, we need to take the content of 
    // the first paragraph in the div and place it in to a newly created anchor
    $(".rotator-text").each(function() {
    	// Get the location of the link from the previous element (which is an anchor)
    	var strLinkUrl = $(this).prev().attr('href');
    	// Create the new anchor element which contains the innerHtml of the paragraph tag
    	var eleNewAnchor = "<div><a href=\"" + strLinkUrl + "\">" + $(this).children("p:first").html() + "</a></div>";
    	// The extra <div> surrounding the anchor is to allow the innerHTML call to contain the anchor html on the next line
    	$(this).children("p:first").html($(eleNewAnchor).html());
    });
    
  	// Initiate the image rotator
    $(".wt-rotator-container").wtRotator({
        width: 620,
        height: 341,
        button_width: 20,
        button_height: 18,
        button_margin: 4,
        auto_start: true,
        delay: 5000,
        play_once: false,
        transition: "h.slide",
        transition_speed: 1200,
        auto_center: true,
        easing: "easeInOutQuad",
        cpanel_position: "inside",
        cpanel_align: "TR",
        timer_align: "top",
        display_thumbs: true,
        display_dbuttons: false,
        display_playbutton: true,
        display_numbers: true,
        display_timer: false,
        mouseover_pause: false,
        cpanel_mouseover: false,
        text_mouseover: false,
        text_effect: "fade",
        text_sync: true,
        tooltip_type: "text",
        lock_tooltip: true,
        shuffle: false
    });
    
    // Overide wt-rotator's hard-coded styles.
    $(".wt-rotator-container").find("div.c-panel").css({
        "margin-top": 0,
        "margin-right": 12,
        "margin-bottom": 0,
        "margin-left": 0
    });
    
    $(".thumbnails").css({
        "height": 20
    });
});