// declare global variables
var imageinfo;
var pagetext;

// toggle open or closed the login div
function open_login(toggle) {
  if(toggle == 1) {
    output = "";
    output += "<a href=\"Javascript:open_login(0);\">-</a><br />";
    output += "<form action=\"index.php\" method=\"POST\" name=\"login\" />";
    output += "user <input type=\"text\" id=\"user\" name=\"user\" ";
    output += "size=\"10\" /><br />";
    output += "pass <input type=\"password\" id=\"passwd\" name=\"passwd\" ";
    output += "size=\"10\" onKeyPress=\"return submitenter(this,event)\" />";
    output += "</form>";
    document.getElementById("login").innerHTML = output;
    document.getElementById("user").focus();
  } else {
    output = "";
    output += "<a href=\"Javascript:open_login(1);\">+</a>";
    document.getElementById("login").innerHTML = output;
  }
}

function logout() {
  document.logout.submit();
}

function switch_bg (span, state) {
  if (state == 1) {
    span.style.background = "#ddf";
  } else if (state == 0) {
    span.style.background = "none";
  }
}

// edit the textual information associated with an image
function edit_imageinfo() {
  imageinfo = document.getElementById("info").innerHTML;
  var titlevalue = document.getElementById("title").value;
  var heightvalue = document.getElementById("height").value;
  var widthvalue = document.getElementById("width").value;
  var yearvalue = document.getElementById("year").value;
  var mediumvalue = document.getElementById("medium").value;
  var availvalue = document.getElementById("availability").value;
  var imgcat = document.getElementById("imgcat").value;
  var img_active = document.getElementById("img_active").value;
  var output = "<input id=\"imgtitle\" value=\""+titlevalue+"\" size=\"15\">";
  output += "<input id=\"imgheight\" value=\""+heightvalue+"\" size=\"5\">";
  output += "<input id=\"imgwidth\" value=\""+widthvalue+"\" size=\"5\">";
  output += "<input id=\"imgyear\" value=\""+yearvalue+"\" size=\"10\">";
  output += "<br /><select id=\"medium_options\">";
  for (keyVar in mediums) {
    output += "<option value=\""+keyVar+"\"";
    if (keyVar == mediumvalue) {
      output += " selected=\"selected\"";
    }
    output += ">"+mediums[keyVar]+"</option>";
  }
  output += "</select><br />";
  output += "<select id=\"avail_options\">";
  for (keyVar in avails) {
    output += "<option value=\""+keyVar+"\"";
    if (keyVar == availvalue) {
      output += " selected=\"selected\"";
    }
    output += ">"+avails[keyVar]+"</option>";
  }
  output += "</select><br />";
  output += "<select id=\"cat_options\">";
  for (keyVar in categories) {
    output += "<option value=\""+keyVar+"\"";
    if (keyVar == imgcat) {
      output += " selected=\"selected\"";
    }
    output += ">"+categories[keyVar]+"</option>";
  }
  output += "</select><br />";
  output += "active <input type=\"checkbox\" id=\"imgactive\" value=\"1\" ";
  if (img_active == 1) {
    output += "checked ";
  }
  output += "onClick=\"activeCheckbox()\" />";
  output += "<br /><a href=\"javascript:save_imageinfo();\">save</a> ";
  output += "<a href=\"javascript:cancel_imageinfo();\">cancel</a>";
  document.getElementById("info").innerHTML = output;
}

function activeCheckbox() {
  var imgactive = document.getElementById("img_active").value;
  if (imgactive == 1) {
    document.getElementById("img_active").value = 0;
  } else {
    document.getElementById("img_active").value = 1;
  }
}

function save_imageinfo() {
  // grab all changed info as variables
  var num = document.getElementById("id").value;
  var title = document.getElementById("imgtitle").value;
  var height = document.getElementById("imgheight").value;
  var width = document.getElementById("imgwidth").value;
  var year = document.getElementById("imgyear").value;
  var medium = document.getElementById("medium_options").value;
  var mediumtext = mediums[medium];
  var category = document.getElementById("cat_options").value;
  var availability = document.getElementById("avail_options").value;
  var availtext = avails[availability];
  var img_active = document.getElementById("img_active").value;

  // update the database
  var posturl = "update_imageinfo.php";
  var postargs = "id="+num+"&title="+title+"&height="+height+"&width="+width;
  postargs += "&year="+year+"&category="+category+"&medium="+medium;
  postargs += "&availability="+availability+"&imgactive="+img_active;
  submitUpdate(1, posturl, postargs);

  // reset the info span without inputs
  var output = title+" - "+height+"\"x"+width+"\" - "+year+"<br />";
  output += mediumtext+"<br />"+availtext;
  output += "<br /><a href=\"javascript:edit_imageinfo();\">edit</a><br />";
  output += "<a href=\"?viewall=1\">view all</a>";
  document.getElementById("info").innerHTML = output;

  // set hidden inputs at end of page
  document.getElementById("title").value = title;
  document.getElementById("height").value = height;
  document.getElementById("width").value = width;
  document.getElementById("year").value = year;
  document.getElementById("medium").value = medium;
  document.getElementById("availability").value = availability;
  document.getElementById("img_active").value = img_active;
}

// replace the image info span with its original content
function cancel_imageinfo() {
  document.getElementById("info").innerHTML = imageinfo;
}

// set up a page for editing
function edit_pagetext(id){
	pagetext = document.getElementById("heavybodytext").innerHTML;
	var output = "<form id=\"pageEdit\" method=\"POST\" action=\"save_pageText.php\">";
	output += "<input type=\"hidden\" id=\"postid\" value=\""+id+"\" />";
	output += "<textarea id=\"editText\" style=\"width:95%;height:600px;\">";
	output += document.getElementById("pagetext").value;
	output += "</textarea>";
	output += "</form>";
	output += "<a href=\"javascript:save_pagetext('"+id+"');\">save</a> ";
	output += "<a href=\"javascript:cancel_pagetext();\">cancel</a>";
	document.getElementById("heavybodytext").innerHTML = output;
}

function save_pagetext(id) {
	$('pageEdit').request({
		parameters: {id: $('postid').value, editText: $('editText').value},
		onSuccess: function(transport){
			if (transport.responseText){
				alert(transport.responseText);
			}
			window.location.reload();
		}
	});
}

// replace page with its original content
function cancel_pagetext(){
	document.getElementById("heavybodytext").innerHTML = pagetext;
}

function submitUpdate(id, urlstring, postargs) {
  if (http = createRequestObject()) {
    http.open('post', urlstring, true);
    http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    http.onreadystatechange = handleErrorReporting;
    http.send(postargs);
  } else {
    alert("browser not compatible with XMLHttpRequest");
  }
}

function handleErrorReporting() {
  if(http.readyState == 4) {
    var response = http.responseText;
    if (response) {
      alert(response);
    }
  }
}

function createRequestObject() {
  var xmlhttp; 
  /*@cc_on 
  @if (@_jscript_version >= 5) 
    try { 
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (e) { 
      try { 
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (E) { 
         xmlhttp = false; 
       } 
    } 
  @else xmlhttp = false; 
  @end @*/  

  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { 
    try { 
      xmlhttp = new XMLHttpRequest(); 
      xmlhttp.overrideMimeType('text/xml');
    } catch (e) { 
      xmlhttp = false; 
    } 
  } 
  return xmlhttp; 
}

function submitenter( myfield, e ) {
  var keycode;
  if (window.event) {
    keycode = window.event.keyCode;
  } else if (e) {
    keycode = e.which;
  } else {
    return true;
  }

  if (keycode == 13) {
    myfield.form.submit();
    return false;
  } else {
    return true;
  }
}