var BASE_URL = window.location.protocol + "//" + window.location.host;
var SECURE_BASE_URL = "https://" + window.location.host;

function showMonogram() {
  var monogramFieldId = document.getElementById("monogramTextId").value;
  var monogramField = document.getElementById(monogramFieldId);
  var magicNumber = (monogramField.maxLength) ? monogramField.maxLength : 1;
  var monogram = (magicNumber == 1) ? monogramField.options[monogramField.selectedIndex].innerHTML : monogramField.value;
  var colorFieldId = document.getElementById("monogramColorId").value;
  var colorField = document.getElementById(colorFieldId);
  var dynamic_thumbnailFieldId = document.getElementById("dynamic_thumbnailId").value;
  var dynamic_thumbnailField = document.getElementById(dynamic_thumbnailFieldId);

  if (magicNumber == 1 || monogram.length == magicNumber) {
    var charCount = 0;
    var character = '';
    
    for (var i = 0; i < magicNumber; i++) {
      character = monogram.charAt(i);
      
      if ((character >= 'A' && character <= 'Z') || (character >= 'a' && character <= 'z')) {
        charCount++;
        
        if (charCount == magicNumber) {
          var color = colorField.options[colorField.selectedIndex].innerHTML;
          var rgb = getRGBColor(color);
          var monogramName = monogramField.getAttribute("displayname");
          var font = getMonogramFont(monogramName);
          var monogramText = prepareMonogramText(monogram, monogramName);
          var previewerParams = "/monogramimager.php?shadow=0&text=" + monogramText + "&color=" + rgb + "&font=" + font;
          var thumbnailImage = document.getElementById("product_thumbnail");
          
          dynamic_thumbnailField.value = SECURE_BASE_URL + previewerParams + "&size=4";
          thumbnailImage.style.backgroundColor = (color == "White") ? "#ccc" : "#fff";
          thumbnailImage.src = BASE_URL + previewerParams + "&size=7";
          thumbnailImage.setAttribute("enlarge_src", BASE_URL + previewerParams + "&size=12");
          thumbnailImage.removeAttribute("height");
          thumbnailImage.removeAttribute("width");
        }
      }
      
      else {
        monogram = "";
        break;
      }
    }
  }
}

function prepareMonogramText(monogramText, monogramName) {
  var monogramText = monogramText.toLowerCase();
  
  monogramName = monogramName.toLowerCase();
  
  if (monogramText.length == 3)
    monogramText = monogramText.charAt(0) + monogramText.charAt(1).toUpperCase() + monogramText.charAt(2);
  
  else if (monogramText.length == 2)
    monogramText = monogramText.charAt(0).toUpperCase() + monogramText.charAt(1);

  if (monogramName.indexOf("filigree") > -1)
    monogramText = "1" + monogramText;
  
  else if (monogramName.indexOf("lily") > -1 || monogramName.indexOf("mandragora") > -1)
    monogramText = monogramText.toUpperCase();
  
  else if (monogramName.indexOf("scroll") > -1)
    monogramText = "5" + monogramText;

  else if (monogramName.indexOf("wreath") > -1)
    monogramText = "9" + monogramText;

  else if (monogramName.indexOf("signet regent") > -1) {
    monogramText = monogramText.toUpperCase();
    monogramText = "//" + monogramText + "-9";
  }
  
  else if (monogramName.indexOf("signet classic") > -1)
    monogramText = "//" + monogramText + "9";
  
  else if (monogramName.indexOf("signet oval") > -1)
    monogramText = "//" + monogramText + "5";

  else if (monogramName.indexOf("signet") > -1) {
    monogramText = monogramText.toUpperCase();
    monogramText = "//" + monogramText + "-$";
  }
  
  return monogramText;
}

function getMonogramFont(monogramName) {
  monogramName = monogramName.toLowerCase();
  
  if (monogramName.indexOf("filigree") > -1 || monogramName.indexOf("scroll") > -1 ||
      monogramName.indexOf("wreath") > -1) {
    return "DarliMon250.otf";
  }
  
  else if (monogramName.indexOf("lily") > -1) {
    return "Lilith-Initials.ttf";
  }
  
  else if (monogramName.indexOf("mandragora") > -1) {
    return "MANDRA.TTF";
  }
  
  else if (monogramName.indexOf("signet oval") > -1 || monogramName.indexOf("signet classic") > -1) {
    return "SIGOLD.TTF";
  }
  
  else if (monogramName.indexOf("signet regent") > -1 || monogramName.indexOf("signet") > -1) {
    return "SIGCLAS.TTF";
  }
  
  else if (monogramName.indexOf("dottie") > -1) {
    return "MBats.ttf";
  }
}

function getRGBColor(color) {
  var monogramMsg = document.getElementById("monogramMsg");
  
  monogramMsg.innerHTML = "";
  
  switch(color) {
    case "White" :
      monogramMsg.innerHTML = "Background color<br/>added to aid visibility";
      return "255,255,255";
      
    case "Chocolate Brown" : return "90,75,0";
    case "Metallic Gold" : return "197,170,88";
    case "Metallic Silver" : return "204,204,204";
    case "Metallic Copper" : return "210,130,48";
    case "Burgundy" : return "139,11,34";
    case "Deep Pink - (for Limited time!)" : return "237,25,99";
    case "Black" : default : return "0,0,0";
  }
}

function refreshInfo(img) {
  var enlargeLink = document.getElementById("enlargeLink");
  
  if (img.getAttribute("enlarge_src") != "") {
    var sizeFieldId = document.getElementById("monogramSizeId").value;
    var sizeField = document.getElementById(sizeFieldId);
    var dimensions = document.getElementById("dimensions");
    var height = parseInt(sizeField.options[sizeField.selectedIndex].innerHTML);
    var width = Math.round(img.offsetWidth / (img.offsetHeight / height));
    
    enlargeLink.style.display = "block";
    dimensions.innerHTML = width + "\"w x " + height + "\"h";
  }
}