Ext.ns('SiteStacker.videos.Frontend');

SiteStacker.videos.Frontend = function(config) {
	
	Ext.apply(this,config);
	
	this.player = jwplayer(this.playerContainer).setup({
		flashplayer:"/js/includes/jwplayer/player.swf",
		file:"/videos/file/142",
		width:420,
		type:"video",
		skin:"/js/includes/jwplayer/skins/modieus.zip"
	});
	
	this.details={};
	
	this.nameBox = new Ext.BoxComponent({
    	autoEl: {tag: 'div',cls: 'name'},
    	autoHeight: true,
    	autoWidth: true
    });
    
    this.descriptionBox = new Ext.BoxComponent({
    	autoEl: {tag: 'div',cls: 'description'},
    	autoHeight: true,
    	autoWidth: true
    });
    
    this.linkBox = new Ext.BoxComponent({
    	autoEl: {tag: 'div',cls: 'link'},
    	autoHeight: true,
    	autoWidth: true
    });
    
	this.details = new Ext.Panel({
        layout:'fit',
		border:false,
		height:298,
        renderTo: this.detailsContainer,
        items: [this.nameBox, this.descriptionBox, this.linkBox],
        Load: function(id) {
        	this.details.el.mask('Loading ...','x-mask-loading');
        	Ext.Ajax.request({
				url: '/videos/getOne/'+id,
				method:'POST',
				success: function(response, options) {
					var attributes=Ext.decode(response.responseText).results[0];
					this.details.el.unmask();
        			this.nameBox.update(attributes.name);
					this.descriptionBox.update(attributes.description);
					
					if (attributes.repository_id) {
						this.linkBox.update('<a href="#"> Download this video </a>')
					}
					this.dataView.select(id);
					
					
					this.player.stop();
					this.player.load(
						{
							file:'/videos/file/'+id,
							type:'video'
						}
					);
					this.player.play();
				},
				scope:this
			});
        }.createDelegate(this)
    });
    
    SiteStacker.videos.Frontend.comments=this.comments = new Ext.Panel({
        layout:'fit',
		title: 'COMMENTS',
		titleCollapse:true,
		collapsible:true,
		hidden: true,
		collapsed: false,
		items: [new Ext.BoxComponent({autoEl: {tag: 'div'}})],
        renderTo: this.commentsContainer,
        Load: function(id) {
//        	this.fireEvent('beforeload');
        	this.bwrap.mask('Loading ...','x-mask-loading');
        	Ext.Ajax.request({
				url: '/videos/getComments/'+id,
				method:'POST',
				success: function(response, options) {
					this.fireEvent('load',Ext.decode(response.responseText).results[0]);
					this.getComponent(0).el.dom.innerHTML = Ext.decode(response.responseText).results[0].html;
        			this.bwrap.unmask();
        			this.show();
				},
				scope:this
			});
        }
    });
    
    this.tree = new Ext.tree.TreePanel({
		rootVisible:false,
		width:200,
        autoScroll:true,
        loadMask:{msg: 'Loading ...'},

        loader: new Ext.tree.TreeLoader({
            dataUrl: '/videos/getAllFrontend',
            baseParams: {type: 'category'}
        }),
        
        root: new Ext.tree.AsyncTreeNode({
        	id: '0',
            text:'Categories',
            children:[
				{
					iconCls:'video-icon',
            		text:'Most Recent',
            		id:'recent',
					leaf:true
            	},
				{
            		text:'All Videos',
            		id:'all',
            		expanded:true,
            		leaf:false
            	}
            ]
        }),

        listeners: {
        	click:{
        		fn: function(node, e) {
        			this.dataViewStore.load({params:{node:node.attributes.id}});
        		},
        		scope:this
        	}
        }
	});
	
	this.dataViewStore = new Ext.data.JsonStore({
        url: '/videos/getAllVideos',
        fields: ['id','name','subtitle','commenting'],
        listeners: {
        	load: {
        		fn: function() {
//        			this.dataView.el.unmask();
        		},
        		scope:this
        	},
        	beforeload: {
        		fn:function() {
        			this.dataView.el.mask('Loading ...','x-mask-loading');
        		},
        		scope:this
        	},
        	load: {
        		fn: function(store,records) {
        			if(store.data.items[0]){
	        			var attributes = store.data.items[0].data;
	        			if(!this.videoId){
	        				this.details.Load(attributes.id);
	        			}else{
	        				this.details.Load(this.videoId);
	        			}
	        			if (attributes.commenting==1) {
							this.comments.Load(attributes.id);
						} else {
							this.comments.hide();
						}
        			}
        		},
        		scope:this,
        		single:true
        	}
        }
    });
    
	this.dataView = new Ext.DataView({
//		region:'center',
        store: this.dataViewStore,
//		layout:'fit',
        tpl: new Ext.XTemplate(
			'<tpl for=".">',
	            '<div class="thumb-wrap" id="{id}">',
			    '<div class="thumb"><img src="/content/components/videos/thumbnails/{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(dw,index) {
					if (this.isSelected(index)) return false;
				}
			},
			click: {
				fn: function (dw,index) {
					var attributes = dw.store.data.items[index].data;
//					this.player.play('/videos/file/'+attributes.id);

//					Video.frontend.player.close();
					
					this.details.Load(attributes.id);
					
					if (attributes.commenting==1) {
						this.comments.Load(attributes.id);
					} else {
						this.comments.hide();
					}
				},
				scope:this
			}
		}
    })
	
	this.categoryPanel = new Ext.Panel({
        layout:{
			type:'hbox',
			align:'stretch'
		},
        title: 'ALL VIDEOS BY CATEGORY',
		height:300,
		border:false,
        renderTo: this.categoriesContainer,
        items:[this.tree,{
			flex:1,
			layout:'fit',
			autoScroll:true,
			items:this.dataView
		}]
    });
    
    this.dataViewStore.load({
		params:{
			node:'recent'
		}
    });
	
}