if (typeof(Alchemy) === 'undefined') {
  var Alchemy = {};
}

Alchemy.initAlchemyPreviewMode = function() {

  // Setting jQueryUIs global animation duration
  $.fx.speeds._default = 400;

  // The Alchemy JavaScript Object contains all Functions
  $.extend(Alchemy, {

    ElementSelector: {

      // defaults
      styles: {
        reset: {
          outline: '0 none'
        },
        hover: {
          'outline-width': '2px',
          'outline-style': 'solid',
          'outline-color': '#98BAD5',
          'outline-offset': '4px',
          '-moz-outline-radius': '4px',
          'outline-radius': '4px'
        },
        selected: {
          'outline-width': '2px',
          'outline-style': 'solid',
          'outline-color': '#DB694C',
          'outline-offset': '4px',
          '-moz-outline-radius': '4px',
          'outline-radius': '4px'
        }
      },

      scrollOffset: 20,

      init: function() {
        var self = Alchemy.ElementSelector;
        var $elements = $('[data-alchemy-element]');
        var styles = self.styles;
        $elements.bind('mouseover', function(e) {
          $(this).attr('title', 'Klicken zum bearbeiten');
          if (!$(this).hasClass('selected')) $(this).css(styles.hover);
        });
        $elements.bind('mouseout', function() {
          $(this).removeAttr('title');
          if (!$(this).hasClass('selected')) $(this).css(styles.reset);
        });
        $elements.bind('Alchemy.SelectElement', self.selectElement);
        $elements.bind('click', self.clickElement);
        self.$previewElements = $elements;
      },

      selectElement: function(e) {
        var $this = $(this);
        var self = Alchemy.ElementSelector;
        var $elements = self.$previewElements;
        var styles = self.styles;
        var offset = self.scrollOffset;
        e.preventDefault();
        $elements.removeClass('selected').css(styles.reset);
        $this.addClass('selected').css(styles.selected);
        $('html, body').animate({
          scrollTop: $this.offset().top - offset,
          scrollLeft: $this.offset().left - offset
        }, 400);
      },

      clickElement: function(e) {
        var $this = $(this);
        var parent$ = window.parent.jQuery;
        var target_id = $this.attr('data-alchemy-element');
        var $element_editor = parent$('#element_area .element_editor').closest('[id="element_' + target_id + '"]');
        var $elementsWindow = parent$('#alchemyElementWindow');
        e.preventDefault();
        $element_editor.trigger('Alchemy.SelectElementEditor', target_id);
        if ($elementsWindow.dialog("isOpen")) {
          $elementsWindow.dialog('moveToTop');
        } else {
          $elementsWindow.dialog('open');
        }
        $this.trigger('Alchemy.SelectElement');
      }
    }
  });

  Alchemy.ElementSelector.init();

};

if (typeof(jQuery) === 'undefined') {
  Alchemy.loadjQuery(Alchemy.initAlchemyPreviewMode);
} else {
  Alchemy.initAlchemyPreviewMode();
}