ControlPanel = function(){
	
	//config params
	var SHOW_ONLY_TAG_TESTS = true;	
	

	var KEY_ENGINE = "engine";
	var KEY_SITE = "site";
	var KEY_KEYWORD = "keyword";
	var KEY_RESULTS = "results"; 
	var KEY_POSITION = "position";
	var KEY_CHECKED = "checked";
	var KEY_TAG_NAME = "tagName";
	
	var DIALOG_MAX_WIDTH = document.body.clientWidth - 100;	
	var DIALOG_MAX_HEIGHT = 500;
	var DIALOG_NORMAL_WIDTH = DIALOG_MAX_WIDTH;
	var DIALOG_NORMAL_HEIGHT = 500;
	var MENU_HEIGHT = 80;
	var TAB_HEIGHT = 25;
	var PANEL_ADDITIONAL_WIDTH = 20;
	
	var windowHref = window.location.href;	
	var URLDomain = windowHref.substring(0,windowHref.lastIndexOf("/"));
	if (!URLDomain) {URLDomain = windowHref;}
	var Framework = new Object();
	Framework.serverPath = URLDomain;
	Framework.seoURL = Framework.serverPath + "/seo/";
	var containerId = "controlPanelContainer";
	// server id 54HQ3EF4BG6N63GUGMO2AFB8SK
	// local id 5R266G7ONN0O8434JAPGKG202I
	var serviceUrl = Framework.seoURL + User.userId + "/allTestsResults";
	
	var controlPanelDialog;
	var self = this;
	var lastResponse;
	var lastResponseData;
	var groupedData;
	var engineFilteredArray = new Object();
	var urlFilteredArray = new Object();
	var keywordFilteredArray = new Object();
	var tagFilteredArray = new Object();
	
	var selectedTag;
	
	var tabPanel;
	this.loadData = function(){
		if(!Utils.exist(controlPanelDialog)){
			self.initControlPanel();
			Request.sendGET(serviceUrl, self.parseData);
		}
		controlPanelDialog.show();
	}
	
	this.parseData = function(json){
		lastResponse = eval("("+json.responseText+")");
		lastResponseData = lastResponse.data;
		var tempGroupedData = self.groupDataByEngines(lastResponseData);
		groupedData = self.groupDataByUrl(tempGroupedData);
		self.populateArrays(lastResponseData);
		self.drawMenu();
		self.drawData();
	}
	
	
	this.drawMenu = function(){
		var cpWindowBody = $('cpWindowBody');
		cpWindowBody.innerHTML = "";
		var cpMenuContainer = document.createElement("div");
		cpMenuContainer.id = "cpMenuContainer";
		cpWindowBody.appendChild(cpMenuContainer);
		var cpToolbar = new Ext.Toolbar('cpMenuContainer');
		
		var menuEngine = self.createEngineMenu();
		cpToolbar.add({
				cls: 'x-btn-text-icon bmenu',
				text:'Search Engine',
				menu: menuEngine
		});

		var menuUrl = this.createUrlMenu();
		cpToolbar.add({
				cls: 'x-btn-text-icon bmenu',
				text:'URL',
				menu: menuUrl
		});

		var menuKeywords = this.createKeywordMenu();
		cpToolbar.add({
				cls: 'x-btn-text-icon bmenu',
				text:'Keywords',
				menu: menuKeywords
		});
		
		var menuTags = this.createTagMenu();
		cpToolbar.add({
				cls: 'x-btn-text-icon bmenu',
				text:'Tags',
				menu: menuTags,
				autoHide: false			
		});

	}
	
	this.createEngineMenu = function() {
		var menuEngine = new Ext.menu.Menu({
			id: 'menuEngine'
		});
		var checked;
		for(var engine in engineFilteredArray){
			checked = engineFilteredArray[engine][KEY_CHECKED];
			menuEngine.add(
	            new Ext.menu.CheckItem({
					text: engine,
					checked: checked,
					checkHandler: self.onEngineCheck
				})
			);
		}
		return menuEngine;
	}
	
	this.createUrlMenu = function() {
		var menuUrl = new Ext.menu.Menu({
			id: 'menuUrl'
		});
		var checked;
		for(var urlValue in urlFilteredArray){
			checked = urlFilteredArray[urlValue][KEY_CHECKED];
			menuUrl.add(
				new Ext.menu.CheckItem({
					text: urlValue,
					checked: checked,
					checkHandler: self.onUrlCheck
				})
			);
		}
		return menuUrl;
	}
	
	this.createKeywordMenu = function() {
		var menuKeyword = new Ext.menu.Menu({
			id: 'menuKeyword'
		});
		var checked;
		for(var keywordValue in keywordFilteredArray){
			checked = keywordFilteredArray[keywordValue][KEY_CHECKED];
			menuKeyword.add(
				new Ext.menu.CheckItem({
					text: keywordValue,
					checked: checked,
					checkHandler: self.onKeywordCheck
				})
			);
		}
		return menuKeyword;
	}	
	
	this.createTagMenu = function(){
		var menuTag = new Ext.menu.Menu({
			id: 'menuTag',
			autoHide: false
		});
		var checked;
		for(var tagValue in tagFilteredArray){
			checked = tagFilteredArray[tagValue][KEY_CHECKED];
			menuTag.add(
				new Ext.menu.CheckItem({
					text: tagValue,
					checked: checked,
					group: 'tag',
					checkHandler: self.onTagCheck
				})
			);
		}
		return menuTag;
	}

	this.onTagCheck = function(item, checked){
		if(SHOW_ONLY_TAG_TESTS == true){
			self.filterByTag(item.text);
		} else {
			self.highlightTag(item.text);
		}		
	}
	
	this.filterByTag = function(tag){
		var keywordTr;
		var row;
		var tdId;
		for(var i=0; i<lastResponseData.length; i++){
			row = lastResponseData[i];
			engineFilteredArray[row[KEY_ENGINE]][KEY_CHECKED] = false;
			urlFilteredArray[row[KEY_SITE]][KEY_CHECKED] = false;
			keywordFilteredArray[row[KEY_KEYWORD]][KEY_CHECKED] = false;
		}
		for(var i=0; i<lastResponseData.length; i++){
			row = lastResponseData[i];
			if(row[KEY_TAG_NAME] == tag){
				engineFilteredArray[row[KEY_ENGINE]][KEY_CHECKED] = true;
				urlFilteredArray[row[KEY_SITE]][KEY_CHECKED] = true;
				keywordFilteredArray[row[KEY_KEYWORD]][KEY_CHECKED] = true;
			}
		}
		self.drawMenu();
		self.drawData();
	}
	
	this.highlightTag = function(tag){
		
		tagFilteredArray[tag][KEY_CHECKED] = true;
		var keywordTr;
		var row;
		var tdId;
		for(var i=0; i<lastResponseData.length; i++){
			row = lastResponseData[i];
			if(row[KEY_TAG_NAME] == tag){
				tdId = "r_" + row[KEY_ENGINE] + "_" + row[KEY_KEYWORD] + "_" + row[KEY_SITE];
				keywordTr = $(tdId);				
				if(Utils.exist(keywordTr)){
					keywordTr.style.backgroundColor = "#EEEEEE";
				}
			} else if(row[KEY_TAG_NAME] == selectedTag) {
				tdId = "r_" + row[KEY_ENGINE] + "_" + row[KEY_KEYWORD] + "_" + row[KEY_SITE];
				keywordTr = $(tdId);				
				if(Utils.exist(keywordTr)){
					keywordTr.style.backgroundColor = "#FFFFFF";
				}
			}
			
		}
		selectedTag = tag;
		//this.drawMenu();
		//this.drawData();
	}	
	
	this.onKeywordCheck = function(item, checked){
		if(checked){
			self.addKeyword(item.text);
		} else {
			self.removeKeyword(item.text);
		}
	}
	
	this.addKeyword = function(keyword){
		keywordFilteredArray[keyword][KEY_CHECKED] = true;
		var keywordTr;
		for(var engine in engineFilteredArray){
			keywordTr = $("k_" + engine + "_" + keyword);
			if(Utils.exist(keywordTr)){
				keywordTr.style.display = "";
			}
		}
		//this.drawMenu();
		//this.drawData();
	}
	
	this.removeKeyword = function(keyword){
		keywordFilteredArray[keyword][KEY_CHECKED] = false;
		var keywordTr;
		for(var engine in engineFilteredArray){
			keywordTr = $("k_" + engine + "_" + keyword);
			if(Utils.exist(keywordTr)){
				keywordTr.style.display = "none";
			}
		}
		//this.drawMenu();
		//this.drawData();
	}
	
	this.onUrlCheck = function(item, checked){
		if(checked){
			self.addUrl(item.text);
		} else {
			self.removeUrl(item.text);
		}
	}
	
	this.removeUrl = function(url){
		urlFilteredArray[url][KEY_CHECKED] = false;
		var resultTd;
		var urlTd
		for(var engine in engineFilteredArray){
			urlTd = $("u_" + engine + "_" + url);
			if(Utils.exist(urlTd)){
				urlTd.style.display = "none";	
			}
			for(var keyword in keywordFilteredArray){
				resultTd = $("r_" + engine + "_" + keyword + "_" + url);
				if(Utils.exist(resultTd)){
					resultTd.style.display = "none";
				}
			}
		}
		//this.drawMenu();
		//this.drawData();
	}
	
	this.addUrl = function(url){
		urlFilteredArray[url][KEY_CHECKED] = true;
		var urlTd;
		var resultTd;
		for(var engine in engineFilteredArray){
			urlTd = $("u_" + engine + "_" + url);
			if(Utils.exist(urlTd)){
				urlTd.style.display = "";
			}
			for(var keyword in keywordFilteredArray){
				resultTd = $("r_" + engine + "_" + keyword + "_" + url);
				if(Utils.exist(resultTd)){
					resultTd.style.display = "";
				}
			}
		}		
		//this.drawMenu();
		//this.drawData();
	}
	
	this.onEngineCheck = function(item, checked) {
		if(checked){
			self.addEngine(item.text);
		} else {
			self.removeEngine(item.text);
		}
	}
	
	this.removeEngine = function(engineName) {
		engineFilteredArray[engineName][KEY_CHECKED] = false;
		tabPanel.hideTab(engineName);
	}
	
	this.addEngine = function(engineName) {
		engineFilteredArray[engineName][KEY_CHECKED] = true;
		tabPanel.unhideTab(engineName);
	}
		
	this.drawData = function(){		
		var tabs = new Array();
		var container = document.getElementById(containerId);
		
		var keywordArrayLocal;
		var row;
		var cpWindowBody = $('cpWindowBody');
		
		tabPanel = new Ext.TabPanel('cpWindowBody');
		var url;
		var keyword;
		var tab;
		var tabContent;
		for(var engine in engineFilteredArray){
			if(engineFilteredArray[engine][KEY_CHECKED]){
				tab = tabPanel.addTab(engine, engine);			
				tabContent = "";
				var shatAnkapDiv = document.createElement("div");
				var ankapDiv = document.createElement("div");
				var contentTable = document.createElement("table");			
				contentTable.width = "100%";
				contentTable.height = "100%";
				contentTable.className = "bordered-table";			
				var contentTbody = document.createElement("tbody");
				var contentTr = document.createElement("tr");
				var contentTd = document.createElement("td");
				var urlLink = document.createElement("a");
				contentTable.appendChild(contentTbody);
				contentTbody.appendChild(contentTr);
				contentTr.appendChild(contentTd);			
				for(var url in urlFilteredArray){
					if(urlFilteredArray[url][KEY_CHECKED]){
						contentTd = document.createElement("td");
						contentTd.id = "u_" + engine + "_" + url; 
						contentTd.align = "center";
						contentTr.appendChild(contentTd);
						urlLink = document.createElement("a");
						urlLink.innerHTML = url;
						urlLink.href = "http://" + url;
						urlLink.target = "_blank";
						contentTd.appendChild(urlLink);
					}
				}
				for(var keyword in keywordFilteredArray){
					if(keywordFilteredArray[keyword][KEY_CHECKED]){
						contentTr = document.createElement("tr");
						contentTr.id = "k_" + engine + "_" + keyword;
						contentTd = document.createElement("td");
						contentTd.innerHTML = keyword;
						contentTr.appendChild(contentTd);
						for(var url in urlFilteredArray){
							if(urlFilteredArray[url][KEY_CHECKED]){
								contentTd = document.createElement("td");
								contentTd.align = "center";
								contentTr.appendChild(contentTd);
								contentTd.id = "r_" + engine + "_" + keyword + "_" + url;
								if(Utils.exist(groupedData[engine]) && 
									Utils.exist(groupedData[engine][url]) &&
									Utils.exist(groupedData[engine][url][keyword])) {
									contentTd.innerHTML = groupedData[engine][url][keyword];
								} else {
									contentTd.innerHTML = "<a href='javascript:Controller.showDialogPanel(this, \"SEO\", null, 315, 440, {url:\""+url+"\",keyword:\""+keyword+"\",engine:\""+engine+"\"})'>add</a>";
								}
							}
						}
						contentTbody.appendChild(contentTr);
					}
				}
				ankapDiv.appendChild(contentTable);
	
				shatAnkapDiv.appendChild(ankapDiv)
				var x = DIALOG_NORMAL_WIDTH - PANEL_ADDITIONAL_WIDTH;
				var y = DIALOG_NORMAL_HEIGHT - MENU_HEIGHT - TAB_HEIGHT;
				if(x > DIALOG_MAX_WIDTH){
					x = DIALOG_MAX_WIDTH;
				}
				if(y > DIALOG_MAX_HEIGHT){
					y = DIALOG_MAX_HEIGHT - 63;
				}	 
				
				ankapDiv.style.height = y + "px";
				ankapDiv.style.width = x + "px";
				ankapDiv.style.overflow = "auto";
				tab.setContent(shatAnkapDiv.innerHTML);
				tabs.push(tab);
			}
		}
		if(Utils.exist(tabs[0])){
			tabs[0].activate();
		}
	}
		
	this.populateArrays = function(_responseData){
		responseData = _responseData;
		var row;
		var engine;
		var url;
		var keyword;
		var tagName;
		for(var i=0; i<responseData.length; i++){
			row = responseData[i];
			engine = row[KEY_ENGINE];
			url = row[KEY_SITE];
			keyword = row[KEY_KEYWORD];
			tagName = row[KEY_TAG_NAME];
			if(engineFilteredArray[engine] == null){
				engineFilteredArray[engine] = {"checked": true};
			}
			if(urlFilteredArray[url] == null){
				urlFilteredArray[url]= {"checked":true};
			}
			if(keywordFilteredArray[keyword] == null){
				keywordFilteredArray[keyword] = {"checked": true};
			}
			if(tagFilteredArray[tagName] == null){
				tagFilteredArray[tagName] = {"checked": false};
			}
		}
	}
	
	this.groupDataByEngines = function(_responseData){
		var responseData = _responseData;
		var groupedData = new Object();

		var engineObject;
		
		var engine;
		var url;
		var keyword;
		var result;
		
		var urlKeywordArray;
		var keywordArray;
		var row;
		for(var i=0; i<responseData.length; i++){
			row = responseData[i];
			engine = row[KEY_ENGINE];
			url = row[KEY_SITE];
			keyword = row[KEY_KEYWORD];
			result = row[KEY_RESULTS];
			
			if(!Utils.exist(groupedData[engine])){
				groupedData[engine] = new Object();	
			}
			engineObject = groupedData[engine];
			if(Utils.exist(engineObject.urlKeywordArray)){
				urlKeywordArray = engineObject.urlKeywordArray;
			} else {
				urlKeywordArray = new Array();
			}
			engineObject.urlKeywordArray = urlKeywordArray;

			urlKeywordArray.push({keyword:keyword, site:url, results:result});
		}
		return groupedData;
	}
	
	this.groupDataByUrl = function(_engineGroupedData){
		var urlGroupedData = new Array();
		var engineGroupedData = _engineGroupedData;
		var oneEngineData;
		var url;
		var urlObject;
		var keywordArray;
		var keyword;
		var result;
		var urlKeywordArray;
		var row;
		for(var engine in engineGroupedData){
			urlGroupedData = new Object();
			oneEngineData = engineGroupedData[engine];
			urlKeywordArray = oneEngineData.urlKeywordArray;
			for(var i=0; i<urlKeywordArray.length; i++){
				row = urlKeywordArray[i];
				url = row[KEY_SITE];
				keyword = row[KEY_KEYWORD];
				result = row[KEY_RESULTS];
				if(!Utils.exist(urlGroupedData[url])){
					urlGroupedData[url] = new Object();	
				}
				urlObject = urlGroupedData[url];
				urlObject[keyword] = result;
				//urlObject[keyword][KEY_RESULTS] = result;
			}
			engineGroupedData[engine] = urlGroupedData;
		}
		return engineGroupedData;
	}
	
	
	// not for case when user adds totally new search engine, keyword, url
	this.updateControlPanel = function(positionDataJson){
		if(Utils.exist(groupedData)){
			var engineArray = positionDataJson[KEY_ENGINE];
			var keywordArray = positionDataJson[KEY_KEYWORD];
			var urlArray = positionDataJson[KEY_SITE];
			var engine;
			var keyword;
			var url;
			for(var i=0; i<engineArray.length; i++){
				engine = engineArray[i];
				for(var j=0; j<urlArray.length; j++){
					url = urlArray[j];					
					for(var k=0; k<keywordArray.length; k++){
						keyword = keywordArray[k];
						if(!Utils.exist(groupedData[engine]) || !Utils.exist(groupedData[engine][url]) || !Utils.exist(groupedData[engine][url][keyword])){
							Utils.createPackage(groupedData, engine);
							Utils.createPackage(groupedData[engine], url);
							groupedData[engine][url][keyword] = "<span style='color: red'>N/A</span>";//"<a href='javascript:Controller.showDialogPanel(this, \"SEO\", null, 315, 440, {url:\""+urlArray[j]+"\",keyword:\""+keywordArray[k]+"\",engine:\""+engineArray[i]+"\"})'>add</a>";
							engineFilteredArray[engine] = {"checked": true};
							urlFilteredArray[url] = {"checked": true};
							keywordFilteredArray[keyword] = {"checked": true};
						}
					}
				}
			}	
			self.drawMenu();
			self.drawData();
		}
	}
	
	this.updateResults = function(resultsJson){
		
	}
		
	this.initControlPanel = function(){
		var inner = "";
		inner += "<div id='controlPanel-dlg' >";
		inner += "	<div class='x-dlg-hd' id='cpInfoTitle'>Keywords</div>";
		inner += "	<div class='x-dlg-bd' id='cpWindowBody'><img src='images/loader.gif'/></div>";
		inner += "	<div class='x-dlg-ft'> </div>";
		inner += "</div>";
		var div = document.createElement( "DIV");
		div.innerHTML = inner;
		document.body.appendChild( div );
		controlPanelDialog = new Ext.BasicDialog("controlPanel-dlg", {
			modal: false,
			width: DIALOG_NORMAL_WIDTH,
			height: DIALOG_NORMAL_HEIGHT,
			shadow: true,
			fixedcenter: true,
			proxyDrag: true,
			resizable: false,
			autoScroll: true
		});
		var move = function(dialog, x, y){
			dialog.show();
		}
		controlPanelDialog.addListener("move", move);
		
	}
}