/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2010, Sencha Inc.
 * licensing@extjs.com
 * 
 * http://www.sencha.com/license/
 */

SessionPanel = Ext.extend(Ext.DataView, {
    autoHeight: true,
    frame:false,
    baseCls: 'x-plain',
    cls:'demos',
    itemSelector: 'dd',
    overClass: 'over',
    
    tpl : new Ext.XTemplate(

'<div id="session-ct">',
'<tpl for=".">',
'<tpl if="title == \'Day Zero\'">',
'<table id="{id}" border="0" cellpadding="0" cellspacing="0" width="938" style="display:none;">',
'    <tr class="track-headings dayone">',
'        <th class="time" width="115">',
'        </th>',
'        <th class="trackA" width="822">',
'            <h4>Registration Day <span>Evening Event</span></h4>',
'        </th>',
'    </tr>',
'    <tr>',
'</tpl>',
'<tpl if="title == \'Day One\'">',
'<table id="{id}" border="0" cellpadding="0" cellspacing="0" width="938">',
'    <tr class="track-headings dayone">',
'        <th class="time" width="115">',
'        </th>',
'        <th class="trackA" width="274">',
'            <h4>Track A <span>Sencha Foundations</span></h4>',
'        </th>',
'        <th class="trackB" width="274">',
'            <h4>Track B <span>Sencha Labs</span></h4>',
'        </th>',
'        <th class="trackC" width="274">',
'            <h4>Track C <span>Sencha Ext GWT</span></h4>',
'        </th>',
'    </tr>',
'    <tr>',
'</tpl>',
'<tpl if="title == \'Day Two\'">',
'<table id="{id}" border="0" cellpadding="0" cellspacing="0" width="938" style="display:none;">',
'    <tr class="track-headings daytwo">',
'        <th class="time" width="115">',
'        </th>',
'        <th class="trackA" width="274">',
'            <h4>Track A <span>Desktop, Grand Ballroom</span></h4>',
'        </th>',
'        <th class="trackB" width="274">',
'            <h4>Track B <span>Web Tech &amp; Tools, Pavilion Room</span></h4>',
'        </th>',
'        <th class="trackC" width="274">',
'            <h4>Track C <span>Mobile, Venetian Room</span></h4>',
'        </th>',
'    </tr>',
'    <tr>',
'</tpl>',
'<tpl if="title == \'Day Three\'">',
'<table id="{id}" border="0" cellpadding="0" cellspacing="0" width="938" style="display:none;">',
'    <tr class="track-headings daythree">',
'        <th class="time" width="115">',
'        </th>',
'        <th class="trackA" width="274">',
'            <h4>Track A <span>Desktop, Grand Ballroom</span></h4>',
'        </th>',
'        <th class="trackB" width="274">',
'            <h4>Track B <span>Web Tech &amp; Tools, Venetian Room</span></h4>',
'        </th>',
'        <th class="trackC" width="274">',
'            <h4>Track C <span>Mobile, Crystal Room</span></h4>',
'        </th>',
'    </tr>',
'    <tr valign="top">',
'</tpl>',
'<tpl for="sessions">',
'    <tpl if="values.track == \'All\'">',
'    <td class="time" valign="top">',
'        <time datetime="{time}-{endtime}">{time}-{endtime}</time>',
'    </td>',
'    </tpl>',
'    <tpl if="values.track == \'A\'">',
'    <td class="time" valign="top">',
'        <time datetime="{time}-{endtime}">{time}-{endtime}</time>',
'    </td>',
'    </tpl>',
'    <td class="track{[values.track]}" valign="top" <tpl if="values.track == \'All\'">colspan="3"</tpl>>',
'            <tpl if="values.details == 1">',
'                <h5><tpl if="values.fav == 1"><img class="favstar" src="/assets/images/extcon/favoritesmall.png" alt="" height="16" width="16" /></tpl> <a href="session.php?sid={[values.sid]}"><tpl if="values.agenda"><img src="/assets/images/icon-presentation.png" alt="See the assets for this session" height="16" width="20" /></tpl> {text}</a> <span class="presenter">by {presenter}</span></h5>',
'            </tpl>',
'            <tpl if="values.details == 0">',
'                <h5>{text}</h5>',
'            </tpl>',
'            <p>{desc}</p>',
'    </td> <!-- End Session -->',
'    <tpl if="values.track == \'All\'">',
'</tr>',
'<tr>',
'    </tpl>',
'    <tpl if="values.track == \'C\'">',
'</tr>',
'<tr>',
'    </tpl>',
'</tpl>',
'</table> <!-- End Day Table -->',
'</tpl>',
'</div>'

),

    onClick : function(e){
        var group = e.getTarget('h2', 3, true);
        if(group){
            group.up('div').toggleClass('collapsed');
        }else if (false){
            var t = e.getTarget('dd', 5, true);
            if(t && !e.getTarget('a', 2)){
                var url = t.getAttributeNS('ext', 'url');
                window.open(url);
            }
        }
        return SessionPanel.superclass.onClick.apply(this, arguments);
    }
});


Ext.EventManager.on(window, 'load', function(){
	

    for(var i = 0, c; c = catalog[i]; i++){
        c.id = 'day-' + i;
    }

    var store = new Ext.data.JsonStore({
        idProperty: 'id',
        fields: ['id', 'title', 'dt', 'sessions', 'height'],
        data: catalog
    });

    new Ext.Panel({
        autoHeight: true,
        //collapsible: true,
        frame:false,
        baseCls: 'x-plain',
        //title: 'All Sessions',
        items: new SessionPanel({
            store: store
        })
    }).render('all-sessions');

});



/**
 * Manages the showing and hiding tables on the 2010 Conference page.
 * The links refer to the Day 1/2/3 links at the top, the tables to the events on
 * each day.
 */
Ext.onReady(function() {
    var links  = ['dayzero', 'dayone', 'daytwo', 'daythree'],
        tables = ['day-0', 'day-1', 'day-2', 'day-3'];
        
    var mappings = {
        'dayzero'  : 'day-0',
        'dayone'   : 'day-1',
        'daytwo'   : 'day-2',
        'daythree' : 'day-3'
    };
    
    for (var link in mappings) {
        (function(link) {
            Ext.get(link).on('click', function(e) {
                e.stopEvent();

                Ext.each(tables, function(table) {
                    if (mappings[link] == table) {
                        Ext.fly(table).setVisibilityMode(Ext.Element.DISPLAY).show();
                    } else {
                        Ext.fly(table).setVisibilityMode(Ext.Element.DISPLAY).hide();
                    }
                });
                
                Ext.each(links, function(linkId) {
                    if (linkId == link) {
                        Ext.fly(linkId).addClass('active');
                    } else {
                        Ext.fly(linkId).removeClass('active');
                    }
                });
            });
        })(link);
    }
});