    var wsUri = "ws://"+ location.host;
    var socket;  
	var imageWidth = 200;
	var SSVs;
	var Banners;
	var localApps;
	var settingsLoaded = false;
	var noSSV = false;
	var noBanners = [false];

    window.addEventListener("load", init, false);
	
	$( document ).ready(function() {
		InitAllSettings();
	});
	

    function init() {
		debugger;
      // Init Container
      socket = new WebSocket(wsUri);
      //socket.onopen = function (evt) { onOpen(evt) };
      //socket.onclose = function (evt) { onClose(evt) };
      socket.onmessage = function (evt) { onMessage(evt) };
      //socket.onerror = function (evt) { onError(evt) };
      //socket.close();
    };

    function onMessage(evt) {
      var ldata = JSON.parse(evt.data);
	  if ( ! settingsLoaded ) {
	    InitAllSettings();
	  }
    };
    

	function InitAllSettings(){
      $.ajax({
        type: "GET",
        url: '/getAllSettings',
        async: true,
        crossDomain: true,
        success: function(data) {
          LoadSettings(data)
        },
        error : function() {
		  settingsLoaded = false;
        }
      });
	};
	
	function ApplyChanges(){
		$.ajax({
			type: "GET",
			url: '/setBannersActive',
			data: {ssv: JSON.stringify(SSVs), banners: JSON.stringify(Banners)},
			async: true,
			crossDomain: true,
			success: function(data) {
			  InitAllSettings()
			},
			error : function() {
			  settingsLoaded = false;
			}
		});
		for(aId in localApps){
			$.ajax({
				type: "GET",
				url: 'http://'+ localApps[aId].ip +':8081/setBannersActive',
				data: {ssv: JSON.stringify(SSVs), banners: JSON.stringify(Banners)},
				async: true,
				crossDomain: true
			});
		}   
    }
	
	function isElementHidden (element) {
		return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
	}
	
	function RepaintSsvs(){
	   var aWidthActive = 0;
	   var aWidthInactive = 0;
  	   var lStrActive = "";
  	   var lStrInactive = "";
	   var i;
	   for(sb in SSVs.images){
	     if(SSVs.images[sb].SSVActive){
		   lStrActive += "<img style='width:"+imageWidth+"px; padding:5px; display: inline' onclick=SetSSVActive("+sb+",false) src='../graphics/banners/"+SSVs.images[sb].SSVName + "' />"; 
		   aWidthActive += imageWidth;
		 } else {
		   lStrInactive += "<img style='width:"+imageWidth+"px; padding:5px; display: inline; opacity:0.5;' onclick=SetSSVActive("+sb+",true) src='../graphics/banners/"+SSVs.images[sb].SSVName + "' />"; 
		   aWidthInactive += imageWidth;
		 }
	   }
	   noSSV = (lStrActive=="");
	   var elList = document.getElementsByName("SSVLibraryActive");
	   for(i = 0; i < elList.length; i++){
		 elList[i].innerHTML=lStrActive;
		 elList[i].style.width = aWidthActive +'px';
	   }
	   elList = document.getElementsByName("SSVLibraryInactive");
	   for(i = 0; i < elList.length; i++){
		 elList[i].innerHTML=lStrInactive;
		 elList[i].style.width = aWidthInactive +'px';
	   }
	}
	
	function RepaintSidebars(){
	   for(sb in Banners){
		 RepaintSidebar(Banners[sb],sb);
		}
	}
	
	function RepaintSidebar(data,id){
		var aWidthActive = 0;
		var aWidthInactive = 0;
		var lStrActive = "";
		var lStrInactive = "";
		var i;
		 $("#"+data.id).show();
		 for(im in data.library){ 
		   if(data.library[im].Active){
			 lStrActive += "<img style='width:"+imageWidth+"px; padding:5px;' onclick=SetSidebarActive("+id+","+im+",false) src='../graphics/banners/"+data.library[im].SIDEBARName + "' />"; 
			 aWidthActive += imageWidth;
		   } else {
			 lStrInactive += "<img style='width:"+imageWidth+"px; padding:5px; opacity:0.5;' onclick=SetSidebarActive("+id+","+im+",true) src='../graphics/banners/"+data.library[im].SIDEBARName + "' />"; 
			 aWidthInactive += imageWidth;
		   }
		  }
		  noBanners[id] = (lStrActive=="");
		  var elList = document.getElementsByName(data.id+"Active");
		  for(i = 0; i < elList.length; i++){
			elList[i].innerHTML=lStrActive;
			elList[i].style.width = aWidthActive +'px';
		  }
		  elList = document.getElementsByName(data.id+"Inactive");
		  for(i = 0; i < elList.length; i++){
			elList[i].innerHTML=lStrInactive;
			elList[i].style.width = aWidthInactive +'px';
		  }
	}
	
	function SetSidebarActive(BannerId,ImageId,Active){
		Banners[BannerId].library[ImageId].Active = Active;
		RepaintSidebar(Banners[BannerId],BannerId);
		SetSaveButton();
	}
	
	function SetSSVActive(ImageId,Active){
		SSVs.images[ImageId].SSVActive = Active;
		RepaintSsvs();
		SetSaveButton();
	}
	
	function LoadSettings(data){
		debugger;
		var aJson=JSON.parse(data);
		SSVs = aJson.ssv;
		Banners = aJson.sidebars;
		localApps = aJson.localCODInstances;
		RepaintSidebars();
		RepaintSsvs();
		$("#InfoText").text(aJson.InfoText);
		settingsLoaded = true;
	};

	function SetPageActive(el){
		if(el.classList){
			$("li").removeClass("active");
			el.classList.add("active");
		}
	}
	
	function SetSaveButton(){
		$("#save_changes").removeClass("disabled");
		if(noSSV){ 
			$("#save_changes").addClass("disabled");
		}
		else {
			for(sb in Banners){
				if(noBanners[sb]){ 
					$("#save_changes").addClass("disabled");
				};
			}
		}
	}

