var cn;
var myNavPanel;
var _componentWidth;
var currentNavPanelId = "";
var initLoading = true;

function initNavPanel(cfg) {
    firstShow = true;
    
    if (cfg.toc_enable) {
	    var cn_cfg = {
	      numVisible: 3,
	      prevElement: 'columnav-prev',
	      viewElementPrefix: 'columnav-view-',
	      viewElementNum: 3,
	      listRowHeight: 20,
	      datasourcePrefix: cfg.toc_datasourcePrefix,
	      datasource: cfg.toc_datasource,
	      prevButtonStateHandler: onPrevButtonStateChange,
	      viewButtonStateHandler: onViewButtonStateChange,
	      initLoadCompleteHandler: onInitLoadComplete
	    };
	    cn = new YAHOO.extension.ColumNav('columnav', cn_cfg);
	}
    
    myNavPanel = new fx.Height('main_navpanel', {duration: 400});
    myNavPanel.hide();
}

function onPrevButtonStateChange(type, args, me) {
    
    var active = args[0];
    var button = args[1];
    
    if (active) {
    	YAHOO.util.Dom.addClass(button, 'button-active');
    } else {
    	YAHOO.util.Dom.removeClass(button, 'button-active');
    }
}
function onViewButtonStateChange(type, args, me) {

    var active = args[0];
    var button = args[1];
    
    if (active) {
    	YAHOO.util.Dom.addClass(button, 'button-active');
    } else {
    	YAHOO.util.Dom.removeClass(button, 'button-active');
    }
}
function onInitLoadComplete(type, args, me) {
    
    onResize();
    
    YAHOO.util.Event.addListener(window, 'resize', onResize);
    initLoading = false;
}

function addCSSRule(cssIndex, selector, property) {
    if( document.styleSheets[cssIndex].insertRule ) //Mozilla
        document.styleSheets[cssIndex].insertRule( selector + " {" + property + "}", document.styleSheets[cssIndex].cssRules.length );
    if( document.styleSheets[cssIndex].addRule ) //IE
        document.styleSheets[cssIndex].addRule( selector, property );
        //document.styleSheets[cssIndex].addRule( selector, "{" + property + "}" );
}
function toggleNavPanel(panelId) {
    
    if (initLoading)
    	return;
    
    if (firstShow) {
        document.getElementById("main_navpanel").style.display = "block";
        if (cn) {
	        cn.carousel.calculateSize();
	        cn.resetScrollPos();
	    }
        firstShow = false;
    }
    
    if (this.isNavPanelVisible()) {
        if (currentNavPanelId != panelId) {
            document.getElementById("main_navpanel_toc").style.display = "none";
            document.getElementById("main_navpanel_index").style.display = "none";
            document.getElementById("main_navpanel_history").style.display = "none";
            document.getElementById("main_navpanel_" + panelId).style.display = "block";
            currentNavPanelId = panelId;
        } else {
            myNavPanel.toggle();
        }
    } else {
        if (currentNavPanelId != panelId) {
            document.getElementById("main_navpanel_toc").style.display = "none";
            document.getElementById("main_navpanel_index").style.display = "none";
            document.getElementById("main_navpanel_history").style.display = "none";
            document.getElementById("main_navpanel_" + panelId).style.display = "block";
            currentNavPanelId = panelId;
        }
        myNavPanel.toggle();
    }
}
function isNavPanelVisible() {
    navPanel = document.getElementById("main_navpanel");
    return (navPanel.style.display == "block" && navPanel.offsetHeight > 0);
}
function onResize() {
    resizeComponents();
}
function resizeComponents() {
    
    var clientWidth = YAHOO.util.Dom.getViewportWidth();
    var mainWidth = clientWidth - 195 - 10;
    var componentWidth = mainWidth - 8;
    if (componentWidth < 679) componentWidth = 679;
    if (_componentWidth == componentWidth) return;
    _componentWidth = componentWidth;
    
    var columnavMenuWidth = Math.floor(componentWidth / 3);
    
    addCSSRule(1, ".carousel-component ul.carousel-list li.columnav-menu", "width: " + columnavMenuWidth + "px");
    
    addCSSRule(1, ".viewButton", "width: " + (columnavMenuWidth - 15) + "px");
    
    if (cn) {
    	cn.carousel.calculateSize();
    }
}