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();
}