var Chem = new Class({
  initialize : function(){
    this.currentSearchElement = false;
    this.init();    
  },
  
  init : function()
  {
    var self = this;
    
    window.addEvent('domready', function()
    {
      
      // Row colors
      $$('.row').each(function(el){
        var fx = new Fx.Styles(el, {duration:100, wait:false});
        el.addEvents({
          'mouseenter' : function(){
            fx.start({'background-color':'#ECF9FF'});
          },
          'mouseleave' : function(){
            fx.start({'background-color':'#FFFFFF'});
          }
        });
      });
      
      // inputs & textareas
      $$('input[type="text"]', 'textarea').each(function(el){        
        el.setProperty('BC', el.getStyle('border-color'));        
        el.addEvents({
          'focus' : function(){
            this.setStyles({
              'border-color' : '#141414',
              'background-color' : '#F0F0F0'
            });
          },
          'blur' : function(){
            this.setStyles({
              'border-color' : this.getProperty('BC'),
              'background-color' : '#FFFFFF'
            });
          }
        });        
      });
      
      // Hide List Products
      $$('.list-products').each(function(el){
        new Fx.Slide(el, {mode:'vertical'}).hide();
      });
      
      // search buttons
      var btns = ['btn_oem', 'btn_spec', 'btn_color', 'btn_desc'];
      btns.each(function(el)
      {
        var b = 'q_' + el.replace('btn_', '');
        $(el).setProperty('element', b);
        $(el).addEvent('click', function(e)
        {
          e = new Event(e).stop();
          var element = this.getProperty('element');
          self.search(element, $(element).get('value'));
        });
      });
      
      // search inputs
      var inputs = ['f_oem', 'f_spec', 'f_color', 'f_desc'];
      inputs.each(function(el)
      {
        $(el).addEvent('submit', function(e)
        {
          e = new Event(e).stop();
          var element = this.getProperty('id').replace('f_', 'q_');
          self.search(element, $(element).get('value'));
        });
      });
      
    }); // End window event
  },
  
  search : function(b, v)
  {
    if(!$chk(v))
    {
      this.Alert('Please fill the corresponding search input', 300);
      return false;
    }
      
    switch(b)
    {
      case 'q_oem':
        var op = {'q_oem':v};
        break;
      
      case 'q_spec':
        var op = {'q_spec':v};
        break;
        
      case 'q_color':
        var op = {'q_color':v};
        break;
      
      case 'q_desc':
        var op = {'q_desc':v};
        break;
    }    
    this.currentSearchElement = b;
    if($('loading_' + b.replace('q_', '')))
      $('loading_' + b.replace('q_', '')).addClass('Loading_on');
      
    //var myHTMLRequest = new Request.HTML({url:'search.php', onComplete:this.getResponse.bind(this)}).post(op);
    new Request.JSON({url: "search.php", onComplete:this.getResponse.bind(this) }).post(op);
  },
  
  getResponse : function(r, rstring)
  {
    var self = this;
    var elementResponse = this.newElement('div');
    
    if($type(r.response) == 'string')
    {
      elementResponse.set('class', 'row-error');
      elementResponse.set('html', r.response);
    }
    else if($type(r.response) == 'array')
    {
      // Generate titles      
      var ult = this.newElement({
        type:'ul', 
        list:[
          'OEM', 
          'NUMBER', 
          'CATALYST', 
          $H({params : $H({'html' : 'SPECIFICATIONS', 'class':'col-specifications'}) }), 
          'COLOR', 
          $H({params : $H({'html' : 'DOCUMENTS', 'class':'col-documents'}) })
        ], 
        params:$H({'class':'title'})
      });
          
      var er = this.newElement({type:'div', params:$H({'class':'row-title'})});
      er.adopt(ult, this.newElement({type:'div', params:$H({'class':'clear'})}));
      elementResponse.adopt(er);
      
      r.response.each(function(el)
      {
        // Row div
        var er = this.newElement({type:'div', params:$H({'class':'row', 'events':{
          'mouseenter':function(e){
            this.setStyle('background-color', '#EBEBEB');
          },
          
          'mouseleave':function(e){
            this.setStyle('background-color', 'transparent');
          }
        }})});
        
        // List of UL items to generate each LI tag
        // l:Array
        // Each array item can have String || Hash || DOM Element
        var l = [
          el.oem,
          $H({params : $H({'html' : el.number, 'class':'col-number'}) }),
          el.catalyst,
          $H({params : $H({'html' : el.spec, 'class':'col-specifications'}) }),
          el.color
        ];
        
        // downloads links
        if($type(el.downloads) == 'array')
        {
          el.downloads.each(function(d)
          {
            var h = $H({
              'href' : '#',
              'html' : 'Download',
              'id'   : 'a_'+d.docid,
              'events' : {
                'click' : function(e){
                  e = new Event(e).stop();
                  
                  // Make the form element to download PDF File
                  // this form was hidden
                  
                  // input get <input type="hidden" name="get" />
                  var p1 = $H({
                    'name'  : 'get',
                    'type'  : 'hidden',
                    'value' : this.getProperty('docfilename')
                  });
                  var inpget = self.newElement({type:'input', params:p1});
                  
                  // input name <input type="hidden" name="name" />
                  var p2 = $H({
                    'name'  : 'name',
                    'type'  : 'hidden',
                    'value' : this.getProperty('docfile')
                  });
                  var inpname = self.newElement({type:'input', params:p2});
                  
                  // Form <form method="post" action="download.php"></form>
                  var p3 = $H({
                    'id'     : 'fdoc_'+d.docid,
                    'method' : 'post',
                    'action' : 'download.php',
                    'styles' : {
                      'opacity'  : 0,
                      'position' : 'absolute'
                    }
                  });
                  var f = self.newElement({type:'form', params:p3});
                  f.adopt(inpget, inpname);
                  
                  $(document.body).adopt(f);
                  (function(){ $('fdoc_'+d.docid).submit(); }).delay(100);
                }
              } // End click event
            }); // End Hash object
            
            var a = this.newElement({type:'a', params:h});
            a.setProperties({
              'docid'       : d.docid,
              'docfile'     : d.docfile,
              'docfilename' : d.filename
            });
            l.push($H({'element':a, 'params':$H({ 'class':'col-documents' }) }) );
          }, this);
        }
        
        // make <ul> element with list l        
        var ul = this.newElement({type:'ul', list:l});        
        
        // Description
        var divDesc = this.newElement({type:'div', params:$H({'class':'description', 'html':'<strong>DESCRIPTION</strong>: '+el.desc+'<br /><br />'})});
        ul.adopt(divDesc);
        
        er.adopt(ul, this.newElement({type:'div', params:$H({'class':'clear'})}));
        elementResponse.adopt(er);
      }, this);
    }
        
    elementResponse.adopt(this.newElement({type:'div', params:$H({'class':'clear'})}));
    
    var el = $('results'); //$(this.currentSearchElement.replace('q_', 'r_'));
    if(el)
    {
      if($('loading_' + this.currentSearchElement.replace('q_', '')))
        $('loading_' + this.currentSearchElement.replace('q_', '')).removeClass('Loading_on');
        
      new Fx.Slide(el, {mode:'vertical'}).hide();
      el.empty();
      //el.set('html', responseHTML);
      el.adopt(elementResponse);
      (function(){new Fx.Slide(el, {mode:'vertical'}).slideIn();}).delay(50);
      this.addLogos.delay(500, this);
    }
  },

  addLogos : function(){
    var el = $('results');
    var container = $('product_logos');
    if(!el && !container) return;
    
    var path     = 'images/logos/';
    var logos    = ['camokote', 'glair', 'glycomyx', 'skykote'];
    var logos_in = [];
    
    el.getElements('li.col-number').each(function(el){
      var n = el.get('html').toLowerCase().split(' ');
      n.each(function(name){
        if(logos.contains(name) && !logos_in.contains(name))
          logos_in.push(name);
      });
    });

    container.empty();
    logos_in.each(function(logo){
      new Asset.image(path + logo + '.jpg').inject(container);
    });
  },
  
  newElement : function(obj)
  {
    if(!$defined(obj)) 
      return false;
    
    if($type(obj) == 'string')
      return new Element(obj);
    
    if(!$defined(obj.type))
      return false;
    
    var self = this;
    
    switch(obj.type)
    {
      // <ul> Element
      case 'ul':
        var e = new Element('ul');
        // IF have params defined and params is a hash object
        // set element with each param
        if($defined(obj.params))
        {
          if($type(obj.params) == 'hash')
          {
            obj.params.each(function(v, k){
              e.set(k, v);
            });
          }
        }
        
        // If list is defined and is array object
        // make each <li> element for his parent <ul> element
        if($defined(obj.list))
        {
          if($type(obj.list) == 'array')
          {
            obj.list.each(function(el){
              var li = this.newElement('li');
              
              if($type(el) == 'string')
                li.set('html', (el != '')?el:'&nbsp;');
              else if($type(el) == 'element')
                li.adopt(el);
              else if($type(el) == 'hash')
              {
                if($defined(el.params))
                {
                  li = this.newElement({type:'li', params:el.params});
                  if($defined(el.element))
                    li.adopt(el.element);
                }
              }
              
              e.adopt(li);
            }, this);
          
            e.adopt(this.newElement({type:'div', params:$H({'class':'clear'})}));
          }
        }
        return e;
        break;
      // End <ul> Element
        
      default:
        var e = new Element(obj.type);
        if($defined(obj.params))
        {
          if($type(obj.params) == 'hash')
          {
            obj.params.each(function(v, k){
              e.set(k, v);
            });
            if(obj.params.has('html'))
              if(obj.params.get('html') == '')
                e.set('html', '&nbsp;');
          }
        }        
        return e;
        break;
    }
  },
  
  Confirm : function(func, msg)
  {
    var spanMsg = new Element('span').setHTML(msg + '<br/><br/>');
    var aCancel = new Element('a', {'href':'close.background.alert', 'id':'chem-confirm-alert-cancel'}).setHTML('Cancelar');
    var aAccept = new Element('a', {'href':'#', 'id':'chem-confirm-alert-accept'}).setHTML('Aceptar');
    var spanLin = new Element('span').setHTML('&nbsp;|&nbsp;');
    var divCont = new Element('div', {'styles' : {'padding':'10px', 'text-align':'center'}});
    var self = this;
    
    divCont.adopt([spanMsg, aCancel, spanLin, aAccept]);
    this.Alert(divCont);
    
    (function(){
      $('chem-confirm-alert-accept').addEvent('click', function(e){ e = new Event(e).stop(); func(); });
      $('chem-confirm-alert-cancel').addEvent('click', function(e){ e = new Event(e).stop(); self.setButton(this); });
    }).delay(500);
    
  },
  
  // Generate a window with content inside
  // @ content : String || Element ( Content to display)
  // @ w : Number || String (Window width, default : 350, can be 'auto')
  // @ h : Number || String (Window width, default : 'auto')
  Alert : function(content, w, h, fast)
  {
    var self = this;
    
    if($('chem-background'))
      $('chem-background').remove();
    if($('chem-alert'))
      $('chem-alert').remove();
      
      
    if(typeof w != 'undefined' || w != null)
     var mw = w;
    else
    {
      w = '50%';
      var mw = '350px';
    }
    h = (typeof h != 'undefined' || h != null) ? h : 'auto';
    
    // Background
    var bg = new Element('div', {
      'styles' : {
        'background-color' : '#000000',
        'opacity'  : '0.8',
        'position' : 'absolute',
        'width'    : '100%',
        'height'   : window.getScrollHeight(),
        'top'      : 0,
        'left'     : 0,
        'z-index'  : 25000
      },
      'class' : 'chem-background',
      'id'    : 'chem-background'
    });    
    
    // Container
    var div = new Element('div', {
      'styles' : {
        'background-color' : '#FFFFFF',
        'padding'  : 10,
        'opacity'  : 0,
        'position' : 'absolute',
        'top'      : '50%',
        'left'     : '50%',
        'width'    : w,
        'min-width': mw,
        'height'   : h,
        'z-index'  : 26000
      },
      'class' : 'chem-alert',
      'id'    : 'chem-alert'
    });
    if(typeof content == 'string')
      div.setHTML(content);
    else if(typeof content == 'object')
      div.adopt(content);
        
    // Button Close
    var closeButton = new Element('a', {
      'styles' : {'display' : 'block'},
      'href' : 'close.background.alert',
      'id'   : 'chem-alert-close'
    }).setHTML('CERRAR');    
    
    $(div).adopt(closeButton);
    $(document.body).adopt([bg, div]);
    
    // Set event to button
    (function(){
      $('chem-alert-close').addEvent('click', function(e){
        e = new Event(e).stop();
        self.setButton(this);
      });
    }).delay(500);
    
    // Round Corners
    var settings = {
      tl: { radius: 5 },
      tr: { radius: 5 },
      bl: { radius: 5 },
      br: { radius: 5 },
      antiAlias: true,
      autoPad: true,
      validTags: ["div"]
    };
    var rd = new curvyCorners(settings, "chem-alert");
    rd.applyCornersToAll();
    
    (function(){
      var wh = Window.getHeight();
      var s  = $('chem-alert').getSize();
      div.setStyles({
        'margin-left' : -(s.x / 2).toInt() + 'px',
        'top'         : ( ( (wh - s.y)/2 ).toInt() + Window.getScrollTop() ) + 'px'
        //'margin-top'  : ( (-(s.size.y / 2).toInt()) + Window.getScrollTop() ) + 'px'
      });
      
      // Set effect      
      if(fast == 1 || fast === true)
      {
        div.setStyle('opacity', 1);
      }
      else
      {        
        var fx = new Fx.Styles(div);
        fx.start({'opacity' : 1});
      }
    }).delay(500);
    
    // Window scroll event
    window.addEvent('scroll', function(e)
    {
      var chemAlert = $('chem-alert');
      if(chemAlert)
      {
        var s  = chemAlert.getSize();
        var wh = Window.getHeight();
        var fx = new Fx.Styles(chemAlert);
        fx.start({'top' : ( ( (wh - s.y)/2 ).toInt() + Window.getScrollTop() ) + 'px'});
      }
    });
  },
  
  closeAlert : function()
  {
    if($('chem-background') && $('chem-alert'))
    {
      var els = [$('chem-background'), $('chem-alert')];
      var fxs = {'0':{'opacity':[1, 0]}, '1':{'opacity':[1, 0]}};
      var elementsFx = new Fx.Elements(els, {onComplete:function(){ els.each(function(e){ $(e).remove(); }) }});
      elementsFx.start(fxs);
    }
  },
  
  setButton : function(el)
  {
    el = $(el);
    var s = this;
    var lnk = $(el).getProperty('href');
    // windows
    lnk = lnk.split('\\').getLast();
    lnk = lnk.split('/').getLast();
    lnk = lnk.split('.');
    var mod = lnk.shift();    
    switch(mod)
    {
      case 'close':
        var els = [];
        var fxs = {};
        
        lnk.each(function(pair, id){
          els.merge($$('.chem-'+pair));
          fxs[id] = {'opacity':[1, 0]};
        });
        var elementsFx = new Fx.Elements(els, {onComplete:function(){ els.each(function(e){ $(e).remove(); }) }});
        elementsFx.start(fxs);
        break;
    
      case 'remote':
        alert(lnk);
        break;
    }
  }
});

var myChem = new Chem();