/*
 *  $Id: embed_builder.js 4366 2008-07-11 22:30:23Z zs $
 *
 *  Copyright (c) 2008 Underlying Inc. All rights reserved.
 *
 */

EmbedBuilder = function()
{
  this.init = function() {
    YAHOO.util.Event.addListener("size_small",  "click",  function(e) { this_obj.enable_custom_size(false); this_obj.set_custom_size(425,300); } );
    YAHOO.util.Event.addListener("size_large",  "click",  function(e) { this_obj.enable_custom_size(false); this_obj.set_custom_size(600,400); } );
    YAHOO.util.Event.addListener("size_custom",  "click", function(e) { this_obj.enable_custom_size(true); } );

    YAHOO.util.Event.addListener("color_default",  "click", function(e) { this_obj.enable_custom_color(false); } );
    YAHOO.util.Event.addListener("color_custom",  "click", function(e) { this_obj.enable_custom_color(true); } );
    YAHOO.util.Event.addListener("color_swatch",  "click", function(e) { document.getElementById('color_custom').click(); this_obj.show_hide_colorpicker(true); } );
    YAHOO.util.Event.addListener("colorpicker_closebtn",  "click", function(e) { this_obj.show_hide_colorpicker(false); } );

    YAHOO.util.Event.addListener("zoom",  "change",       function(e) { this_obj.handle_zoom_change(); } );
    YAHOO.util.Event.addListener("ct", "blur",            function(e) { this_obj.handle_ct_blur(); } );
    YAHOO.util.Event.addListener("size_width",  "blur",   function(e) { this_obj.build_embed(); } );
    YAHOO.util.Event.addListener("size_height", "blur",   function(e) { this_obj.build_embed(); } );
    YAHOO.util.Event.addListener("color_custom_val", "blur",   function(e) { this_obj.update_picker_val(); this_obj.build_embed(); } );

    var input_elems = document.getElementById("builder_controls").getElementsByTagName("INPUT");
    for (var idx in input_elems) {
      if (idx == parseInt(idx)) {
        YAHOO.util.Event.addListener(input_elems[idx],  "click",  function(e) { this_obj.build_embed(); } );
      }
    }
    picker = new YAHOO.widget.ColorPicker("colorpicker", {
      showcontrols: false,
      showrgbcontrols: false,
      showwebsafe: false,
      images:{
        PICKER_THUMB: "http://yui.yahooapis.com/2.5.2/build/colorpicker/assets/picker_thumb.png", 
        PICKER_MASK: "http://yui.yahooapis.com/2.5.2/build/colorpicker/assets/skins/sam/picker_mask.png",
        HUE_THUMB: "http://yui.yahooapis.com/2.5.2/build/colorpicker/assets/hue_thumb.png",
        HUE_BG: "http://yui.yahooapis.com/2.5.2/build/colorpicker/assets/skins/sam/hue_bg.png" 
      }
    });
    picker.on("rgbChange", function(o) { this_obj.on_color_picker_change(o); } );
    this.update_picker_val();

    this.build_embed();
  }

  this.update_picker_val = function() {
    var custom_val = document.getElementById('color_custom_val').value.substr(1);
    picker.setValue( YAHOO.util.Color.hex2rgb(custom_val), false );
  }

  this.on_color_picker_change = function(o)
  {
    this.set_custom_color(YAHOO.util.Color.rgb2hex(o.newValue));
  }

  this.set_custom_color = function(color) {
    document.getElementById('color_custom_val').value = "#" + color;
    document.getElementById('color_swatch').style.background = "#" + color;
  }

  this.show_hide_colorpicker = function(bShow)
  {
    document.getElementById("colorpicker").style.visibility = bShow ? "visible" : "hidden";

    if (!bShow) {
      this.build_embed();
    }
  }

  this.set_custom_size = function(width, height)
  {
    document.getElementById('size_width').value = width;
    document.getElementById('size_height').value = height;
  }

  this.enable_custom_color = function(bEnabled)
  {
    document.getElementById('color_custom_val').disabled = !bEnabled;
    document.getElementById('fade_white').disabled = !bEnabled;
    document.getElementById('fade_black').disabled = !bEnabled;
    document.getElementById('fade_none').disabled = !bEnabled;
  }

  this.enable_custom_size = function(bEnabled)
  {
    document.getElementById('size_width').disabled = !bEnabled;
    document.getElementById('size_height').disabled = !bEnabled;
  }

  this.get_zoom_val = function()
  {
    return document.getElementById("zoom").options[document.getElementById("zoom").selectedIndex].value;
  }

  this.get_ct_val = function()
  {
    var ct = document.getElementById("ct").value;

    if (ct == 'Automatic' || ct == '') { 
      return false;
    } else {
      return ct;
    }
  }

  this.handle_zoom_change = function()
  {
    var zoom = this.get_zoom_val();
    if (zoom != "") {
      var ct = this.get_ct_val();
      if (ct === false) {
        document.getElementById("ct").value = new Date();
      }
      this.build_embed();
    }
  }

  this.handle_ct_blur = function()
  {
    var ct = this.get_ct_val();
    if (ct !== false) {
      var zoom = this.get_zoom_val();
      if (zoom == "") {
        document.getElementById("zoom").selectedIndex = 2;
      }
      this.build_embed();
    }

  }

  this.build_embed = function() {
    var iframe_elem = document.getElementById('preview_iframe');

    // view
    if      (document.getElementById("view_tl").checked)   { view = "tl"; }
    else if (document.getElementById("view_list").checked) { view = "list"; }
    else if (document.getElementById("view_map").checked)  { view = "map"; }
    else if (document.getElementById("view_flip").checked) { view = "flip"; }

    var url_args = [];
    var iframe_url = build_embed_base_url + "/embed_" + view;

    // date
    var ct = this.get_ct_val();
    if (ct !== false) {
      url_args.push("ct=" + ct);
    }

    // zoom
    var zoom = this.get_zoom_val();
    if (zoom != "") {
      url_args.push("z=" + zoom);
    }

    var color_val = document.getElementById('color_custom_val').value;
    document.getElementById('color_swatch').style.background = color_val;

    // color
    if (!document.getElementById('color_default').checked) {
      var color_val = document.getElementById('color_custom_val').value;
      url_args.push("bgcolor=" + escape(color_val));
      var bgimg = '';
      if (document.getElementById('fade_white').checked) {
        bgimg = "/images/white_grad_up.png";
      } else if (document.getElementById('fade_black').checked) {
        bgimg = "/images/black_grad_up.png";
      }

      if (bgimg.length) {
        url_args.push("bgimg=" + escape(bgimg));
      }
    }

    // size
    if (document.getElementById("size_large").checked) { width = 600; height = 400; }
    else if (document.getElementById("size_small").checked) { width = 425; height = 300; }
    else if (document.getElementById("size_custom").checked) { 
      width = parseInt(document.getElementById('size_width').value);
      height = parseInt(document.getElementById('size_height').value);

      if (isNaN(width)) { width = last_width; document.getElementById('size_width').value = width }
      if (isNaN(height)) { height = last_height; document.getElementById('size_height').value = height }
    }

    if (width < 425) {
      alert("Sorry, Dipity embeds need to be at least 425 pixels wide to shine.");
      width = document.getElementById('size_width').value = 425;
    }
    if (height < 300) {
      alert("Sorry, Dipity embeds need to be at least 300 pixels tall to sparkle.");
      height = document.getElementById('size_height').value = 300;
    }

    iframe_url += "?" + url_args.join("&");

    if (iframe_url != last_url || last_width != width || last_height != height) {
      iframe_elem.src = iframe_url;

      document.getElementById('embed_code').value = [ 
        unescape('%3C'), 'div class="dipity_embed" style="width:', width, 'px"', unescape('%3E'),
        unescape('%3C'), 'iframe width="', width, '" height="', height, '" src="', iframe_url, '" style="border:1px solid #CCC;"', unescape('%3E%3C'), '/iframe', unescape('%3E'),
        unescape('%3C'), 'p style="margin:0;font-family:Arial,sans;font-size:13px;text-align:center"', unescape('%3E'),
        unescape('%3C'), 'a href="', build_embed_base_url, '"', unescape('%3E'), build_embed_title, unescape('%3C'), '/a', unescape('%3E'),
        ' on ',
        unescape('%3C'), 'a href="', dipity.base_url, '/" /', unescape('%3E'), 'Dipity', unescape('%3C'), '/a', unescape('%3E'), '.',
        unescape('%3C'), '/p', unescape('%3E'),
        unescape('%3C'), '/div', unescape('%3E'),
      ].join("");

      last_url = iframe_url;
      last_width = width;
      last_height = height;
    }

    iframe_elem.style.width = width + "px";
    iframe_elem.style.height = height + "px";

    iframe_elem.style.visibility = "visible";
  }

  var last_url = null;
  var last_height = null;
  var last_width = null;
  var picker = null;
  var view = "";

  var this_obj = this;
  this.init();
};
var eb = new EmbedBuilder();