function spoverlay() {
  var el = document.getElementById("spreadable_overlay");
  el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

spreadable = function(hash, options){
  var button_style = options.button_style;
  var host = options.host;
  var anchor = options.anchor;
  
  if (hash != "") {
    var button_url;
    
    if (options.custom_button && options.custom_button != '') {
      button_url = options.custom_button;
    } else {
      button_url = "http://" + host + "/images/btn-standard-" + button_style + ".png";
    }
    
    // create the overlay object
    var spreadable_overlay = document.createElement('div');
    spreadable_overlay.id = "spreadable_overlay";
    
    var spreadable_overlay_content = document.createElement('p');
    spreadable_overlay_content.id = "spreadable_overlay_content";
    
    var spreadable_overlay_holder  = document.createElement('div');
    spreadable_overlay_holder.id = "spreadable_overlay_holder";
    
    spreadable_overlay_content.innerHTML = "<a id=\"close\" style=\"float:right;\" href='#' onclick='spoverlay();return false;'><img src='http://"+host+"/images/round_close.png' border='0'></a>";
    spreadable_overlay_content.style.display ="block";
    spreadable_overlay_content.style.width ="695px";
    spreadable_overlay_content.style.position ="absolute";
    spreadable_overlay_content.style.top="35px";
    
    spreadable_overlay.appendChild(spreadable_overlay_holder);
    spreadable_overlay_holder.appendChild(spreadable_overlay_content);

    spreadable_iframe = document.createElement('iframe');
    spreadable_iframe.id = "spreadable_iframe";
    spreadable_iframe.src = "http://"+host+"/overlay/"+hash;
    spreadable_iframe.style.height="635px";
    spreadable_iframe.style.width="695px";
    spreadable_iframe.style.border="0px";
    spreadable_iframe.setAttribute("scrolling", "no");
    spreadable_iframe.frameBorder = "no";
    spreadable_iframe.setAttribute("border","0");
    
    spreadable_overlay_holder.appendChild(spreadable_iframe);
    
    // create the link object
    var spreadable_overlay_link_wrapper = document.createElement('div');
    spreadable_overlay_link_wrapper.style.margin = "0";
    
    var spreadable_overlay_link = document.createElement('a');
    spreadable_overlay_link.href="#";
    spreadable_overlay_link.style.position = "relative";
    spreadable_overlay_link.style.top = "0px";
    spreadable_overlay_link.style.left = "0px";
    spreadable_overlay_link.style.display ="block";
    spreadable_overlay_link.onclick=spoverlay;
    spreadable_overlay_link.innerHTML += "<img src='" + button_url + "' border='0'>";
    spreadable_overlay_link.className = "spreadable_overlay_link";
    
    spreadable_overlay_link_wrapper.appendChild(spreadable_overlay_link);
    

    // set overlay object style
    spreadable_overlay.style.visibility = "hidden";
    spreadable_overlay.style.position = "absolute";
    spreadable_overlay.style.left = "0px";
    spreadable_overlay.style.top = "0px";
    spreadable_overlay.style.width = "100%";
    spreadable_overlay.style.height = "100%";
    spreadable_overlay.style.textAlign = "center";
    spreadable_overlay.style.zIndex = "1000";
    // spreadable_overlay.style.backgroundColor = "#333";

    // width:300px;margin: 100px auto;background-color: #fff;border:1px solid #000;padding:15px;text-align:center;
    // set overlay holder style
    spreadable_overlay_holder.style.width = "695px";
    spreadable_overlay_holder.style.margin = "20px auto";
    spreadable_overlay_holder.style.backgroundColor = "white";
    spreadable_overlay_holder.style.border = "5px solid #989898";
    spreadable_overlay_holder.style.padding = "15px";
    spreadable_overlay_holder.style.textAlign = "center";

    // render objects
    var anchor_element=document.getElementById(anchor);
    if (anchor_element ==  null) { anchor_element = document.body }
    document.body.appendChild(spreadable_overlay);    
    anchor_element.appendChild(spreadable_overlay_link_wrapper);
  }
  else { 
    return false;
  }
}