Ext.onReady(function(){
var w = '591' * .6;
var h = '696' * .6;

    var catalog = [{
        id:'title',
        title: 'Download CourseScheduler',
        cls:'sample-item-over'
    },{
        title: 'Basic Features',
        samples: [{
            text: 'Easily add courses',
            width: w,
            height: h,
            url: 'easily_add_courses.swf',
            icon: 'easily_add_courses.jpg'
        },{
            text: 'Browse for courses',
            width: w,
            height: h,
            url: 'browse_for_courses.swf',
            icon: 'browse_for_courses.jpg'
        },{
            text: 'Quickly navigate results',
            width: w,
            height: h,
            url: 'quickly_navigate_results.swf',
            icon: 'quickly_navigate_results.jpg'
        },{
            width: w,
            height: h,
            text: 'Enrollment Checklist',
            url: 'enrollment_checklist.swf',
            icon: 'enrollment_checklist.jpg'
        },{        
            width: w,
            height: h,
            text: 'Preorder Books',
            url: 'preorder_books.swf',
            icon: 'preorder_books.jpg'            
        }]
    },{
        title: 'Advanced Features',
        samples: [{
            width: w,
            height: h,
            text: 'Add courses with details',
            url: 'add_courses_with_details.swf',
            icon: 'add_courses_with_details.jpg'
        },{
            width: w,
            height: h,
            text: 'Manage course details',
            url: 'manage_course_details.swf',
            icon: 'manage_course_details.jpg'
        },{
            width: w,
            height: h,
            text: 'Click and drag sections',
            url: 'click_and_drag_sections.swf',
            icon: 'click_and_drag_sections.jpg'
        },{
            width: w,
            height: h,
            text: 'Save and load schedules',
            url: 'save_and_load_schedules.swf',
            icon: 'save_and_load_schedules.jpg'
        },{
            width: w,
            height: h,
            text: 'Publish to facebook',
            url: 'publish_to_facebook.swf',
            icon: 'publish_to_facebook.jpg'
        },{
            width: w,
            height: h,
            text: 'Sorting preferences',
            url: 'sorting_preferences',
            icon: 'sorting_preferences.jpg'
        },{
            width: w,
            height: h,
            text: '"Favorite" schedules',
            url: 'favorite_schedules.swf',
            icon: 'favorite_schedules.jpg'
        }]
    }];

    var tpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="sample-item {cls}" id="sample-{#}">&#160;&#160;&#160;&#160;<span>{title}</span></div>',
            '</tpl>'
    );

    tpl.overwrite('sample-menu', catalog);

    var samplesTpl = new Ext.XTemplate(
        '<dl>',
            '<tpl for="samples">',
            '<dt><a href="http://coursescheduler.net/i2008/movies/3.2.0.1/{url}" rel="lightbox" title="{text}" height="{height}" width="{width}">',
                '<img class="sample-image" src="images/{icon}"/></a><br/>',
                '<div>{text}</div>',
            '</dt>',
            '</tpl>',
        '</dl>'
    );


    var menu = Ext.get('sample-menu');
    var box = Ext.get('sample-box');

    var running = null, active = box.child('div.sample-slider');
    function clearRunning(){
        running = null;
    }

    menu.on('mousedown', function(e, t){
        if(t = e.getTarget('.sample-item:not(.sample-item-over)')){
            Ext.fly(t).removeClass('sample-inactive-over');
            Ext.fly(t).radioClass('sample-item-over');
            var s = catalog[t.id.split('-')[1]-1];
            if(running){
                running.stopFx();
            }
            if(active){
                active.slideOut('b', {duration:.35, remove:true});
            }else{
                box.child('img').hide();
            }
            s.el = new Ext.Element(document.createElement('div'));
            s.el.addClass('sample-slider');
            s.el.enableDisplayMode();
            if(s.id == 'title'){
                s.el.update('<a href="http://www.coursescheduler.net/download/CourseScheduler2008.exe"><img class="extjs-here" src="images/main_splash.png" /></a>');
            }else{
                samplesTpl.overwrite(s.el.dom, s);
            }
            s.el.appendTo(box);
            s.el.slideIn('t', {callback: clearRunning, duration:.35});
            running = s.el;
            active = s.el;
            
            myLightbox.updateElementList();
        }
    });

    menu.on('mouseover', function(e, t){
        if(t = e.getTarget('.sample-item:not(.sample-item-over)')){
            Ext.fly(t).addClass('sample-inactive-over');
        }
    });
    menu.on('mouseout', function(e, t){
        if((t = e.getTarget('.sample-item:not(.sample-item-over)')) && !e.within(t, true)){
            Ext.fly(t).removeClass('sample-inactive-over');
        }
    });

    box.on('mouseover', function(e, t){
        if(t = e.getTarget('img.sample-image')){
            Ext.fly(t).up('dt').addClass('sample-over');
        }
    });
    box.on('mouseout', function(e, t){
        if(t = e.getTarget('img.sample-image')){
            Ext.fly(t).up('dt').removeClass('sample-over');
        }
    });

/*
function initLightbox() { myLightbox = new Lightbox(); }
Event.observe(window, 'load', initLightbox, false);
*/
	myLightbox = new Lightbox();	
//	myLightbox.updateElementList();
});