/* MP3 Charts Page */
var Charts = new Object();

Charts.switchSection = function (evt) {
    if( !evt ) evt = event;
    log( "switchSection: START (" + evt.type + ")" );

    var selectedCell     = Event.element(evt).parentNode;
    var parentRow        = selectedCell.parentNode;
    var cells            = $A( parentRow.cells );
    var container        = $( 'chart_products' );
    var prevSelectedCell = cells.find( function (cell) { return Element.hasClassName( cell, 'active' ) } );

    // Store previous HTML
    if( !container.product_data ) {
	container.product_data = new Array();
    }

    if( container.data_loaded == null ) {
	container.data_loaded = true;
    }
    
    if( container.data_loaded ) {
	container.product_data[prevSelectedCell.cellIndex] = container.innerHTML;
    }

    Charts.updateNav( evt );

    // If there is already data for selected cell
    if( container.product_data[selectedCell.cellIndex] ) {

	// Show data for selected cell
	container.innerHTML = container.product_data[selectedCell.cellIndex];
    }
    else { // Else
	// Set chart to animated
	container.innerHTML 
	    = '<div class="processing" style="background: #999999;"><img name="proc_img" id="proc_img" '
	    + 'src="/images/cart/cart-processing.gif" width="75" '
	    + 'height="75" /></div>';

	var id = location.href.split( '/' )[5];
	var errMsg
	    = '<div class="processing"><div class="lab-error"><span>There was a problem loading '
	    + 'the requested data. Please try again in a few minutes.'
	    + '</span></div></div>';

	// Get data for seleted cell & show it
	new Ajax.Request( 
	    "/services/charts.html",
	    {
		method     : 'get',
		onSuccess  : function (req) { container.data_loaded = true;  container.innerHTML = req.responseText },
		onFailure  : function (req) { container.data_loaded = false; container.innerHTML = errMsg },
		parameters : 'sect=' + selectedCell.cellIndex + '&id=' + escape(id)
	    } 
	);
    }
    

    return false;
} // switchSection

Charts.updateNav = function (evt) {

    var target = Event.element(evt).parentNode;
    var idx    = target.cellIndex;
    var navs   = $A( document.getElementsByClassName( 'charts_nav3' ) );

    navs.each( function (tbl) {

	var cells            = $A( tbl.rows[0].cells );
	var selectedCell     = cells[idx];
	var prevSelectedCell = cells.find( function (cell) { return Element.hasClassName( cell, 'active' ) } );

	// Remove "active" class from previously active cell
	Element.removeClassName( prevSelectedCell, 'active' );
    
	// Add "active" class to selected cell
	Element.addClassName( selectedCell, 'active' );
    } );

    return false;
} // updateNav