var Framework = new Class({

  Implements : [Options],

  options : {
    /**
     * @var string url base
     */
    url : '',

    /**
     * @var string nombre del tema (template)
     */
    theme : 'deliciouscaterer',

    /**
     * @var string nombre del archivo de consultas
     */
    request_file : 'gateway.php',

    /**
     * @var int delay en segundos para el reinicio de slide
     */
    delay : 5
  },

  initialize : function(){
    this.aj_file = this.options.url + 'themes/' + this.options.theme + '/html/ajax/' + this.options.request_file;
  },

  /************ SLIDE ************/
  
  /**
   * Slide
   * Se carga un array de imagenes que tengan como nombre 'bg_im_##.jpg
   * Y se van mostrando cada X segundos, dependiendo de this.options.delay
   */
  slide: function(){
    this.slide_element = $('content-background');
    if(this.slide_element){
      this.slide_wrapper = new Element('div', {
        'styles' : {
          'display' : 'block',
          'overflow': 'hidden',
          'width'   : this.slide_element.getSize().x,
          'height'  : this.slide_element.getSize().y,
          'position': 'absolute'
        }
      }).inject(this.slide_element);
      this.slide_wrapper.position({relativeTo:this.slide_element});
      this.slide_init();
    }
  },

  /**
   * Slide Init
   * Hace la llamada JSON a gateway.php
   */
  slide_init : function(){
    new Request.JSON({
      url : this.aj_file,
      onSuccess : this.slide_response.bind(this)
    }).post({'mod':'mainimages'});
  },

  /**
   * Slide Response
   * Obtiene los resultados de Slide Init
   */
  slide_response : function(j, t){
    if($defined(j)){
      this.slide_images = j;
      this.slide_n = 0;
      this.slide_start();
    }
  },

  slide_start : function(){
    this.slide_current = this.slide_wrapper.getElement('img');
    this.slide_img = new Asset.image(this.slide_images[this.slide_n], {
      onload : function(){
        this.slide_img.inject(this.slide_wrapper);
        this.slide_img.position({relativeTo:this.slide_wrapper});
        this.slide_img.fade('hide');
        this.slide_img.fade('in');
        if(this.slide_current) new Fx.Tween(this.slide_current, { onComplete:function(){ this.slide_current.destroy() }.bind(this) }).start('opacity', 0);
        this.slide_loop.delay(this.options.delay*1000, this);
      }.bind(this)
    });
  },

  slide_loop : function(){
    this.slide_n = (this.slide_n+1 == this.slide_images.length) ? 0 : this.slide_n+1;
    this.slide_start();
  },

  /************ CONTACT ************/
  contact : function(){
    var elements = $$('div.form_contact');
    if(!elements) return;
    this.contact_sent = false;
    elements.each(function(element){
      this.contact_request(element);
    }, this)
  },

  contact_request : function(element){
    var form = element.getElement('form');
    if(!form) return;
    form.addEvent('submit', function(){

      if(this.contact_sent) return false;
      // Reviso que se envie un email
      if(form.getElement('input[name=email]').get('value').length < 5){
        this.modal(element, {
          'message' : '<strong>INVALID EMAIL ADDRESS</strong>',
          'close'   : 2000
        })
        return false;
      }

      this.contact_sent = true;
      this.modal(element, {'message' : '<center><strong>Please wait</strong><br/>Sending information . . .</center>'});
      new Request.JSON({
        url : this.aj_file,
        onSuccess : function(rJSON, rText){
        this.contact_response(element, rJSON);
      }.bind(this)
      }).post(form);

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


  contact_response : function(element, response){
    if(!$defined(response.sent)) return;
    if(response.sent == 'ok'){
      element.getElement('form').reset();
      this.modal(element, {'message': 'Thank you,<br/>Your message has been sent.', 'close':5000});
      this.contact_sent = false;
    }
  },

  /************ BLOG ************/

  BlogTags : function(max, items){
    this.blog_tags = $('panel-tags');
    if(!this.blog_tags) return;
    max = ($defined(max)) ? max : 10;
    this.blog_items     = $$(items);
    this.blog_size      = this.blog_tags.getSize().x;
    this.blog_container = new Element('div', {'styles':{'overflow':'hidden', 'width':this.blog_size}});
    this.blog_wrapper   = new Element('div', {'styles':{'position':'relative', 'left':0, 'width':this.blog_size}}).inject(this.blog_container);

    this.blog_buttons   = new Element('div', {'styles':{ 'width':this.blog_size, 'height':30, 'clear':'both', 'display':'block' }});
    this.blog_prev      = new Element('a', {'href':'#', 'html':'Less', 'class':'BlogTagsPrev'}).inject(this.blog_buttons);
    this.blog_next      = new Element('a', {'href':'#', 'html':'More', 'class':'BlogTagsNext'}).inject(this.blog_buttons);
    this.blog_prev.addEvent('click', this.BlogPanelPrev.pass(null, this));
    this.blog_next.addEvent('click', this.BlogPanelNext.pass(null, this));
    this.blog_prev.setStyle('opacity', 0);
    
    this.BlogPanels(max);
    this.blog_current_panel = 0;

  },

  BlogPanels : function(max){
    this.blog_panels = [];
    var items = [];
    this.blog_items.each(function(el, i, els){
      items.push(el.clone());

      if(items.length == max || i == (els.length -1)){
        this.BlogPanel(items);
        items = [];
      }
    }.bind(this));

    this.blog_wrapper.setStyle('width', (this.blog_size + 1) * this.blog_panels.length);
    this.blog_tags.empty();
    this.blog_tags.adopt(this.blog_container, this.blog_buttons);
  },

  BlogPanel : function(items){
    var panel = new Element('div', {'styles':{'width':this.blog_size, 'display':'block', 'float':'left'}}).inject(this.blog_wrapper);

    items.each(function(item){
      item.inject(panel);
    });

    this.blog_panels.push(panel);

  },

  BlogPanelNext : function(){
    if(this.blog_current_panel == (this.blog_panels.length -1)) return false;
    this.blog_current_panel++;
    return this.BlogPanelMove();
  },

  BlogPanelPrev : function(){
    if(this.blog_current_panel == 0) return false;
    this.blog_current_panel--;
    return this.BlogPanelMove();
  },

  BlogPanelMove : function(){
    var pos = this.blog_size * this.blog_current_panel;
    if(pos > 0) pos = -pos;
    
    new Fx.Tween(this.blog_wrapper, {onComplete : function(){
        
      if(this.blog_current_panel == (this.blog_panels.length -1) && this.blog_current_panel > 0){
        this.blog_next.setStyle('opacity', 0);
        this.blog_prev.setStyle('opacity', 1);
      }
      else if(this.blog_current_panel == 0)
        this.blog_prev.setStyle('opacity', 0);
      else{
        this.blog_prev.setStyle('opacity', 1);
        this.blog_next.setStyle('opacity', 1);
      }

    }.bind(this)}).start('left', pos);

    return false;
  },

  /**
   * Simula un Modal Window
   * @param element DOM Element
   * @param object
   */
  modal : function(element, options){
    options = new Hash({
      'background':'#000',
      'opacity'   :0.9,
      'message'   : 'Conecting...',
      'close'     : false
    }).extend(options).getClean();

    if($('eModal')){
      var em = $('eModal');
      var emsg = em.getElement('div');
      var el = em.retrieve('el');
      if(el == element && options.message != emsg.get('html')){
        emsg.set('html', options.message);
        emsg.position({relativeTo:em});

        // Se auto cierra si close es un numero
        if($type(options.close) == 'number'){
          (function(){
            new Fx.Tween(em, {
              onComplete : function(){em.destroy()}
            }).start('opacity', 0);
          }).delay(options.close.toInt());
        }

        return;
      }
      else if(el != element){
        em.destroy();
      }
    }

    var emodal = new Element('div', {
      'id' : 'eModal',
      'styles':{
        'background' : options.background,
        'opacity'    : options.opacity,
        'display'    : 'block',
        'width'      : element.getSize().x,
        'height'     : element.getSize().y,
        'position'   : 'absolute',
        'z-index'    : 20000
      }
    });
    emodal.store('el', element);
    var msg = new Element('div',{'html' : options.message}).inject(emodal);

    emodal.inject(document.body);

    emodal.position({
      'relativeTo' : element,
      'position'   : 'leftTop',
      'edge'       : 'leftTop'
    });
    msg.position({relativeTo:emodal});

    if($type(options.close) == 'number'){
      (function(){
        new Fx.Tween(emodal, {
          onComplete : function(){emodal.destroy()}
        }).start('opacity', 0);
      }).delay(options.close);
    }

    return emodal;
  }
  
});

var Site;
window.addEvent('domready', function(){
  Site = new Framework({
    'url'   : PHPMate.options.URL,
    'theme' : PHPMate.options.THEME
  });
  Site.slide();
  Site.contact();
})