var imageUrl = null;
var image;
var imgWidth = 180;
var imgHeight = 160;
var backWidth = 220;
var backHeight = 220;
var frontWidth = 200;
var frontHeight = 200;
var refreshInterval = null;
var backShown = false;

function setup() {
  widgetSetup();
  if (window.innerWidth) {
    frontWidth = window.innerWidth;
    frontHeight = window.innerHeight;
  }
  else {
    frontWidth = document.documentElement.clientWidth;
    frontHeight = document.documentElement.clientHeight;
  }  
  if (window.widget) {
    if (widget.mobile) {
      var fit = widget.mobile.getResizeToFit();
      frontWidth = fit.width;
      frontHeight = fit.height;
    }
    parseComboBoxes('combobox.png');
    document.getElementById("back").style.display = "none";
    document.getElementById("TitleText").onchange = titleChanged;
    document.getElementById("Url").onchange = urlChanged;
    if (document.getElementById("PredefinedSelector").addEventListener) {
      document.getElementById("PredefinedSelector").addEventListener("change", predefinedSelected, true);
    }
    else {
      document.getElementById("PredefinedSelector").attachEvent("change", predefinedSelected);      
    }  
    document.getElementById("EnableRefresh").onchange = refreshChanged;
    document.getElementById("Refresh").onchange = refreshChanged;
    //document.getElementById("TheImageBox").onmouseover = reloadImage;
    document.getElementById("TheImageBox").onclick = openLink;
    document.getElementById("ReloadImage").onclick = reloadImage;//setOriginalSize;
    document.getElementById("SmallSize").onclick = setSmallSize;
    document.getElementById("MediumSize").onclick = setMediumSize;
    document.getElementById("LargeSize").onclick = setLargeSize;
    readPrefs();
    widget.onshow = reloadImage;
    widget.onremove = clearPrefs;
    if (widget.mobile) {
      widget.mobile.showBack = showBack;
      widget.mobile.hideBack = hideBack;
    }
  }
}

function predefinedSelected(event) {
  var select = document.getElementById("PredefinedSelector");
  var title = select.options[select.selectedIndex].text;
  document.getElementById("TitleText").value = title;
}

function readPrefs() {
  var value = widget.preferenceForKey(widget.identifier + "-title");
  if (value != null) {
    document.getElementById("TitleText").value = value;
  }
  else {
    document.getElementById("TitleText").value = document.getElementById("TheTitle").innerHTML;    
  }
  titleChanged();
    
  var value = widget.preferenceForKey(widget.identifier + "-url");
  if (value != null) {
    document.getElementById("Url").value = value;
  }
  else {
    document.getElementById("Url").value = 
      document.getElementById("TheImage").getAttribute("src");
  }
  urlChanged();  
  
  var value = widget.preferenceForKey(widget.identifier + "-refresh");
  if (value != null) {
    selectOption(document.getElementById("Refresh"), value);
  }
  document.getElementById("EnableRefresh").checked = value != null;
  refreshChanged();
  
  var value = widget.preferenceForKey(widget.identifier + "-link");
  if (value != null) {
    document.getElementById("Link").value = value;
  }

  var width = widget.preferenceForKey(widget.identifier + "-width");
  if (width != null) {
    frontWidth = eval(width);    
  }
  var height = widget.preferenceForKey(widget.identifier + "-height");
  if (height != null) {
    frontHeight = eval(height);    
  }
  resize(frontWidth, frontHeight);
}

function clearPrefs() {
  widget.setPreferenceForKey(null, widget.identifier + "-title");  
  widget.setPreferenceForKey(null, widget.identifier + "-url");  
  widget.setPreferenceForKey(null, widget.identifier + "-refresh");  
  widget.setPreferenceForKey(null, widget.identifier + "-link");  
  widget.setPreferenceForKey(null, widget.identifier + "-width");  
  widget.setPreferenceForKey(null, widget.identifier + "-height");  
}

function urlChanged() {  
  imageUrl = document.getElementById("Url").value;
  loadImage(imageUrl);
  widget.setPreferenceForKey(imageUrl, widget.identifier + "-url");
}

function titleChanged() {
  var title = document.getElementById("TitleText").value;
  document.getElementById("TheTitle").innerHTML = title;
  widget.setPreferenceForKey(title, widget.identifier + "-title");
  if (widget.mobile) {
    if (title.length > 0) {
      widget.mobile.setTitle(title);
    }
    else {
      widget.mobile.setTitle("Picture Frame");
    }  
  }
}

function refreshChanged() {
  if (refreshInterval != null) {
    clearInterval(refreshInterval);
  }
  if (document.getElementById("EnableRefresh").checked) {
    var interval = document.getElementById("Refresh").value;
    refreshInterval = 
      setInterval(reloadImage, interval * 1000);
    document.getElementById("Refresh").removeAttribute("disabled");
    widget.setPreferenceForKey(interval, widget.identifier + "-refresh");
  }
  else {
    document.getElementById("Refresh").setAttribute("disabled", true);    
    widget.setPreferenceForKey(null, widget.identifier + "-refresh");
  } 
}

function reloadImage() {
  var time = new Date();
  if (imageUrl.indexOf("?") > 0) {
    time = "&" + time.getTime();
  }
  else {
    time = "?" + time.getTime();
  }
  loadImage(imageUrl + time);
}

function loadImage(url) {
  image = new Image();
  document.getElementById("Preview").style.display = "none";
  document.getElementById("PreviewLoading").style.display = "inline";
  document.getElementById("ImageLoading").style.display = "inline";
  image.onload = function() {
    var img = document.images["TheImage"];
    img.src = image.src;
    img.style.display = "block";  
    resizeImage();
    document.images["PreviewLoading"].style.display= "none";
    document.images["ImageLoading"].style.display= "none";
    document.images["Preview"].src = image.src;
    document.images["Preview"].style.display= "inline";
    document.getElementById("AltText").style.display = "none";
  }
  image.onerror = function() {
    image = null;
    document.images["PreviewLoading"].style.display= "none";
    document.images["ImageLoading"].style.display= "none";
    document.images["Preview"].src = "";
    document.images["Preview"].style.display= "none";
    document.images["TheImage"].style.display = "none";
    document.getElementById("AltText").style.display = "inline";
  }  
  image.src = url;
}

function setOriginalSize() {
  if (image.width > 500 || image.height > 500) {
    if (confirm("The image is " + image.width + " x " + image.height + ". Resize?")) {
      var style = document.defaultView.getComputedStyle(
         document.getElementById("TheImageBox"), null)
      frontWidth = image.width + (frontWidth - parseInt(style.width));
      frontHeight = image.height + (frontHeight - parseInt(style.height));
      resize(frontWidth, frontHeight);
    }
  }
}

function openLink() {
  var link = document.getElementById("Link").value;
  if (link != null && link.length > 0) {
    widget.openURL(link);
  }
  else {
    var url = document.getElementById("Url").value;
    if (url != null && url.length  > 0) {
      widget.openURL(url);
    }  
  }
}

function setSmallSize() {
  if (widget.mobile) {
    var fit = widget.mobile.getResizeToFit();
    resize(fit.width, fit.height);
  }
  else {
    setOptSize(250);
  }  
}

function setMediumSize() {
  setOptSize(450);
}

function setLargeSize() {
  setOptSize(600);
}

function setOptSize(size) {
  var imgWidth = document.getElementById("TheImageBox").clientWidth;
  var imgHeight = document.getElementById("TheImageBox").clientHeight;
  optWidth = image.width + (frontWidth - imgWidth);
  optHeight = image.height + (frontHeight - imgHeight);
  if (size * optHeight > size * optWidth) {
    var height = size * optHeight / optWidth;
    if (height < 100) {
      height = 150;
    }
    resize(size, height);
  }
  else {
    var width = size * optWidth / optHeight;
    if (width < 150) {
      width = 150;
    }
    resize(width, size);    
  }  
}

function resize(width, height) {
  if (width) {
    window.resizeTo(width, height);
    document.getElementById("Background").style.width = width + "px";
    document.getElementById("Background").style.height = height + "px";
    frontWidth = width;
    frontHeight = height;
    onresize();  
  }  
}

function onresize() {
  if (!backShown) {
    resizeImage();
    if (window.widget) {
      if (window.innerWidth) {
        frontWidth = window.innerWidth;
        frontHeight = window.innerHeight;
      }
      else {
        frontWidth = document.documentElement.clientWidth;
        frontHeight = document.documentElement.clientHeight;
      }  
      widget.setPreferenceForKey("" + frontWidth, widget.identifier + "-width");
      widget.setPreferenceForKey("" + frontHeight, widget.identifier + "-height");
    }      
  }
}

function resizeImage() {
  var imgWidth = document.getElementById("TheImageBox").clientWidth;
  var imgHeight = document.getElementById("TheImageBox").clientHeight;
  if (image != null) {
    var img = document.images["TheImage"];
    var x = 0;
    var y = 0;
    if (image.width * imgHeight > image.height * imgWidth) {
      img.width = imgWidth;
      img.height = imgWidth * image.height / image.width;
      y = (imgHeight - imgWidth * image.height / image.width) / 2
    }
    else {
      img.width = imgHeight * image.width / image.height;
      img.height = imgHeight;      
      x = (imgWidth - imgHeight * image.width / image.height) / 2;
    }
    img.style.left = x + "px";
    img.style.top = y + "px";
  }  
}

function updateFront() {
  window.resizeTo(frontWidth, frontHeight);  
  urlChanged();
  titleChanged(); 
  var value = document.getElementById("Link").value;
  widget.setPreferenceForKey(value, 
                             widget.identifier + "-link");  
  document.getElementById("TheImageBox").setAttribute("title", value);                           
}

function selectOption(selector, value) {
  for(var i=0; i<selector.options.length; i++) {
  	if (selector.options[i].value == value) {
  	  selector.options[i].selected = true;
  	  break;
  	}
  }
}

function widgetSetup() {
  if (window.widget) {
  	var gDoneButton = new AppleGlassButton(document.getElementById("DoneButton"), 
  	                                      "Done", hideBack); 
	  var gInfoButton = new AppleInfoButton(document.getElementById("InfoButton"), 
	                                        document.getElementById("front"), 
	                                        "white", "white", showBack);    
	  var resizeButton = new Resizer(window, 
	                                 document.getElementById("ResizeButton"),
	                                 document.getElementById("Background"), onresize);    
  }
}

function showBack() {
    var front = document.getElementById("front");
    var back = document.getElementById("back");
 
    if(window.widget)
        widget.prepareForTransition("ToBack");
 
    backShown = true;
    front.style.display="none";
    if (window.innerWidth) {
      frontWidth = window.innerWidth;
      frontHeight = window.innerHeight;
    }
    else {
      frontWidth = document.documentElement.clientWidth;
      frontHeight = document.documentElement.clientHeight;
    }  
    window.resizeTo(backWidth, backHeight);
    back.style.display="block";
 
    if (window.widget)
        setTimeout ('widget.performTransition();', 0);  
}

function hideBack() {
    var front = document.getElementById("front");
    var back = document.getElementById("back");
 
    if (window.widget)
        widget.prepareForTransition("ToFront");
 
    backShown = false;
    back.style.display="none";
    updateFront();
    front.style.display="block";
 
    if (window.widget)
        setTimeout ('widget.performTransition();', 0);
}