var ContentAPI = 'https://mef44yx0el.execute-api.us-west-2.amazonaws.com/dev';
var ThemeAPI = 'https://a2jsrd7hp7.execute-api.us-west-2.amazonaws.com/dev'
var SiteName = document.location.href.replace('https://','').replace('http://','').replace('www.','').split('/')[0];
var colorSchemesJSON = '[{"color1" : "grey", "color2" : "white", "color3" : "black"},'+
		'{"color1"  : "red",   "color2"  : "grey",  "color3"  : "black"},'+
		'{"color1"  : "blue",   "color2"  : "lightblue",  "color3"  : "grey"},'+
		'{"color1"  : "brown",   "color2"  : "orange",  "color3"  : "purple"},'+
		'{"color1"  : "purple",   "color2"  : "lime",  "color3"  : "purple"},'+
		'{"color1"  : "purple",   "color2"  : "pink",  "color3"  : "red"},'+
		'{"color1"  : "blue",  "color2"  : "grey", "color3"  : "black"}]';
var colorSchemeOBJ = JSON.parse(colorSchemesJSON);
//AWS.config.loadFromPath('./config.json');		

if (SiteName.match('^file:')){
	var SiteName = 'chrisking206.com';
};

function setStyle(element, property, value){
	if (typeof element.style === 'undefined'){
		// dothing
	}
	else {
		try {
			switch (property){
				case 'color':  
					element.style.color = value;
					break;
				case 'backgroundcolor': 
					element.style.cssText = "background-color:"+ value; 
					break;
				case 'border': 
					element.style.border = value;
					break;
			}
		}
		catch (e){
			console.log(e);
		}				
	}
}
function SetStyleFromButtonValue(Button){
	var firstChild = Button.parentElement.parentElement.firstChild;
	var color1 = firstChild.innerHTML;
	var color2 = firstChild.nextSibling.innerHTML;
	var color3 = firstChild.nextSibling.nextSibling.innerHTML;
	setStyle(document.body,'backgroundcolor',color1);
	$('#displayFrame').css("background-color", color2); 
	$('p' ).css('color', color3);
	$('h1' ).css('color', color3);
	$('#Name' ).css('color', color2);
	$('#topNav' ).css('color', color2);
	$('#topNav' ).css('background-color', color2);
	$('.navButton').css('color', color2);
	$.ajax({
		url: ThemeAPI+'?SiteName='+SiteName+';color1='+color1+';color2='+color2+';color3='+color3,
		type: 'PUT',
		error: function () {
			  alert("error");
		}
	});
};
function setHTMLAtrributes(id,ElementName,ElementValue){
	if (typeof ElementName != 'undefined' && ElementName != null){
		try {
			var SaveButton = document.createElement('input');
			var editConsole = document.createElement('div');
			var editConsoleFrame = document.createElement('div');
			var editConsoleSpan = document.createElement('span');
			
			editConsoleFrame.classList.add('modal');
			editConsoleFrame.id = 'modal'+id;
			editConsoleSpan.classList.add('close');
			editConsoleSpan.innerHTML = "×";
			editConsoleSpan.onclick = function() {document.getElementById('modal'+id).style.display = "none";}
			SaveButton.type = 'submit';
			SaveButton.value = 'Save';
			SaveButton.onclick= function() {
				saveRow(id);
				document.getElementById('modal'+id).style.display = 'none';
				var newText = document.getElementById('text' + id).value;
				$("#"+ElementName).contents().filter(function(){ return this.nodeType == 3; }).first().replaceWith(newText);
			};	
			editConsole.appendChild(SaveButton);
			
			var textarea = document.createElement('textarea');
			var nameinput = document.createElement('input');
			var changeInputTypeSelector = document.createElement('a');
			changeInputTypeSelector.onclick = function(){
				changeFormInputType(id);
			};
			changeInputTypeSelector.innerHTML = "Click here to upload an image instead";
			changeInputTypeSelector.style.color = 'black';
				
			nameinput.type = 'hidden';
			nameinput.value = ElementName;
			nameinput.id = 'name'+id;
			textarea.id = 'text' + id;
			textarea.value = ElementValue;
			textarea.style.width = '100%';
			
			editConsole.classList.add('modal-content');
			editConsole.style.display = 'block';
			editConsole.appendChild(textarea);
			editConsole.appendChild(editConsoleSpan);
			editConsole.appendChild(nameinput);
			editConsole.appendChild(changeInputTypeSelector);
			
			editConsole.id = 'editConsole'+id;
			editConsole.style.display = 'none';
			
			document.getElementById(ElementName).innerHTML = ElementValue;
			document.getElementById(ElementName).appendChild(editConsoleFrame);
			document.getElementById('modal'+id).appendChild(editConsole);
			var newDivElement = document.createElement('div');
			newDivElement.id = 'editFrame'+id;
			newDivElement.classList.add('editFrame');
			var newImgElement = document.createElement('img');
			newImgElement.id = 'editImg'+id;
			newImgElement.classList.add('editImg');
			newImgElement.src = 'https://image.flaticon.com/icons/png/128/61/61456.png';
			document.getElementById(ElementName).appendChild(newDivElement);	
			document.getElementById('editFrame'+id).appendChild(newImgElement);	
			$(document).ready(function() {
				document.getElementById('editImg'+id).onclick = function clickfunction(){
					document.getElementById('modal'+id).style.display='block';
					document.getElementById('editConsole'+id).style.display = 'block';
				};
				$('#'+ElementName).parent().hover(
					function() {
						document.getElementById('editFrame'+id).style.display='block';
					}
					,function() {document.getElementById('editFrame'+id).style.display='none';}
				);
				$('#editConsole'+id).hover(
					function() {
						document.getElementById('editConsole'+id).style.display='block';
					}
					,function() {document.getElementById('editConsole'+id).style.display='none';}
				);
			});
		}
		catch (e) {
			console.log(e);
		}
	}
	else {
		console.log("ElementName is undefined");
	}
};
function LoadContent(SiteName) {
	$.ajax({
		url: ContentAPI + '?SiteName='+SiteName,
		type: 'GET',
		success: function(s){
			$.each(s, function(i, data){
				var id = Math.random();
				var ElementName = data['ElementName']	;
				var ElementValue = data['ElementValue'];
				setHTMLAtrributes(id,ElementName,ElementValue);
			})
		},
		error: function (e) {
			console.log(e);
		}
	});
}
function toggleVisibility (elementID){
	var div = document.getElementById(elementID);
	var parent = div.parentNode;
	var children = parent.children;
	for (i = 0; i < children.length; i++) {
		children[i].style.display =  'none';
	};
	div.style.display =  'block' ;
};
function changeFormInputType(itemId){	
	var old_element = document.getElementById('text'+itemId);
	try {
		if (old_element.nodeName == 'INPUT'){
			var new_element = document.createElement('textarea');
			new_element.setAttribute('id', 'text'+itemId);
			new_element.setAttribute("nodeName", 'TEXTAREA');
		}
		else {
			var new_element = document.createElement('input');
			new_element.setAttribute("type", "file");
			new_element.setAttribute("id", 'text'+itemId);
			new_element.setAttribute("nodeName", 'INPUT');
		};
		old_element.parentNode.replaceChild(new_element, old_element);
	}
	catch (e){
		console.log(e);
	}
};	
function saveImage(id,ElementName){
	let file = document.getElementById('text'+id).files[0];
	var FileName = file.name;
	let fr = new FileReader();
	fr.readAsBinaryString(file);
	fr.onload = function (evt){
		imgDaTA = btoa(evt.target.result);
		requestJSON = JSON.stringify({"FileName": FileName,"Data":imgDaTA});
		$.ajax({
			type: "POST",
			url: ContentAPI + '?SiteName='+SiteName+'&ElementName='+ElementName,
			data: requestJSON, 
			contentType: 'application/json',
			success: function(data){
				let bucket = SiteName;
				let region = 'us-west-2';
				var url = 'https://s3-' + region + '.amazonaws.com/' + bucket + '/img/' + FileName;
				let new_element = document.createElement('img');
				new_element.src = url;
				let old_element = document.getElementById(ElementName);
				new_element.id = ElementName;
				old_element.parentNode.replaceChild(new_element, old_element);
				var new_elementHTML = '<img src=\"'+url+'\">';
				putSiteContent(ElementName,new_elementHTML);
			},
			error: function (e) {
				alert(e);
			}
		});
	}
};
function putSiteContent (ElementName,ElementValue){
	try{
		let requestJSON = JSON.stringify({ElementValue:ElementValue});
		$.ajax({
			url: ContentAPI + '?SiteName='+SiteName+'&ElementName='+ElementName,
			contentType: 'application/json',
			data: requestJSON,
			dataType: 'json',
			type: 'PUT',
			success: function (d,ElementName,ElementValue){
				let id = Math.random();
				setHTMLAtrributes(id,ElementName,ElementValue);
			},
			error: function (e) {
				console.log('putSiteContent ajax error: '+e);
			}
		})	
	}
	catch (e) {
		console.log('putSiteContent error: '+e+'; ElementValue: '+ElementValue);
	}
}
function saveRow(r){
	if (document.getElementById('text'+r).nodeName == 'TD') {
		var ElementName = document.getElementById('text'+r).innerHTML;
		var ElementValue = document.getElementById(r).value;
	}
	else{
		var ElementName = document.getElementById('name'+r).value;
		var ElementValue = document.getElementById('text'+r).value;
	};
	
	if (ElementValue.match(/^\w\:\\(\w|\\|\.)*/)){ 
		saveImage(r,ElementName);
		var src = document.getElementById(ElementName).src
		var ElementValue = '<img src="'+src+'">';
	}
	else{
		putSiteContent(ElementName,ElementValue);
	};
};
function setPageStyle(SiteName) {
	$.ajax({
		url: ThemeAPI+'?SiteName='+SiteName,
		type: 'GET',
		success: function (response) {
			jQuery.each(response, function(i,data){
				$('body').css('background-color',data['Color1']);
				$('#displayFrame').css("background-color", data['Color2']); 
				$('p' ).css('color', data['Color3']);
				$('h1' ).css('color', data['Color3']);
				$('#Name' ).css('color', data['Color2']);
				$('#topNav').css('color', data['Color2']);
				$('#topNav').css('background-color', data['Color1']);
				$('.navButton').css('color', data['Color2']);
			});
		},
		error: function () {
			alert("error");
		}
	});
};
function renderStlyeSelector(colorScheme){
	jQuery.each(colorScheme, function(i,data){
		var itemId = Math.random();
		$(Stylerator).append('<div class="palleteFrame">' +
			'<div class="colorSquareFrame">'+data["color1"]+'</div>'+
			'<div class="colorSquareFrame">'+data["color2"]+'</div>' +
			'<div class="colorSquareFrame">'+data["color3"]+'</div>' +
			'<div class="colorSquareButton"><button id="'+itemId   +'" ' +
			'onclick="setStyleFromButtonValue(this)">Select</button> </div></div>');
	});

	var parentDOM = document.getElementById("displayFrame");
	var elements  = parentDOM.getElementsByClassName("colorSquareFrame");
	document.getElementById("home").style.display='block';
	for (i in elements) {
		var element = elements[i];
		var color =  element.innerHTML;
		$('#'+element.id).css('background-color', color);
		$('#'+element.id).css('color', color);
		var cssValue = "1px solid "+color;
		$('#'+element.id).css('border',cssValue);
	};
};