$(document).ready(function() {
  highslideAppendFragment();
  highslideAppendFormFragment();
});


var _highslide_footer_fragment = '<div class="highslide-footer">    <div> <span class="highslide-resize" title="Resize"> <span></span> </span> </div> </div> ';

var _highslide_hdr_fragment = '<div class="highslide-header"><ul> <li class="highslide-close"> <a href="#" onclick="return hs.close(this)"></a> </li> </ul> </div> ';

function highslideAppendFormFragment() {
  var items = $(".highslide-body-form");

  items.each(function(i) {
    $(this).wrap('<div class="highslide-html-content html-pop-medium-content" id="highslide-html-form-' + i + '"/>');
    $(_highslide_hdr_fragment).insertBefore($(this));
    $(this).wrap('<div class="highslide-body"/>');
  });

  items = $("a.html-pop-medium-form");
  var i = 0;
  items.each(function() {
    var contentTag = "highslide-html-form-" + i;
    var headingText = this.id.replace(/_/g, " ");
    $(this).click(function() {
      return popHtml(this, contentTag, headingText, true);
    });
    i++;
  });

  items = $("a.html-pop-medium-form-login");
  items.each(function() {
    var contentTag = "highslide-html-form-" + i;
    var headingText = this.id.replace(/_/g, " ");
    $(this).click(function() {
      return popHtml(this, contentTag, headingText, true, true);
    });
    i++;
  });
  items = $("a.html-pop-medium-form-login-no-preserve");
  items.each(function() {
    var contentTag = "highslide-html-form-" + i;
    var headingText = this.id.replace(/_/g, " ");
    $(this).click(function() {
      return popHtml(this, contentTag, headingText, true, true, true);
    });
    i++;
  });
}

function highslideAppendFragment() {
  var items = $(".highslide-body");

  items.each(function(i) {
    $(this).wrap('<div class="highslide-html-content html-pop-medium-content" id="highslide-html' + i + '"/>');
  });

  $(_highslide_footer_fragment).insertAfter(".highslide-body");
  $(_highslide_hdr_fragment).insertBefore(".highslide-body");

  items = $("a.html-pop-medium");
  items.each(function(i) {
    var contentTag = "highslide-html" + i;
    $(this).click(function() {
      return popHtml(this, contentTag, undefined, false, false, true);
    });
  });
}

function popHtml(el, contentTagID, headingText, dontSetMinWidth, dimOuterArea, dontPreserve) {
  if (!headingText) {
    if (el.text)
      headingText = trim(el.text);
    else
      headingText = trim(el.innerText); //for ie7
  }

  var htmlConfig = {
    headingText: headingText,
    contentId: contentTagID,
    outlineType: 'rounded-white',
    wrapperClassName: 'draggable-header',
    easing : 'linearTween',
    padToMinWidth:true,
    align: 'center',
    preserveContent:true,
    dimmingOpacity : 0.00000000000000000000001/*, //required to close on area outside
     transitions: ['expand', 'crossfade']*/
  };

  if (!dontSetMinWidth) {
    htmlConfig['minWidth'] = 574;
  }

  if (dimOuterArea) {
    htmlConfig['dimmingOpacity'] = 0.5;
  }

  if (dontPreserve) {
    htmlConfig['preserveContent'] = false;
  }
  hs.Expander.prototype.onCreateOverlay = function (sender, e) {
    var clz = sender.a.className.split(' ');
    if (clz.length > 0) {
      for (var i = 0; i < clz.length; i++) {
        var c = clz[i];
        if (c.match("^html-pop-medium") == "html-pop-medium") {
          var childArray = e.overlay.children;
          if (childArray) {
            for (var j = 0; j < childArray.length; j++) {
              clz = childArray[j].className.split(' ');
              for (var k = 0; k < clz.length; k++) {
                c = clz[k];
                if (c == 'removeForNormalHtml') {
                  e.overlay.innerHTML = '';
                  return true;
                }
              }
            }
          }
        }
      }
    }

    return true;
  };

  return hs.htmlExpand(el, htmlConfig);
}

function trim(str) {
  var newstr;
  newstr = str.replace(/^\s*/, "").replace(/\s*$/, "");
  return newstr;
}