// config options
var panelHeight = 500;


// default pages if no content exists
var activities_default = 'units/defaults/activities.html';
var objectives_default = 'units/defaults/objectives.html';
var resources_default = 'units/defaults/resources.html';

/*
 * ================  Start page config  =======================
 */
var start = {
	id: 'start-panel',
	//title: 'Home Page',
	layout: 'fit',
	border: false,
	bodyStyle: 'padding:25px',
	//contentEl: 'start-div'  // pull existing content from the page
	autoLoad:'units/defaults/start.html'
};

// accordion layout, used for all units
var accordionLayout = {
	id:'accordion-panel',
	border: false,
    layout:'accordion',
	animate: true,
    bodyBorder: false,  // useful for accordion containers since the inner panels have borders already
    bodyStyle: 'background-color:#e4faf6',  // if all accordion panels are collapsed, this looks better in this layout
	defaults: {bodyStyle: 'padding:5px'},
    items: [{
		title: 'Activities',
		id: 'accordion-activities',
		autoScroll: true
	},{
        title: 'Learning Objectives',
		id: 'accordion-objectives',
		autoScroll: true
    },{
        title: 'Resources',
		autoScroll: true,
		id: 'accordion-resources'
    }]
	
};


/*
 * This is the main layout definition.
 */
Ext.onReady(function(){
	
	Ext.QuickTips.init();
	
	/*
	 * Main content area
	 */
	var contentPanel = new Ext.Panel({
		id: 'content-panel',
		//region: 'center', 
		layout: 'card',
		title: 'Introduction',
		//margins: '2 5 5 0',
		activeItem: 0,
		//border: false,
		margins: '3 3 3 0',
		height: panelHeight,
		renderTo: 'content-div',
		items: [ 
			start, accordionLayout
		]
		//contentEl: 'start-div'
	});
	
	/*
	 * Tree containing all units
	 */
	var Tree = Ext.tree;

    var tree = new Tree.TreePanel({
		id: 'tree-panel',
    	title: 'Teaching Materials',
        useArrows: true,
        autoScroll: true,
        animate: true,
        containerScroll: true,
        //border: false,
        // auto create TreeLoader
        dataUrl: 'unit_browser/tree-data.json.php',
		rootVisible: false,
		height: panelHeight,
        root: {
            nodeType: 'async',
            text: 'Ext JS',
            draggable: false,
            id: 'src'
        }
    });

	function doVideo(alink, id){
//		alink.fancybox({
//			'hideOnContentClick': false
//		});
		
		alink.click(
				function(){
					alert('test: ' + id);
				}
			);
	}

	function test(){
		
		$("a.vid").fancybox({
			'hideOnContentClick': false,
			'frameWidth': 350,
			'frameHeight': 280,
			'callbackOnClose': function(){
				$('#fancy_frame').attr('src','#');
			}
		});

		
//		$("a.video").each(function () {
//			//alert(this.href);
//			//doVideo(this, this.id);
//			
//			this.fancybox({
//				'hideOnContentClick': false
//			});	
//		});
		
		// images
		$("a.thumb").fancybox();
		
		// video		
		$("a.video").fancybox({
			'hideOnContentClick': false,
			'callbackOnClose': function(){
				
//				var id = $("div.visibleVideo:visible").attr("id");
//				
//				alert(id);
				
				//alert('stopping video: '+ this.id);
				//document.getElementById( this.href ).stop(); 
				//return false;
				
//				var obj = this;
//				var str = '';
//				for(p in obj){
//					str += ' :: '+ p + ' = '+ obj[p];
//				}
//				
//				alert('starting video: '+ str);
			},
			'callbackOnShow': function(){
//				var id = $("div.visibleVideo:visible").attr("id");
//				
//				alert(id);
			}
		});

//		$( "a.video" )
//			.click(
//				function(){
//					
//					var str = '';
//					for(p in this){
//						str += '\n'+ p + ' = '+ this[p];
//					}
//					
//					alert('starting video: '+ str);
//					
//					//alert(this.id);
//				}
//			);
		
		// When the document is ready, initialize the link so
		// that when it is clicked, the printable area of the
		// page will print.
		
 
		// Hook up the print link.
		$( "a#printpage" )
			.attr( "href", "javascript:void( 0 )" )
			.click(
				function(){
					//alert('trying to print');
					// Print the DIV.
					$( "#Printme" ).printElement();

					// Cancel click event.
					return( false );
				}
			);
 
			
	}

	// on item click functions
    tree.on('click', function(n){
		var sn = this.selModel.selNode || {}; // selNode is null on initial selection
		if(n.leaf && n.id != sn.id){  // ignore clicks on folders and currently selected node 
			Ext.getCmp('content-panel').layout.setActiveItem('accordion-panel');
			
			// activities
			var a = (n['attributes'].activities == undefined) ? activities_default : n['attributes'].activities;
			Ext.getCmp('accordion-activities').load(a);
			
			// learning objectives
			var o = (n['attributes'].objectives == undefined) ? objectives_default : n['attributes'].objectives;
			Ext.getCmp('accordion-objectives').load(o);
			
			// resources
			var r = (n['attributes'].resources == undefined) ? resources_default : n['attributes'].resources;
//			Ext.getCmp('accordion-resources').load(r);

			Ext.getCmp('accordion-resources').load({
				url: r,
				callback: test
			});

			// set active item to be activities
			Ext.getCmp("accordion-panel").getLayout().setActiveItem(0);
			
			// set title to be same as actvitiy name
			Ext.getCmp("content-panel").setTitle(n.text);
		}
		
		// toggle folders
		else if(n.leaf == undefined){
			if(n.isExpanded() == true){
				n.collapse();
			}
			else{
				n.expand();
			}
		}
    });

    // render the tree
	tree.render('nav-div');
	tree.getRootNode().expand();
	
});