var addition_options = new Ext.form.FieldSet({
	id:'addition_options_fieldset'
	,title:'Additional Options'
	,autoHeight:true
	,layout:'form'
	,items:[
		{
			xtype:'checkbox'
			,id:'paid_stats'
			,hideLabel:true
			//,hidden:true
			,inputValue:1
			,name:'paid_stats'
			//,visibilityMode: Ext.Element.DISPLAY
			,boxLabel:'Add statistics reporting to this account (additional $2.00 monthly charge)'
		}
		,{
			xtype:'checkbox'
			,id:'paid_dns'
			,hideLabel:true
			,inputValue:1
			,name:'paid_dns'
			//,visibilityMode: Ext.Element.DISPLAY
			,boxLabel:'Use custom domain name for podcast URL (additional $5.00 one-time charge)'
			,listeners:{
				check:function(f,check){
					if (check) {
						Ext.getCmp('custom_domain_block').show();
					} else{
						Ext.getCmp('custom_domain_block').hide();
					}
				}
			}
		}
		,{
			border:false
			,style:'padding-left:16px;border-left:1px solid #999;margin-left:4px;font-size:12px;'
			,width:400
			,hidden:true
			,id:'custom_domain_block'
			,layout:'form'
			,items:[
				{
					xtype:'textfield'
		    		,fieldLabel:'Custom Domain Name'
		    		,name:'domainname'
		    		,width:200
		    		,emptyText:'mydomain.com'
				}
			]
			,html:'<br />This option allows you to have both username.' +
			'libsyn.com and any domain you are able to register point to your libsyn blog page. ' +
			'<b>Clicking this option does not register this domain name.</b> ' +
			'You will need to go through a standard domain name registrar, and you will need to pay them on a yearly basis ' +
			'to keep the domain name.' +
			'<br />'+
			'<br />When registering your domain, please use the following for your name servers:' +
			'<br />primary: NS1.LIBSYN.COM' +
			'<br />secondary: NS2.LIBSYN.COM' +
			'<br />'+
			'<br />*-it may take 24-48 hours for your domain name to take effect.'
		}
	]
});

var service_selection = new Ext.form.FieldSet({
	id:'service_selection_fieldset'
	,title:'Select Service Level *'
	,autoHeight:true
	,html:'<div class="plan_features">' +
	'All plans include the following libsyn exclusive <a href="/features.php">features</a><br/ ><br />' +
	'<dl>' +
	'<li>Expanding Storage' +
	'<li>Unmetered Bandwidth' +
	'<li>RSS Feed Creation</li>' +
	'<li>Customizable Webpage / Blog</li>' +
	'<li>Web and FTP Uploading</li>' +
	'</dl>' +
	'</div>' +
	'<div class="fine_print">* You may change your active service level at any time, however there is a $5.00 change of service fee for downgrades.</div>'

	,items:[
		{
			xtype: 'checkboxgroup'
            ,hideLabel:true
            ,allowBlank: false
            ,msgTarget:'under'
            ,blankText:'You must select a service level'
            ,autoHeight:true
            ,visibilityMode :Ext.Element.DISPLAY
            ,id: 'service_level'
            ,itemCls: 'x-check-group-alt'
            ,style:'text-align:center;'
    		,defaults:{
    			style:'text-align:center;'
    		}
            ,items:[
            	{
            		columnWidth:.2
            		,id:'libsyn50'
            		,autoHeight:true
            		,defaults:{
		    			style:'text-align:center;'
		    		}
		    		,frame:true
		    		,baseCls:'x-box'
		    		,html:'<div class="service_title">libsyn50</div>' +
		    		'<div class="service_price">$5 / month</div>' +	
		    		'<div class="service_storage">50MB / month</div>' +	
					'<div class="service_stats">No statistics</div>' +
		    		'<div class="service_descr">Good for entry level users.</div>'
            		,items:[
            			{
            				name: 'service_level'
            				,id:'service_level_101'
            				,xtype:'radio'
		            		,inputValue: 101
		            		,listeners:{
		            			check:function(f,check){
		            				
		            				if(check){
		            					Ext.getCmp('paid_stats').show();
		            				}
		            				else {
		            					Ext.getCmp('paid_stats').hide();
		            				}
		            			}
		            		}
            			}
            		]
            	}
            	,{
            		columnWidth:.2
            		,id:'libsyn100'
            		,hidden:true
            		,defaults:{
		    			style:'text-align:center;'
		    		}
		    		,frame:true
		    		,baseCls:'x-box'
		    		,html:'<div class="service_title">libsyn100</div>' +
		    		'<div class="service_price">$6 / month</div>' +	
		    		'<div class="service_storage">100MB / month</div>' +
		    		'<div class="service_stats">Full statistics</div>' +
		    		'<div class="service_descr">Good for entry level users.</div>'
            		,items:[
            			{
            				name: 'service_level'
            				,xtype:'radio'
            				,id:'service_level_102'
		            		,inputValue: 102
            			}
            			
            		]
            		 
            	}
            	,{
            		columnWidth:.2
            		,defaults:{
		    			style:'text-align:center;'
		    		}
		    		,frame:true
		    		,baseCls:'x-box'
		    		,html:'<div class="service_title">libsyn250</div>' +
		    		'<div class="service_price">$12 / month</div>' +	
		    		'<div class="service_storage">250MB / month</div>' +
		    		'<div class="service_stats">Full statistics</div>' +
		    		'<div class="service_descr">More storage for heavy users.</div>'
            		,items:[
            			{
            				name: 'service_level'
            				,xtype:'radio'
            				,id:'service_level_103'
		            		,inputValue: 103
            			}
            			
            		]
            		 
            	}
            	,{
            		columnWidth:.2
            		,frame:true
		    		,html:'<div class="service_title">libsyn525</div>' +
		    		'<div class="service_price">$24 / month</div>' +	
		    		'<div class="service_storage">525MB / month</div>' +
		    		'<div class="service_stats">Full statistics</div>' +
		    		'<div class="service_descr">Lots of storage for regular producers.</div>'
		    		,baseCls:'x-box'
            		,defaults:{
		    			style:'text-align:center;'
		    		}
            		,items:[
            			{
            				name: 'service_level'
            				,id:'service_level_104'
            				,xtype:'radio'
		            		,inputValue: 104
            			}
            		]
            	}
            	,{
            		columnWidth:.2
            		,defaults:{
		    			style:'text-align:center;'
		    		}
		    		,frame:true
		    		,html:'<div class="service_title">libsyn800</div>' +
		    		'<div class="service_price">$36 / month</div>' +	
		    		'<div class="service_storage">800MB / month</div>' +
		    		'<div class="service_stats">Full statistics</div>' +
		    		'<div class="service_descr">Plenty of storage for serious users.</div>'
		    		,baseCls:'x-box'
            		,items:[
            			{
            				name: 'service_level'
            				,xtype:'radio'
            				,id:'service_level_105'
		            		,inputValue: 105	
		            		
            			}
            		]
            	}
            	,{
            		columnWidth:.2
            		,defaults:{
		    			style:'text-align:center;'
		    		}
		    		,frame:true
		    		,html:'<div class="service_title">libsyn1500</div>' +
		    		'<div class="service_price">$60 / month</div>' +	
		    		'<div class="service_storage">1500MB / month</div>' +
		    		'<div class="service_stats">Full statistics</div>' +
		    		'<div class="service_descr">That\'s 17.5GB of storage a year!.</div>'
		    		,baseCls:'x-box'
            		,items:[
            			{
            				name: 'service_level'
            				,xtype:'radio'
            				,id:'service_level_106'
		            		,inputValue: 106
		            		
            			}
            		]
            		 
            	}
            	,{
            		columnWidth:.2
            		,hidden:true
            		,id:'libsyn3000'
            		,defaults:{
		    			style:'text-align:center;'
		    		}
		    		,frame:true
		    		,html:'<div class="service_title">libsyn3000</div>' +
		    		'<div class="service_price">$180 / month</div>' +	
		    		'<div class="service_storage">3000MB / month</div>' +
		    		'<div class="service_stats">Full statistics</div>' +
		    		'<div class="service_descr">That\'s 25GB of storage a year!.</div>'
		    		,baseCls:'x-box'
            		,items:[
            			{
            				name: 'service_level'
            				,xtype:'radio'
            				,id:'service_level_107'
		            		,inputValue: 107
		            		
            			}
            		]
            		 
            	}
            ]
		}
		
		,{
			layout:'column'
			,border:false
			,frame:true
			,style:'padding-bottom:10px;'
			,baseCls:'x-box'
			,defaults:{
				baseCls:'x-box'
			}
			,items:[
				{
					xtype:'label'
					,text:'Storage space calculator'
					,style:'font-size:16px;font-weight:bold;'
					,width:600
					,border:false
					
					//,frame:true
				}
				,{
					xtype:'label'
					,text:'How much do you need? This simple calculate can help you estimate your storage requirements.'
					,width:600
					,style:'padding-bottom:5px;'
				}
				,{
					width:100
					,border:false
					,labelAlign:'top'
					,layout:'form'
					,items:[
						{
							xtype:'textfield'
							,fieldLabel:'Length (minutes)'
							,emptyText:'minutes'
							,width:80
							,value:20
							,name:'episode_length'
							,id:'episode_length_field'
							,enableKeyEvents:true
							,listeners:{
								keyup: function(f){
									calcStorage();
									//debugger;
								}
							}
						}
					]
				}
				,{
					xtype:'label'
					,width:20
					,border:false
					,text:'x'
					,style:'margin-top:25px;'
				}
				,{
					width:160
					,border:false
					,layout:'form'
					,labelAlign:'top'
					,items:[
						new Ext.form.ComboBox({
	                        store: new Ext.data.SimpleStore({
	                            fields:['value','label']
	                            ,data:[
	                                [96,'Talk-radio'],[128,'High Quality Audio'],[1200,'iPod/iTunes Video'],[2500,'HD Video']
	                            ]
	                        })
	                        ,displayField: 'label'
	                        ,mode: 'local'
	                        ,hideLabel:false
	                        ,fieldLabel:'Type of content'
	                        ,hiddenId:'bitrate'
	                        ,id: 'content_type'
	                        ,value:96
	                        ,emptyText:''
	                        ,width:150
	                        ,editable:true
	                        ,valueField: 'value'
	                        ,forceSelection: false
	                        ,triggerAction: 'all'
	                        ,enableKeyEvents:true
							,listeners:{
								select: function(){
									calcStorage();
								}
							}
						})
                    ]
				}
				,{
					xtype:'label'
					,width:20
					,border:false
					,text:'x'
					,style:'margin-top:25px;'
				}
				,{
					width:120
					,border:false
					,labelAlign:'top'
					,layout:'form'
					,items:[
						{
							xtype:'textfield'
							,fieldLabel:'Releases per month'
							,width:100
							,emptyText:'number'
							,name:'frequency'
							,id:'frequency_field'
							,value:3
							,enableKeyEvents:true
							,listeners:{
								keyup: function(){
									calcStorage();
								}
							}
						}
					]
				}
				,{
					xtype:'label'
					,width:20
					,border:false
					,text:'='
					,style:'margin-top:25px;'
				}
				,{
					xtype:'label'
					,id:'reccomendation'
					,width:190
					,border:false
					,style:'margin-top:25px;'
					,text:'0 MB / month for 0 minutes'
				}
			]
		}
	]
});

calcStorage();

function calcStorage(){
	var duration = Ext.getCmp('episode_length_field').getValue();
	var bitrate = Ext.getCmp('content_type').getValue();
	var frequency = Ext.getCmp('frequency_field').getValue();
	var usage =  Math.round(((duration*60) * (bitrate * 1024 / 8) * frequency/1024/1024)*100)/100;
	//debugger;
	Ext.getCmp('reccomendation').setText(usage + ' MB / month for '+ (duration*frequency) +' minutes');

}