Ext.BLANK_IMAGE_URL = '/js/ext-1.1/resources/images/aero/s.gif';
Application = function(){
        var layout;
        var innerLayout;
        
        var dialog;
		var iframe;

		var videosTab;
		
		var user = "";
		var permissions = "";
		
		var timelineShown = true;
    
    	var baseUrl = "";
    	
        return {
            
            
            init : function(){
               
               //Load the base URL so that it can be used when sub iframes call Jscript
               //from the main document
        	   var loc = window.location.href;
        	   this.baseUrl = "/";
        	   if (loc.indexOf("frontend_dev") > 0){
            	this.baseUrl = "/frontend_dev.php/";
               }
        	           	       
               
               mainlayout = new Ext.BorderLayout(document.body,{
               		north: {
                        split:false,
                        initialSize: 60,
                        titlebar: false
                    },
                    center: {                     
                    }                    
               });
               mainlayout.add('north', new Ext.ContentPanel('mainlayoutnorth', 'MNorth'));
               
               layout = new Ext.BorderLayout('container', {
                    hideOnLayout: true,
                    north: {
                        split:false,
                        initialSize: 29,
                        titlebar: false
                    },
                    west: {
                        split:true,
                        initialSize: 185,
                        minSize: 175,
                        maxSize: 400,
                        titlebar: true,
                        collapsible: true,
                        animate: true,
                        autoScroll: true
                    },
//                    east: {
//                        split:true,
//                        initialSize: 100,
//                        minSize: 100,
//                        maxSize: 200,
//                        titlebar: true,
//                        collapsible: true,
//                        animate: true,
//                        tabPosition: 'top',
//                        alwaysShowTabs : true,
//                        closeOnTab: true,
//                        resizeTabs: true
//                    },
                    center: {
                        titlebar: false,
                        minSize: 800,
                        autoScroll:true,
                        tabPosition: 'top',
                        alwaysShowTabs : true,
                        closeOnTab: true,
                        resizeTabs: true
                    }
                });
                	                
                layout.beginUpdate();
                
                innerLayout = new Ext.BorderLayout('center1', {
					north: {
                        split:true,
                        initialSize: 233,
                        minSize: 100,
                        maxSize: 400,
                        autoScroll:true,
                        collapsible:true,
                        titlebar: false
                    },
                    center: {
                        autoScroll:true
                        
                    }
                });
                innerLayout.add('north', new Ext.ContentPanel('timeline','Timeline'));
                innerLayout.add('center', new Ext.ContentPanel('videos','Videos'));
                               
                //This wrapper needs to be replaced by tabs
                var wrapperLayout = new Ext.BorderLayout('wrapper', {						
                    center: {                    	
                        autoScroll:true
                        }
                });
                wrapperLayout.add('center',new Ext.NestedLayoutPanel(innerLayout));		       
                
                layout.add('north', new Ext.ContentPanel('north', 'North'));
                layout.add('west', new Ext.ContentPanel('west', {title: 'Categories'}));
				videosTab = new Ext.NestedLayoutPanel(wrapperLayout, {title: 'Videos',id : 'videos', closable: false, collapsible: true});
                layout.add('center',videosTab);
                layout.getRegion('center').showPanel('wrapper');//               
                layout.endUpdate();
                
                mainlayout.add('center', new Ext.NestedLayoutPanel(layout));
                
                Application.timelineShown = true;
                
                //If the user is directed to the site with a url link to open a video
				//Open a new tab with that video
				var id = Application.getQueryVariable('videoid');
				if (id ){
					this.loadInTab('Watch Video','videos/watch/videoid/' + id);
				}		
           },
           
           loadInTab : function(title, link){
				
				var iframe = Ext.DomHelper.append(document.body, 
    		            {tag: 'iframe', frameBorder: 0, src: link});
    			var panel = new Ext.ContentPanel(iframe, 
    		            {title: title, fitToFrame:true, closable:true});
    			
				layout.add('center', panel);   
				
           },
                      
           
           showTimeline : function(){
           	    Application.timelineShown = true;
                var north = innerLayout.getRegion('north');
                north.show();
           },


           hideTimeline : function(){
           	    Application.timelineShown = false;
                var north = innerLayout.getRegion('north');
                north.hide();
           },

		   isTimelineShown : function(){
		   	   return Application.timelineShown;
		   },
         
           focusVideosTab : function() {
           		layout.getRegion('center').showPanel('wrapper');           		
           },
           
           showDialog : function(title, link){
            if(!dialog){ // lazy initialize the dialog and only create it once
                dialog = new Ext.LayoutDialog("login-dlg", { 
                        modal:true,
                        width:350,
                        height:330,
                        shadow:true,                        
                        minWidth:350,
                        minHeight:330,
	                    center: {
	                        autoScroll:true,
	                        tabPosition: 'top',
	                        closeOnTab: true,
	                        alwaysShowTabs: false
	                    }
                });
                dialog.addKeyListener(27, dialog.hide, dialog);
                dialog.on('hide',this.dialogHide, this);
                
                dialog.addButton('Close', dialog.hide, dialog);

				iframe = Ext.DomHelper.append(document.body, 
    		            {tag: 'iframe', frameBorder: 0, src: link});
    			var panel = new Ext.ContentPanel(iframe, 
    		            {title: title, fitToFrame:true, closable:true});
	 			var layout = dialog.getLayout()
				layout.add('center', panel);   

                layout.endUpdate();
                
                dialog.show();
            } else {
            	dialog.show();
            	iframe.src = link;
            }
                        
        },
        dialogHide : function(dlg){
        	//Clear the iframe
        	iframe.src = "/blank.html";    	
        	//Check the logged in status
        	this.updateLoggedInStatus();
        },
        
        updateLoggedInStatus : function() {
        	var mgr = new Ext.UpdateManager("login-details");
        	mgr.on('update', this.loggedInStatusUpdated, this);
        	mgr.update('useradmin/logindetails');
        	
        },
                
        loggedInStatusUpdated : function(el, res){
        	//Extract information
        	result = el.dom.innerHTML;
        	var message = "";
        	if (result == ""){
        		//User not logged in
        		this.user = "";
        		this.permissions = "";        		
        		message = "Login";
        		//Make sure any extra buttons are disable/removed				
				Toolbar.removeLoggedInToolbarItems();
        	} else {
        		results = result.split(";");
        		this.user = results[0];
        		this.permissions = results[1];
        		message = "Logout - " + this.user;
				Toolbar.addLoggedInToolbarItems();
        	}
        	
        	if (this.permissions == 'admin') {
        		Toolbar.addAdminMenuItems();
        	}
        	
        	Toolbar.setLoginButtonText(message);
        	VideoManager.updateList();
        },
        
        hasPermission : function(perm) {
        	return this.permissions == perm;
        	
        },
        
        getQueryVariable: function (variable) {
		  var query = window.location.search.substring(1);
		  var vars = query.split("&");
		  for (var i=0;i<vars.length;i++) {
		    var pair = vars[i].split("=");
		    if (pair[0] == variable) {
		      return pair[1];
		    }
		  } 
        }
        
		
           
     }
       
}();
Ext.EventManager.onDocumentReady(Application.init, Application, true);

Message = function(){
	var msgCt;

	function createBox(t, s){
		 return ['<div class="msg">',
		 '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',
		 '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><h3>', t, '</h3>', s, '</div></div></div>',
		 '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',
		 '</div>'].join('');
	 }
 
 	return {
		 msg : function(title, format){
		 if(!msgCt){
		 msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
		 }
		 msgCt.alignTo(document, 't-t');
		 var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
		 var m = Ext.DomHelper.append(msgCt, {html:createBox(title, s)}, true);
		 m.slideIn('t').pause(1).ghost("t", {remove:true});
		 }
	}
}();

// this formatter function will help us deal 
// with unexpected ideas of what boolean means
Ext.util.Format.boolean = function(v) {
	switch(v) {
		
		case 1:
		case "1":
		case true:
		case "Yes":
		case "yes":
		case "True":
		case "true":
			return true;
			break;
		default:
			return false;
		
	}
}