var starDemo = function(){
	var cx;  // Context variable to be used when creating new star objects
	var canvas = new Ext.BoxComponent({autoEl:'canvas',style: 'position; relative'});
	var newstar = function(radius,halo){
		Ext.getCmp('animatebutton').toggle(false);
		Ext.getCmp('fullrendertime').setValue('Rendering....');
		Ext.getCmp('arraytime').setValue('Calculating....');
		canvas.star = new Star({radius:radius,halo:halo,context:cx,debug:false});
		Ext.getCmp('arraytime').setValue(canvas.star.arraytime+' ms');
		Ext.getCmp('fullrendertime').setValue(canvas.star.fill()+' ms');
	}
	canvas.on('render', function(comp){
		canvas.el.dom.height=300;
		canvas.el.dom.width=300;
		// Workaround for IE
		if (Ext.isIE){
//			G_vmlCanvasManager.initElement(canvas.el.dom);  // Oops excanvas doesn't support pixel-level manipulation
			// Disable all controls
			Ext.fly('stardemo').mask('Sorry IE users, canvas is not implemented on your browser');
			return;
		}
		try {
			cx=canvas.el.dom.getContext("2d");
		} catch(err) {
			Ext.fly('stardemo').mask('Sorry, error found when rendering the canvas element: <br>'+err.description);
			return;
		}

		newstar(50,10);
	});
	var updateframerate = {
	    run: function(){
	    	var fps = Math.floor(100*1000/(canvas.star.frametime+20))/100;
	        Ext.getCmp('framerendertime').setValue(fps);
	    },
	    interval: 500
	};

	var options = new Ext.FormPanel({
	        labelWidth: 75, // label settings here cascade unless overridden
	        url:'save-form.php',
	        frame:false,
	        bodyStyle:'padding:5px 5px 0',
	        width: 270,
	        height:300,
	        border:false,
	        items: [{
	            xtype:'fieldset',
	            title: 'Star properties',
	            collapsible: false,
	            autoHeight:true,
	            defaultType: 'slider',
	            items :[{
	                    fieldLabel: 'Radius',
	                    value: 50,
	                    maxValue: 100,
	                    minValue:20,
	                    id: 'radslide',
	                    plugins : new Ext.slider.Tip()
	                },{
	                    fieldLabel: 'Halo Size',
	                    value: 10,
	                    maxValue: 50,
	                    minValue:0,
	                    id: 'haloslide',
	                    plugins : new Ext.slider.Tip()
	                },{
	                    fieldLabel: 'Pixel skip',
	                    value: 8,
	                    maxValue: 32,
	                    minValue:1,
	                    id: 'askip',
	                    plugins : new Ext.slider.Tip()
	                }]
	        },{
   	            xtype:'fieldset',
   	            title: 'Render data',
   	            collapsible: false,
   	            autoHeight:true,
   	            //defaults: {width: 210},
   	            defaultType: 'displayfield',
   	            items :[{
   	                    fieldLabel: 'Array calc',
   	                    value: 'test ms',
   	                    id: 'arraytime'
   	                },{
   	                    fieldLabel: 'Full render',
   	                    value: 'test ms',
   	                    id: 'fullrendertime'
   	                },{
   	                    fieldLabel: 'FPS',
   	                    value: 'Not Animating',
   	                    id: 'framerendertime'
   	                }]	          
	        }],
	        style: 'background-color:white;',
	        buttonAlign: 'center',
	        buttons: [{
	            text: 'Start Animation',
		        enableToggle: true,
		        id: 'animatebutton',
		        toggleHandler: function(button,state){
					if (state) {
						canvas.star.animating=true;
						canvas.star.animate();
						button.setText('Stop Animation');
						// Rendering data check loop here
						Ext.TaskMgr.start(updateframerate);
						
					} else {
						canvas.star.animating=false;
						button.setText('Start Animation');
						// Stop rendering data check
						Ext.TaskMgr.stop(updateframerate);
				        Ext.getCmp('framerendertime').setValue('Not running');
					}
	        	}
	        }]
	    });	
		    
    new Ext.Panel({
        title:'Animated Canvas Star Texture Demonstration',
        width:584, height: 331,
        layout: 'hbox',
        renderTo: 'stardemo',
        frame: true,
        shadow: true,
        items: [
			options,canvas
		]
    }).show();

    var radslide = Ext.getCmp('radslide');
	radslide.on('changecomplete', function(slider,newValue,thumb){
		newstar(newValue,Ext.getCmp('haloslide').getValue());
	});
	var haloslide = Ext.getCmp('haloslide');
	haloslide.on('changecomplete', function(slider,newValue,thumb){
		newstar(Ext.getCmp('radslide').getValue(),newValue);
	});
	
	var askip = Ext.getCmp('askip');
	askip.on('changecomplete', function(slider,newValue,thumb){
		canvas.star.skip=newValue;
	});
	
};