Ext.onReady(function(){
	
	Video.frontend.player = $f("player"); 
	
	Video.frontend.details.name._ = new Ext.BoxComponent({
    	autoEl: {tag: 'div',cls: 'name'},
    	autoHeight: true,
    	autoWidth: true
    });
    
    Video.frontend.details.description._ = new Ext.BoxComponent({
    	autoEl: {tag: 'div',cls: 'description'},
    	autoHeight: true,
    	autoWidth: true
    });
    
    Video.frontend.details.link._ = new Ext.BoxComponent({
    	autoEl: {tag: 'div',cls: 'link'},
    	autoHeight: true,
    	autoWidth: true
    });
	
	Video.frontend.details._ = new Ext.Panel({
        layout:'fit',
		border:false,
		height:270,
        renderTo: 'details',
        items: [Video.frontend.details.name._,Video.frontend.details.description._,Video.frontend.details.link._],
        Load: function(id) {
        	this.fireEvent('beforeload',id);
        	var _parent = this;
        	Ext.Ajax.request({
				url: '/videos/getOne/'+id,
				method:'POST',
				success: function(response, options) {
					_parent.fireEvent('load',id,Ext.decode(response.responseText).results[0]);
				}
			});
        },
        listeners: {
        	beforeload: {
        		fn: function(id) {
//        			Video.frontend.rating._.load(id);
//        			this.el.mask('Loading ...','x-mask-loading');
        		}
        	},
        	load: {
        		fn: function(id,attributes) {
//        			this.el.unmask();
        			this._children.name._.setInnerHtml(attributes.name);
					this._children.description._.setInnerHtml(attributes.description);
					
					if (attributes.repository_id) {
						this._children.link._.setInnerHtml('<a href="#"> Download this video </a>')
					}
					Video.frontend.dataView._.select(id);
					Video.frontend.player.play('/videos/file/'+id);
        		}
        	}
        }
    });
    
    
    Video.frontend.rating._ = new Ext.Rating({
    	renderTo: 'rating',
    	type: 'video',
    	label: 'User Rating',
    	disabledMsg: 'You already rated this video.'
    });
    
    Video.frontend.comments._ = new Ext.Panel({
        layout:'fit',
		title: 'COMMENTS',
		titleCollapse:true,
		collapsible:true,
		hidden: true,
		collapsed: true,
		items: [new Ext.BoxComponent({autoEl: {tag: 'div'}})],
        renderTo: 'comments',
        Load: function(id) {
        	this.fireEvent('beforeload');
        	var _parent = this;
        	Ext.Ajax.request({
				url: '/videos/getComments/'+id,
				method:'POST',
				success: function(response, options) {
					_parent.fireEvent('load',Ext.decode(response.responseText).results[0]);
				}
			});
        },
        listeners: {
        	beforeload: {
        		fn: function() {
//        			this.el.mask('Loading ...','x-mask-loading');
        		}
        	},
        	load: {
        		fn: function(attributes) {
//        			this.el.unmask();
        			this.show();
					this.items.items[0].el.dom.innerHTML = attributes.html;
        		}
        	}
        }
    });
	
	Video.frontend.tree._ = new Ext.tree.TreePanel({
		rootVisible:false,
        autoScroll:true,
        loadMask:{msg: 'Loading ...'},

        loader: new Ext.tree.TreeLoader({
            dataUrl: DS+Video.config.controller+DS+Video.config.urls.getAll+DS+'dynamicTree?type=category&frontend=1'
        }),
        
        root: new Ext.tree.AsyncTreeNode({
        	id: '0',
            text:'Categories'
        }),

        listeners: {
        	click:{
        		fn: function(node, e) {
        			Video.frontend.dataView.store._.load({params:{node:node.attributes.id}});
        		}
        	}
        }
	});
	
	Video.frontend.dataView.store._ = new Ext.data.JsonStore({
        url: DS+Video.config.controller+DS+Video.config.urls.getAll+'?type=video&frontend=1',
        root: 'results',
        fields: ['id','name','subtitle','commenting'],
        listeners: {
        	load: {
        		fn: function() {
        			this._parent.el.unmask();
        		}
        	},
        	beforeload: {
        		fn:function() {
        			this._parent.el.mask('Loading ...','x-mask-loading');
        			Video.frontend.player.stopBuffering();
        		}
        	},
        	load: {
        		fn: function() {
        			var attributes = this.data.items[0].data;
        			Video.frontend.details._.Load(attributes.id);
        			
        			if (attributes.commenting==1) {
						Video.frontend.comments._.expand();
						Video.frontend.comments._.Load(attributes.id);
					} else {
						Video.frontend.comments._.hide();
					}
        		},
        		single:true
        	}
        }
    });
    
    Video.frontend.dataView.store._.addListener('load',function(){
    	Video.frontend.player.startBuffering();
    	
    })
	
	Video.frontend.dataView._ = new Ext.DataView({
		region:'center',
		autoScroll: true,
        store: Video.frontend.dataView.store._,
        tpl: new Ext.XTemplate(
			'<tpl for=".">',
	            '<div class="thumb-wrap" id="{id}">',
			    '<div class="thumb"><img src="/data/components/videos/files/thumbs/{id}" title="{name}"></div>',
			    '<span class="name">{name}</span>',
			    '<span>{subtitle}</span></div>',
	        '</tpl>',
	        '<div class="x-clear"></div>'
		),
        multiSelect: true,
        autoWidth: true,
        autoHeight: true,
        overClass:'x-view-over',
        itemSelector:'div.thumb-wrap',
        emptyText: '<div style="padding:5px;">No videos in this category</div>',
		listeners: {
			beforeclick: {
				fn: function(_this,index) {
					if (this.isSelected(index)) return false;
				}
			},
			click: {
				fn: function (_this,index) {
					var attributes = this._children.store._.data.items[index].data;
//					Video.frontend.player.play('/videos/file/'+attributes.id);

					Video.frontend.player.close();
					
					Video.frontend.details._.Load(attributes.id);
					
					if (attributes.commenting==1) {
						Video.frontend.comments._.collapse();
						Video.frontend.comments._.Load(attributes.id);
					} else {
						Video.frontend.comments._.hide();
					}
				}
			}
		}
    })
	
	Video.frontend.panel._ = new Ext.Panel({
        layout:'border',
        title: 'ALL VIDEOS BY CATEGORY',
		height:300,
		border:false,
        renderTo: 'categories',
        items:[{
            region:'west',
            border:false,
            width: 200,
            layout:'fit',
            items: [Video.frontend.tree._]
        },{
            region:'center',
            width: 705,
//            autoWidth: true,
            autoScroll: true,
            id: 'videoDataviewContainer',
            layout:'fit',
            items: [Video.frontend.dataView._]
        }]
    });
    
	Baf.structure(Video.frontend,Video);
    
    Video.frontend.dataView.store._.load();
    
});