Team:Brown/template/home

__NOTOC__
{{:Team:Brown/header}}
<html>
<div id="menu_wrap">
</html>
{{:Team:Brown/menu|contentpage={{{contentpage|home}}} }}
<html>
</div>
<div id="content_wrap">
<div id="content_table">
    <div id="top_row">&nbsp;</div>
    <div class="main_row">
        <div id="main_td">

        <style>
        #panel_mask {  
            width: 925px;
            overflow:hidden;  
            margin:0 auto;  
        }
        .page_panel {
            float:left;
            width: 925px;
            padding-right:10px;
        }
        </style>

        <div id="panel_mask">
        <!-- to load pages that are not in the main sliding pages -->
        <div id="subpage_panel" style="display:hidden;"></div>
        <div id="panel">
        <!-- CONTENT STARTS HERE /-->

            <div id="page_home" class="page_panel">
            </html>{{:Team:Brown/pages/home}}<html>
            </div>
            
            <div id="page_team" class="page_panel">
            </html>{{:Team:Brown/pages/team}}<html>
            </div>

            <div id="page_project" class="page_panel">
            </html>{{:Team:Brown/pages/project}}<html>
            </div>

            <div id="page_modeling" class="page_panel">
            </html>{{:Team:Brown/pages/modeling}}<html>
            </div>

            <div id="page_human" class="page_panel">
            </html>{{:Team:Brown/pages/humanPractices}}<html>
            </div>
            
            <div id="page_sponsors" class="page_panel">
            </html>{{:Team:Brown/pages/sponsors}}<html>
            </div>

        <!-- CONTENT ENDS HERE /-->
        </div>
        </div>

        </div>
    </div>
    <div id="bottom_row">&nbsp;</div>
</div>
</div>
<div id="footer_wrap"></html>
{{:Team:Brown/footer}}
<html></div>
</div>

<!-- CODE SECTION -->

<script type="text/javascript">

function isUndefined(x) { var u; return x === u; }

var activePage = "</html>{{{contentpage|home}}}<html>";
var pageCache = {};

function setupTabButton(page) {
  var btn= $(".menu_button_" + page);
  btn.click(function(event) {
    $.address.value(page);
    return false;
  });

  // setup hovering
  var btnCssClassSelected = "menu_button_" + page + "_sel";
  btn.hover(function() {
    if (page != activePage)
      btn.addClass(btnCssClassSelected);
  }, function() {
    if (page != activePage)
      btn.removeClass(btnCssClassSelected);
  });

  btn.addClass("button_pointer");
  if (page == activePage)
    btn.addClass("menu_button_"+activePage+"_sel");
}

// rewrite links to load with AJAX within the frame
function rewriteLinks(elem) {
// TODO: replace full links too (with "http://..")?
   $("a[href^=/Team:Brown/]", elem).each(function()
   {
      this.href = this.href.replace("Team:Brown/", wgPageName+ "#/");
   });
}

var pages = [ "home", "team", "project", "modeling", "humanPractices", "sponsors"];

function updatePageMaskHeight()
{
    var maxHeight = 0;
    for(var i=0; i<pages.length;i++) {
      var page=pages[i];

      var pgHeight = $("#page_"+page).height();
      if(pgHeight > maxHeight) maxHeight = pgHeight;
    }

 //   $('#panel_mask').height(maxHeight);
   // $('.page_panel').height(maxHeight);
  $("#panel_mask").height(2000);
}

// this runs when page is loaded
$(function() {
    for(var i=0; i<pages.length;i++) {
      var page=pages[i];
      setupTabButton(page);

      if(wgUserName != null) {
        var editurl = wgServer+"/Team:Brown/pages/"+page+"?action=edit";
        $("#page_" + page + ">*:first").before($("<a href=\""+editurl+ "\">Edit " + page + "</a>"));
      }
    }
    $(".page_panel").each(function() { rewriteLinks(this); });
    updatePageMaskHeight();

    //Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
    $('#panel .page_panel').width($('#panel_mask').width());

    //Calculate the total width - sum of all sub-panels width  
    //Width is generated according to the width of #mask * total of sub-panels
    $('#panel').width(parseInt($('#panel_mask').width() * $('#panel div').length));

    // instead of button click handler, all actions pass through the address bar so history works too
    $.address.change(function(event) {
      var page = event.path.substring(1);
      if(page=='') page = activePage;

      $(".menu_button_" + activePage).removeClass("menu_button_" + activePage + "_sel");
      activePage = page;

      if($.inArray(page, pages) < 0) {
        // hide tab content, and load new page
        var url = wgServer+"/Team:TU_Delft/"+page+"?action=render";

        $("#panel").fadeOut(200);

        $.get(url, function(data) {
          $("#subpage_panel").html(data).fadeIn(200);
          rewriteLinks($("#subpage_panel"));
        });
      } else {
        $("#subpage_panel").fadeOut(200, function() {
          $("#panel").fadeIn(200);
        });

        // remove old page if any, show tab content
        $(".menu_button_" + activePage).addClass("menu_button_" + activePage + "_sel");

        //Get the height of the sub-panel  
        var panelheight = $("#page_" + page).height();

        //Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor  
        $('#panel_mask').scrollTo("#page_" + page, 400);

        //Resize the height
//        $('#panel_mask').animate({ 'height': panelheight }, { duration: 50 });
      }
   });

  $.trigger('postload');

});

</script>

</html>