var p;
var isPanelCollpased=true;
Ext.onReady(function(){


	var title = new Array();
	title[0] = "Top Stories";
	title[1] = "Advice Columns";
	title[2] = "Actors' Yellow Pages";
	title[3] = "Blogs";
	title[4] = "Spotlights";
	title[5] = "Message Boards";

	title[6] = "Casting";
	title[7] = "LA Actor/NY Actor";
	title[8] = "News & Features";
	title[9] = "Reviews";
	title[10] = "Back Stage Bulletins";
	title[11] = "Production Listings";


	var checkedValues = new Array();
	checkedValues[0] = false;
	checkedValues[1] = false;
	checkedValues[2] = false;
	checkedValues[3] = false;
	checkedValues[4] = false;

	//variables declared to change the ttile and content color with user selected color
	var panelTitleColor = "";
	var panelContentColor = "";
	
	//variable decalred to contain the default css if user has not preferred color for title bar
	var panelCss='';
	

	var cookieProvider = new Ext.state.CookieProvider({});
	Ext.state.Manager.setProvider(cookieProvider);

	var manager = Ext.state.Manager.getProvider();

	
	//Retrieving the user preferred color from the cookie
	var pageColorCookie = cookieProvider.get('PageColor');
	var selectedColor = cookieProvider.decodeValue(pageColorCookie);

	//Retrieving the user preferred portlets from the cookie
	var cookieValue = cookieProvider.get('formState');
	var state = cookieProvider.decodeValue(cookieValue);

	//Retrieving the user preferred color for tilte bar from the cookie
	var cssEncodedCookie =cookieProvider.get('panelCss');
	var selectedCss = cookieProvider.decodeValue(cssEncodedCookie);	

	/** Following commented code sets the title text and content color with user selected color
	If user havent chosen any color it picks up default color
	*/
	
	if(selectedColor==null)
		selectedColor = "353535"; // Default color of the color palette 




	 // create some portlet tools using built in Ext tool ids
    var tools = [{

		id:'close',
        handler: function(e, target, panel){
		var panelId = panel.id;
		var checkBox = 'check' + panelId.substring(panelId.length-1,panelId.length);
		Ext.getCmp(checkBox).setValue(false);
		
		if(panel.ownerCt!=null){
        panel.ownerCt.remove(panel, true);
		}
		Ext.ux.Portal.StateSave();
        }

    }];



	var  form = new Ext.FormPanel({
	   id: 'form1',
	   cls : 'x-drag-Form',
	   width:'636px',
       items:[{
            xtype:'portal',
            items:[{
				id : 'col1',
                columnWidth:.49,
                style:'padding-right: 6px;'
            },{
				id: 'col2',
                columnWidth:.51,
                style:'padding-left: 12px;padding-right: 7px;'      
            }]
        }]
    });


	
	var porlet1 = new Ext.ux.Portlet({
					id :'Panel1' ,
					title: "<font color='" + panelTitleColor + "'>" + title[0] + "</font>" , 
					html: Ext.getDom('topstory').innerHTML
				});

	var porlet2 = new Ext.ux.Portlet({
					id :'Panel2' , 
					title: "<font color='" + panelTitleColor + "'>" + title[1] + "</font>" , 
					html: Ext.getDom('advice').innerHTML
				});

	var porlet3 = new Ext.ux.Portlet({
					id :'Panel3' ,
					title: "<font color='" + panelTitleColor + "'>" + title[2] + "</font>" , 
					html: Ext.getDom('yellowPages').innerHTML
				});

	var porlet4 = new Ext.ux.Portlet({
					id :'Panel4' , 
					title: "<font color='" + panelTitleColor + "'>" + title[3] + "</font>" , 
					html: Ext.getDom('blog').innerHTML 
				});

	var porlet5 = new Ext.ux.Portlet({
					id :'Panel5' , 
					title: "<font color='" + panelTitleColor + "'>" + title[4] + "</font>" , 
					html: Ext.getDom('spotlight').innerHTML
				});

	var porlet6 = new Ext.ux.Portlet({
					id :'Panel6' , 
					title: "<font color='" + panelTitleColor + "'>" + title[5] + "</font>" , 
					html: Ext.getDom('msgboard').innerHTML
				});



	var porlet7 = new Ext.ux.Portlet({
					id :'Panel7' ,
					title: "<font color='" + panelTitleColor + "'>" + title[6] + "</font>" , 
					html: Ext.getDom('casting').innerHTML
				});

	var porlet8 = new Ext.ux.Portlet({
					id :'Panel8' , 
					title: "<font color='" + panelTitleColor + "'>" + title[7] + "</font>" , 
					html: Ext.getDom('lyActor').innerHTML
				});

	var porlet9 = new Ext.ux.Portlet({
					id :'Panel9' ,
					title: "<font color='" + panelTitleColor + "'>" + title[8] + "</font>" , 
					html: Ext.getDom('news').innerHTML 
				});

	var porlet10 = new Ext.ux.Portlet({
					id :'Panel10' , 
					title: "<font color='" + panelTitleColor + "'>" + title[9] + "</font>" , 
					html: Ext.getDom('reviews').innerHTML 
				});

	var porlet11 = new Ext.ux.Portlet({
					id :'Panel11' , 
					title: "<font color='" + panelTitleColor + "'>" + title[10] + "</font>" , 
					html: Ext.getDom('bulletins').innerHTML
				});

	var porlet12 = new Ext.ux.Portlet({
					id :'Panel12' , 
					title: "<font color='" + panelTitleColor + "'>" + title[11] + "</font>" , 
					html: Ext.getDom('listings').innerHTML
				});
	
	

		
	if(selectedCss!=null){
		var cmp = Ext.getCmp('Panel1');
		if(cmp!=null){cmp.addClass(selectedCss);}

		cmp = Ext.getCmp('Panel2');
		if(cmp!=null){cmp.addClass(selectedCss);}

		cmp = Ext.getCmp('Panel3');
		if(cmp!=null){cmp.addClass(selectedCss);}

		cmp = Ext.getCmp('Panel4');
		if(cmp!=null){cmp.addClass(selectedCss);}

		cmp = Ext.getCmp('Panel5');
		if(cmp!=null){cmp.addClass(selectedCss);}

		cmp = Ext.getCmp('Panel6');
		if(cmp!=null){cmp.addClass(selectedCss);}

		cmp = Ext.getCmp('Panel7');
		if(cmp!=null){cmp.addClass(selectedCss);}

		cmp = Ext.getCmp('Panel8');
		if(cmp!=null){cmp.addClass(selectedCss);}

		cmp = Ext.getCmp('Panel9');
		if(cmp!=null){cmp.addClass(selectedCss);}

		cmp = Ext.getCmp('Panel10');
		if(cmp!=null){cmp.addClass(selectedCss);}

		cmp = Ext.getCmp('Panel11');
		if(cmp!=null){cmp.addClass(selectedCss);}

		cmp = Ext.getCmp('Panel12');
		if(cmp!=null){cmp.addClass(selectedCss);}

		// Setting user preferred color for Portlet's title bar
		panelCss = selectedCss; 
	}



	if(state != null){
		var colState = state.split(':');
		var cpArray;
		var column;
		var panelArray;
		var pan;
		var panelIndex ;
		for(i=0;i<colState.length-1;i++){
			cpArray = colState[i].split('-');
			
			column = Ext.getCmp(cpArray[0]);
			if(cpArray.length>1){
				panelArray = cpArray[1].split(';');
				for(j=0;j<panelArray.length;j++){
					if(panelArray[j]!=''){
						column.add(Ext.getCmp(panelArray[j]));
						panelIndex = panelArray[j].substring(panelArray[j].length-1,panelArray[j].length);
						checkedValues[panelIndex-1] = true;
					}
				}
			}
		}
	}
	else
	{
		var col;
		col = Ext.getCmp('col1');
		col.add(porlet1);
		col.add(porlet2);
		col.add(porlet3);
		col.add(porlet4);
		col.add(porlet5);
		col.add(porlet6);
	
		col = Ext.getCmp('col2');
		col.add(porlet7);
		col.add(porlet8);
		col.add(porlet9);
		col.add(porlet10);
		col.add(porlet11);
		col.add(porlet12);

		checkedValues[0] = true;
		checkedValues[1] = true;
		checkedValues[2] = true;
		checkedValues[3] = true;
		checkedValues[4] = true;
	}

	form.render('portalview');



	// Creating the panel holding the color palette
	 p = new Ext.Panel({
        collapsible:true,
		renderTo: 'cont',
		cls : 'x-drag-Form',
		height:77,
		collapsed : true,
		layout:'table',
        layoutConfig: {columns:3},
		expandDefaults:{duration:0.98},
		collapseDefaults:{duration:0.98},
		items: [

		 {	html: "<font size='2'>Choose a page color</font>",colspan:3,width:900,height:20,border : false},
		 {	colspan:1,width:60,height:35,border : false,
			items: [{
				xtype:'ColorShower',
				id: 'ColorShowerId',
				autoShow:true,
				colors: [selectedColor] 				
			}]
		 },
		 {	html: "<font size='2'><center>Pick Color</center></font>",colspan:1,width:90,height:35,border : false},
		 {
			colspan:1,width:750,height:35,border : false,
			items: [{
				xtype:'colorPicker',
				id: 'ColorPickerId',
				autoShow:true,
				colors:["C30F38","2571AD","25AD42"]//,"691E79","005785","027061","353535","504638","840259","851607"]//,"BA500C"]
			}]
		 },
		 {	colspan:3,width:1010,height:22,border : false,
			items: [{
				xtype:'button',
				id: 'closeButtonColorPallete',
				autoShow:true,
				text : 'Close',
				style:'margin-left:450px'
			}]
		 }]
		
    });


	
	// To display or remove preferred content portlet

	function doCheck(){
		var f = Ext.getCmp('form1');
		var c = Ext.getCmp('col1');
		var por = Ext.getCmp(this.name);
		if(por== null)
		por= getPorletObject(por,this.name);

		if(this.checked==true){
			if(state != null){
				if(state.indexOf(this.name)==-1){
					c.add(por);
					f.render('portalview');
				}else{
					c.add(por);
					f.render('portalview');
				}
				state = null;
			}else{
				c.add(por);
				f.render('portalview');
			}
		}else{
			// panel.ownerCt.remove(panel, true);
			var selectedPanel = Ext.getCmp(this.name);
			if(selectedPanel.ownerCt!=null)
			selectedPanel.ownerCt.remove(selectedPanel, true);
		}

		Ext.ux.Portal.StateSave();
	}



	// To create new  portlet object if portlet is already destroyed
	function getPorletObject(por , id){
		var index = id.substring(id.length-1,id.length);
		por = new Ext.ux.Portlet({
					id : id , 
					title: "<font color='" + panelTitleColor + "'>" + title[index-1] + "</font>" , 
					tools: tools,
					html: "<div id='contenId"+index+"'><font color='" + panelContentColor + "'>" + Ext.example.shortBogusMarkup + "</font></div>"
				});

		return por;

	}


 
	//Retrieving ColorPicker' Id and setting event on that
	var cp = Ext.getCmp('ColorPickerId');
	cp.on('select', function(palette,selColor){ 
		
		var colorSelected = Ext.getCmp('ColorShowerId');
		colorSelected.rendered = false;
		colorSelected.colors = [selColor];
		colorSelected.render();
        p.render();
		colorSelected.rendered = false;
		//colorSelected.render();
		p.render();

		//Changing the portlet title bar color with the color selected by user
		var cmp = Ext.getCmp('Panel1');
		if(cmp!=null){
		cmp.removeClass(panelCss);
		cmp.addClass( 'x-portlet'+selColor);
		}

		cmp = Ext.getCmp('Panel2');
		if(cmp!=null){
		cmp.removeClass(panelCss);
		cmp.addClass('x-portlet'+selColor);
		}

		cmp = Ext.getCmp('Panel3');
		if(cmp!=null){
		cmp.removeClass(panelCss);
		cmp.addClass('x-portlet'+selColor);
		}

		cmp = Ext.getCmp('Panel4');
		if(cmp!=null){
		cmp.removeClass(panelCss);
		cmp.addClass('x-portlet'+selColor);
		}

		cmp = Ext.getCmp('Panel5');
		if(cmp!=null){
		cmp.removeClass(panelCss);
		cmp.addClass('x-portlet'+selColor);
		}

		cmp = Ext.getCmp('Panel6');
		if(cmp!=null){
		cmp.removeClass(panelCss);
		cmp.addClass('x-portlet'+selColor);
		}


		cmp = Ext.getCmp('Panel7');
		if(cmp!=null){
		cmp.removeClass(panelCss);
		cmp.addClass('x-portlet'+selColor);
		}

		cmp = Ext.getCmp('Panel8');
		if(cmp!=null){
		cmp.removeClass(panelCss);
		cmp.addClass('x-portlet'+selColor);
		}

		cmp = Ext.getCmp('Panel9');
		if(cmp!=null){
		cmp.removeClass(panelCss);
		cmp.addClass('x-portlet'+selColor);
		}

		cmp = Ext.getCmp('Panel10');
		if(cmp!=null){
		cmp.removeClass(panelCss);
		cmp.addClass('x-portlet'+selColor);
		}

		cmp = Ext.getCmp('Panel11');
		if(cmp!=null){
		cmp.removeClass(panelCss);
		cmp.addClass('x-portlet'+selColor);
		}

		cmp = Ext.getCmp('Panel12');
		if(cmp!=null){
		cmp.removeClass(panelCss);
		cmp.addClass('x-portlet'+selColor);
		}

	

		panelCss = 'x-portlet'+selColor;
		var panelCssAppended = 'x-portlet'+selColor;
		
		//Setting the selected color in cookie
		var cookieValue = cookieProvider.encodeValue(selColor);
		cookieProvider.set('PageColor',cookieValue);


		var cssEncodedCookie = cookieProvider.encodeValue(panelCssAppended);
		cookieProvider.set('panelCss',cssEncodedCookie);
	 
	});

	var closeBtnObj = Ext.getCmp('closeButtonColorPallete');
	closeBtnObj.on('click', function(){ 
		p.collapse(true);
		isPanelCollpased = true;
	});
 
	
});



function test(){
	if(isPanelCollpased==true){
		p.expand(true);
		isPanelCollpased = false;
	}
}