/*
---

 
...
 */

var FontsizeInfo = new Class({
  Implements: Options,
	
  version: '1.0',
	
	
  options: {
    smooth: 6,
    path:  'fileadmin/templates/media/js/fontsize/img/',
    text1: 'Sie haben direkt die Möglichkeit, die Seiteninhalte über folgende Tastenkombinationen zu vergrößern',
    text2: 'Seitenansicht vergrößern (+10%)',
    text3: 'STRG+PLUSZEICHEN',
    text4: 'Seitenansicht verkleinern (-10%)',
    text5: 'STRG+MINUSZEICHEN',
    text6: 'Seitenansicht auf 100%',
    text7: 'STRG+0',
    text8: 'Schließen',
		
    scr1: 'keyboard-strg-plus.png',
    scr2: 'keyboard-strg-minus.png',
    scr3: 'keyboard-strg-null.png'
  },
	
  initialize: function(element, options) {

    this.offsetY= element.getPosition().y +20;
    this.offsetX= element.getPosition().x -330;

    if(! $('fontSizeInfo')){
      this.fontSizeInfo = new Element('div', {
        'id': 'fontSizeInfo'
      });
      this.fontSizeInfo.setStyles({
        left: this.offsetX,
        top: this.offsetY
      });

      this.top = new Element('div', {
        'class': 'top'
      });
      this.top.inject(this.fontSizeInfo);
      this.middle = new Element('div', {
        'class': 'middle'
      });
      this.middle.inject(this.fontSizeInfo);

      this.p1 = this.getNewTextElement('p', '');

      this.p1.inject(this.middle);
      this.s1 = this.getNewTextElement('strong', this.options.text1);
      this.s1.inject(this.p1);

      this.p2 = this.getNewTextElement('p', '');
      this.p2.inject(this.middle);
      this.s2 = this.getNewTextElement('strong', this.options.text2);
      this.s2.inject(this.p2);

      this.img1 = new Element ( 'img' , {
        'src' : this.options.path + this.options.scr1
      });
      this.img1.inject(this.middle);


      this.p3 = this.getNewTextElement('p', this.options.text3);
      this.p3.inject(this.middle);

      this.p4 = this.getNewTextElement('p', '');
      this.p4.inject(this.middle);
      this.s4 = this.getNewTextElement('strong', this.options.text4);
      this.s4.inject(this.p4);

      this.img2 = new Element ( 'img' , {
        'src' : this.options.path + this.options.scr2
      });
      this.img2.inject(this.middle);

      this.p5 = this.getNewTextElement('p', this.options.text5);
      this.p5.inject(this.middle);

      this.p6 = this.getNewTextElement('p', '');
      this.p6.inject(this.middle);
      this.s6 = this.getNewTextElement('strong', this.options.text6);
      this.s6.inject(this.p6);

      this.img3 = new Element ( 'img' , {
        'src' : this.options.path + this.options.scr3
      });
      this.img3.inject(this.middle);

      this.p7 = this.getNewTextElement('p', this.options.text7);
      this.p7.inject(this.middle);

      this.bottom = new Element('div', {
        'class': 'bottom'
      });
      this.bottom.inject(this.fontSizeInfo);

      this.close = this.getNewTextElement('a', this.options.text8);
      this.close.addClass('close').setProperty('href', '#');
      this.close.inject(this.fontSizeInfo);

      this.close.addEvent('click', this.hideInfo.bind(this));

      this.fontSizeInfo.inject(document.body);
			
    }
  },


  getNewTextElement: function(type, theText){
    if(MooTools.version == '1.11'){
      return new Element(type).setText(theText);
    }else{
      return new Element(type, {
        text: theText
      });
    }
  },

  hideInfo: function(){

    if(MooTools.version == '1.11'){
      this.fontSizeInfo.remove();
    }else{
      this.fontSizeInfo.destroy();
    }
    return false;

  }
});