/************************
 *  JAVASCRIPT FRAMEWORK
 ************************/

var Framework = new Class({

  Implements: [Events, Chain, Options],

  options : {
    baseHref : '',
    baseHtml : 'templates/',
    lang     : 'es'
  },

  initialize : function(options)
  {
    this.setOptions(options);
    this.position();
  },

  /**
   * Le doy la posicion correcta a los diferentes elementos
   */
  position : function()
  {
//     $('layout').position();
  },

  setKwicks : function()
  {
//     var size = {'large':675, 'normal':225, 'small':75};
    var size = {'large':810, 'normal':225, 'small':30};
    var kwicks = $$("#kwicks li");
    var imgs = [];
    kwicks.each(function(el, i)
    {
      imgs.push('images/frame_0'+(i+1)+'_inner.jpg');
    });
    this.preloader(imgs);

    var kwick = new Kwick.Menu(kwicks, {
      large : size.large,
      normal: size.normal,
      small : size.small,
      mode:'horizontal',
      transition : 'sine:out',
      duration : 300,
      onStart : function()
      {
        var els = $A(arguments);
        els.each(function(el, i){
          var id = 'fr' + (i+1) + 'inner';
          if($(id) && el.hasClass('on'))
            $(id).hide();
            /*
            new Fx.Tween($(id), {
              duration:300,
              onComplete : function(){
                if($(id))
                  $(id).destroy();
              }
            }).start('opacity', 0);*/
//           else if($(id))
//             $(id).destroy();
        })
      },
      onComplete : function()
      {
        var els = $A(arguments);
        els.each(function(el, i)
        {
          if(!$(el)) return;
          var s = el.getSize();
          el.removeClass('on');
          el.removeClass('off');

          if(s.x == size.large)
          {
            this.fire('fr' + (i+1), el);
            el.addClass('on');
          }
          else if(s.x == size.small)
          {
            el.addClass('off');
          }

        }, this);
      }.bind(this)
    });
  },

  /**
   *  Si existe la funcion fn dentro d ela clase trata de ejecutarla
   *  @param string nombre d ela funcion
   */
  fire : function(fn)
  {
    eval("var f = this." + fn);
    if($type(f) == 'function')
      f.run($A(arguments), this);
  },

  /**
   * Se ejecuta el cuadro 1 - BIOGRAFIA
   */
  fr1 : function()
  {
    var frame = $('fr1inner');
    if(frame){
      frame.show();
      new Fx.Tween(frame, {duration:300}).set('opacity', 0).start('opacity', 1);
      return;
    }

    var self = this;
    var el   = arguments[1];
    var img = new Asset.image('images/frame_01_inner.jpg', {
      onload : function(){
        self.fr1ready(this, el);
      }
    });
  },

  fr1ready : function(img, el)
  {
    var d = this.setContent(img, 'fr1inner');
    el.adopt(d);
    d.position({
      relativeTo : el,
      position   : 'leftTop'
    });

    new Fx.Tween(d, {duration:300}).start('opacity', 1);
    d.getElement('div.content').load('templates/es/fr1.php');


  },

  /**
   * Se ejecuta el cuadro 2 - OBRAS
   */
  fr2 : function()
  {
    var frame = $('fr2inner');
    if(frame){
      frame.getElements('.MGBiggestImage').each(function(el){ el.destroy(); });
      frame.show();
      new Fx.Tween(frame, {duration:300}).set('opacity', 0).start('opacity', 1);
      return;
    }

    var self = this;
    var el   = arguments[1];
    var img = new Asset.image('images/frame_02_inner.jpg', {
      onload : function(){
        self.fr2ready(this, el);
      }
    });
  },

  fr2ready : function(img, el)
  {
    var d = this.setContent(img, 'fr2inner');
    el.adopt(d);
    d.position({
      relativeTo : el,
      position   : 'leftTop'
    });

    new Fx.Tween(d, {duration:300}).start('opacity', 1);
    var g = new mateGallery(d.getElement('div.content'));
    g.loadElements();
//     d.getElement('div.content').load('templates/es/fr2.php');

  },

  /**
   * Se ejecuta el cuadro 3 - EXPOSICIONES
   */
  fr3 : function()
  {
    var frame = $('fr3inner');
    if(frame){
      frame.getElements('.MGBiggestImage').each(function(el){ el.destroy(); });
      frame.show();
      new Fx.Tween(frame, {duration:300}).set('opacity', 0).start('opacity', 1);
      return;
    }

    var self = this;
    var el   = arguments[1];
    var img = new Asset.image('images/frame_03_inner.jpg', {
      onload : function(){
        self.fr3ready(this, el);
      }
    });
  },

  fr3ready : function(img, el)
  {
    var d = this.setContent(img, 'fr3inner');
    el.adopt(d);
    d.position({
      relativeTo : el,
      position   : 'leftTop'
    });

    new Fx.Tween(d, {duration:300}).start('opacity', 1);
    var g = new mateGallery(d.getElement('div.content'), {'galleryDir':'galerias/expos/'});
    g.loadElements();
//     d.getElement('div.content').load('templates/es/fr1.php');


  },

  /**
   * Se ejecuta el cuadro 4 - CONTACTO
   */
  fr4 : function()
  {
    var frame = $('fr4inner');
    if(frame){
      frame.show();
      new Fx.Tween(frame, {duration:300}).set('opacity', 0).start('opacity', 1);
      return;
    }

    var self = this;
    var el   = arguments[1];
    var img = new Asset.image('images/frame_04_inner.jpg', {
      onload : function(){
        self.fr4ready(this, el);
      }
    });
  },

  fr4ready : function(img, el)
  {
    var d = this.setContent(img, 'fr4inner');
    el.adopt(d);
    d.position({
      relativeTo : el,
      position   : 'leftTop'
    });

    new Fx.Tween(d, {duration:300}).start('opacity', 1);
//     d.getElement('div.content').load('templates/es/fr4.php');
    new Request.HTML({
      url : 'templates/es/fr4.php',
      onComplete : function(el){
        if(!el) return;
        d.getElement('div.content').adopt(el);
        var f = d.getElement('form');
        f.addEvent('submit', this.setContactForm.pass(f, this));
      }.bind(this)
    }).get();
  },

  setContactForm : function(form){
    var w = new Waiter(form).start();
    new Request.HTML({
      'url' : '_lib/phpmailer-fe.php',
      onComplete : function(rt, re, rh){
        if(rh.split('\n')[0].contains('ok')){
          this.msg(form.getElement('ul.form'), '<li>Muchas Gracias<br>Su mensaje ha sido enviado correctamente.<br>Le responderemos a la brevedad</li>');
          form.reset();
          w.stop();
        }
      }.bind(this)
    }).post(form);
    return false;
  },

  msg : function(el, txt){
    if(!el) return;
    var m = new Element('div', {'class':'Message', 'html':txt}).inject(el, 'top');
    (function(){ new Fx.Tween(m, { onComplete:function(){m.destroy()} }).start('opacity', 0); }).delay(3000, this);
  },

  setContent : function(img, id)
  {
    var d = new Element('div', {
      'id' : id,
      'styles' : {
        'width'    : 900,
        'height'   : 450,
        'overflow' : 'hidden',
        'opacity'  : 0,
        'background' : 'url('+img.get('src')+') no-repeat'
      }
    });

    var c = new Element('div', {
      'class' : 'content'
    });

    d.adopt(c);
    return d;
  },

  preloader : function(imgs)
  {
    new Asset.images(imgs);
  },

  /* SPOT */
  Spot : function(){
    $$('a[rel^=toSpot]').each(function(item){
      var els = item.get('rel').split(':');
      if(els.length < 3) return;
      if(!$(els[1])) return;
      item.store('spot', els[1]);
      item.store('img', 'images/'+els[2]);
      item.addEvent('mouseenter', this.SpotShow.pass(item, this));
      item.addEvent('mouseleave', this.SpotHide.pass(item, this));
    }, this);
  },

  SpotShow : function(el){
    var image = el.retrieve('img');
    var spot  = $(el.retrieve('spot'));
    if(!image || !store) return;

    spot.empty();
    spot.setStyle('opacity', 0)
    spot.show();
    new Asset.image(image, {
      onload : function(){
        this.inject(spot);
        new Fx.Tween(spot, {duration:300}).start('opacity', 1);
      }
    });
  },

  SpotHide : function(el){
    var spot = $(el.retrieve('spot'));
    if(!spot) return;
    spot.empty();
    spot.setStyle('opacity', 0)
  }

});

var toSpot = function(){
  var f = new Framework();
  f.Spot();
}

var GL;
window.addEvent('domready', function(){
  GL = new Framework();
  GL.setKwicks();
})