$j(document).ready(function() {
    $j('div.itinerary').each(function(index) {
        itinerary_hook($j(this));
    });
});

function itinerary_hook(itineraryRoot) {
    var largestContentHeight = $j('.tabs', itineraryRoot).outerHeight(true);
    var tabIndex = 0;
    var tabs = $j('.tabs .tab', itineraryRoot);
    var panes = $j('.panes .pane', itineraryRoot);

    tabs.each(function(index) {
        var tab = $j(this);
        var linkedPane = $j(panes.get(tabIndex));

        tab.data('pane', linkedPane);

        // To get height, need to make this show temporarily. Might need to
        // take ome precautions against flickering/popup.
        linkedPane.show();

        if (linkedPane.outerHeight(true) > largestContentHeight) {
            largestContentHeight = linkedPane.outerHeight(true);
        }

        linkedPane.hide();

        if (tab.hasClass('selected')) {
            linkedPane.show();
            itineraryRoot.data('selected', tab);
        }

        tab.bind('click', { root: itineraryRoot }, itinerary_tabClick);
        tab.css('cursor', 'pointer');

        tabIndex = tabIndex + 1;
    });

    itineraryRoot.height(largestContentHeight);
    $j('.panes', itineraryRoot).height(largestContentHeight);
}

function itinerary_tabClick(event) {
    // Deselect old tab
    if (event.data.root.data('selected')) {
        var oldTab = event.data.root.data('selected');
        var oldPane = oldTab.data('pane');

        oldTab.removeClass('selected');
        oldPane.hide();
    }

    var tab = $j(this);
    var pane = tab.data('pane');

    event.data.root.data('selected', tab);

    tab.addClass('selected');
    pane.show();
}
if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();