var ajaxingMenu = null;
var ajaxingContent = null;
var loaderBar = '<img src="/' + setupINST + '/frontend/elements/design/background/ajax-loader-ml.gif">';
var PRODUCT_IMAGES = [];

Ajax.Responders.register({
   onComplete: function(){
      externalLinksGAObeserve();
   }
});

document.observe("dom:loaded", function () {
  rightMenu();
  chooseProductImage();
  getLandingSheet();
  countryMap();
  contactUsCheck();
  externalLinksGAObeserve();
});

function rightMenu(list) {

  var rightMenuLink = list ? list : $$('a[rel*="ajax-menu"]');
  if (rightMenuLink) {
    rightMenuLink.each(function (a) {
      a.observe('click', function (e) {

        $$('#catalog-menu li a.active').invoke('removeClassName', 'active');
        $$('#catalog-menu a.loading').invoke('removeClassName', 'loading');

        var duration = 0.3;
        Event.stop(e);
        
        var self = this,
            href = self.readAttribute('href'),
            sub_menu = "div.content-box-list > ul",
            a_padding = parseInt(self.getStyle('paddingLeft').replace('px', '')),
            isPCAT = a.readAttribute('rel') == 'pcat-ajax-menu',
            li = self.up('ul', 0) ? self.up('li') : self.up('div.content-box-list'),
            level = 1,
            template = isPCAT ? 'inc_right_pcat' : 'category_list';
            
        if(isSEF){
          href = href.replace('/' + sef.pcatlanding + '/', '/' + sef.pcatmenu + '/');
          level = href.replace(/^\//, '').split('/').length - 1;
          level = isPCAT ? level - 1 : level; // Deduct the template level
        }else{
          var qParams = href.toQueryParams();
          if (isPCAT){
            level = qParams.part_id ? 2 : 1;
          }else if(qParams.open){
            level = qParams.open.split('/').length
          }
        }
            
        if(self.up('ul', 0)){self.addClassName('active');}
        if (level > 1) {
          for (i = 1; i < level; i++) {
            sub_menu = sub_menu + ' > li > ul';
          }
        }

        if (li.hasClassName('expanded')) { // Collapse its expanded menu
          li.removeClassName('expanded');
          li.addClassName('collapsed');
          if (li.down('ul')) {
            new Effect.BlindUp(li.down('ul'), {
              duration: duration,
              afterFinishInternal: function () {
                li.down('ul').hide();
              }
            });
          }
        } else if (li.down('ul')) { // Show existing sub menu
          if ($$(sub_menu)) {
            $$(sub_menu).each(function (ul) {
              ul.hide();
              if (ul.select('ul')) {
                ul.select('ul').each(function (sub) {
                  sub.hide();
                });
              }
            });
          }
          li.adjacent('.expanded').each(function (l) {
            l.removeClassName('expanded');
            l.addClassName('collapsed');
          })
          li.removeClassName('collapsed');
          li.addClassName('expanded');
          new Effect.BlindDown(li.down('ul'), {
            duration: duration
          });
        } else { // Call Ajax to show a new sub menu
          if (ajaxingMenu != null) {
            ajaxingMenu.transport.abort();
            $$('a[rel*="ajax-menu"]').each(function (obj) {
              if (obj.hasClassName('loading')) {
                obj.removeClassName('loading');
              }
            });
          }
          ajaxingMenu = new Ajax.Request(href, {
            method: 'post',
            parameters: {
              template: template,
              debug: 'off',
              ajax: '1'
            }, onCreate: function () {
              if ($$(sub_menu)) {
                $$(sub_menu).each(function (ul) {
                  new Effect.BlindUp($(ul), {
                    duration: duration,
                    afterFinishInternal: function () {
                      $(ul).hide();
                    }
                  });
                });
              }
            }, onLoading: function () {
              self.addClassName('loading');
            }, onFailure: function () {
              self.removeClassName('loading');
            }, onSuccess: function (res) {
              try {
                li.adjacent('.expanded').each(function (l) {
                  l.removeClassName('expanded');
                  l.addClassName('collapsed');
                })
                li.removeClassName('collapsed');
                li.addClassName('expanded');
                li.insert({
                  'bottom': res.responseText
                });
                var ul = li.down('ul');
                if (level > 4) {
                  ul.select('li > a').each(function (a) {
                    a.setStyle({
                      backgroundPosition: a_padding + 'px 50%',
                      paddingLeft: (a_padding + 40) + 'px'
                    });
                  });
                }
                ul.hide();
                new Effect.BlindDown($(ul), {
                  duration: duration
                });
                self.removeClassName('loading');
                
                var children = ul.select('a[rel*="ajax-menu"]');
                if (children.length > 0){
                  rightMenu(children);
                  if(isPCAT){ getLandingSheet(children); }
                }
              } catch (e) {
                self.removeClassName('loading');
              }
            }
          }); //ajax
        } //else
      }); //observe
    }); //each
  }
}

function getLandingSheet(list) {
  var isPCAT = $$('a[rel="pcat-ajax-menu"]').length > 0,
      aLink = list ? list : ( isPCAT ? $$('a[rel*="ajax-menu"]') : $$('h2 > a[rel|="ajax-menu"]') ),
      mainContent = $('main-content');
      
  if (aLink) {
    aLink.each(function (a) {
      a.observe('click', function (e) {
        Event.stop(e);
        var self = this,
            href = self.readAttribute("href");

        if (!self.hasClassName('current')) { // Check on the current top catalog
          aLink.invoke('removeClassName', 'current');
          self.addClassName('current');
          if (ajaxingContent != null) {
            ajaxingContent.transport.abort();
          }
          ajaxingContent = new Ajax.Request(href, {
            parameters: {
              debug: 'off',
              ajax: '1'
            }, onLoading: function () {
              mainContent.update(loaderBar);
            }, onFailure: function () {
              mainContent.update('');
            }, onSuccess: function (res) {
              mainContent.update(res.responseText);
            }
          }); //ajax
        }
      }); //observe
    }); //each
  }
}

function chooseProductImage() {
  var thumbnails = $$('a.open-large-image'), 
      container = $('product-image'),
      noImage = '<span class="not-img">no image</span>',
      i = 1,
      cls = 'active',
      clearSelected = function(t){
        thumbnails.invoke('removeClassName', cls);
        t.addClassName(cls);
     };
     
    if(container && thumbnails) {
        if(container.down('img')){
           PRODUCT_IMAGES['prodThumb1'] = container.down('img');
        }    

    thumbnails.each(function (thumb) {
      thumb.writeAttribute('id', 'prodThumb' + (i++));
      thumb.observe('click', function (e) {
        e.stop();

        if(this.hasClassName(cls)){
           return false;
        }else if( PRODUCT_IMAGES[thumb.id] && $('active-main-image') ){
           $('active-main-image').replace(PRODUCT_IMAGES[thumb.id]);
           var span = $('active-main-image').next('span', 0);
           if(!thumb.down('img').alt.blank()){
             span.show().update(thumb.down('img').alt);
           }else{
              span.hide();
           }
           clearSelected(thumb);
           return false; 
        }
     
        // thumbnails
        clearSelected(thumb);
        var self = this,
          src = self.href,
          alt = self.down('img', 0).readAttribute('alt'),
          boxSize = self.rel.toQueryParams(),
          boxheight = boxSize.height,
          img = new Image();

        img.onerror = function () {
          try {
            container.update(noImage);
          } catch (err) {
            alert('img.onerror = ' + err);
          }
        }
        img.onload = function () {
          try {
            if($('loader')){ $('loader').remove() };
            container.writeAttribute('style', '');
            container.insert({
              bottom: new Element('span').addClassName('media-caption-text').update(alt)
            });
            $(img).show();
          } catch (err) {
            alert('img.onload = ' + err);
          }
        }

        var callImage = function () {
          $(img).hide().writeAttribute('id', 'active-main-image');
          img.src = src;
          container.insert({
            top: img
          });
        PRODUCT_IMAGES[thumb.id] = img;
        }

        // container
        container.setStyle({
          height: boxheight + 'px'
        });
        container.update('');
        container.insert(new Element('div',{ id: 'loader'}).addClassName('not-img').update(loaderBar));
        callImage.delay(1);
      }); //observe
    }); //each
  }
}

function countryMap(){
  var a = $$('[rel="flag"]');
  var map = $('map');
  if(a && map){
     var m = map.down('img',0),
         defaultSrc = m.readAttribute('src');

     a.each(function(o){
         var c = o.className || o.readAttribute('name');

         o.observe('mouseover', function(e){
            var src = defaultSrc.replace(/map_\w+\./i, 'map_'+c+'.');
            m.writeAttribute("src", src);
         })
         o.observe('mouseout', function(e){
            m.writeAttribute("src", defaultSrc);
         });
     });
  }
}

function contactUsCheck() {
    var form = $('contact-us');
    var inputs = $$('input[type="text"]');
    var cls = 'invalid';
    var subject = $('inquiry');
    var name = $('name');
    var contactInfoTele = $('contact_info_tele');
    var contactInfoEmail = $('contact_info_email');
    var pttr = /(?:^$)|(?:^(?:\+\d{2}|00\d{2})?[ ]?[1-9]+$)/; /*-- DK doesn't need to limit the digit /(?:^$)|(?:^(?:\+\d{2}|00\d{2})?[ ]?[1-9]{1}[0-9]{7,}$)/ --*/
    var emailPttr = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;

    if(form && inputs){
        form.observe('submit', function(e) {
           
             inputs.invoke('removeClassName', cls);
             [subject, name, contactInfoTele].each(function(i){
                    if(i.value.blank()) { 
                         i.addClassName(cls);
                         e.stop();
                    }
             });

             //remove space in telephone no
             if(!pttr.test(contactInfoTele.value.replace(/\s/g, ""))){
                     contactInfoTele.addClassName(cls);
                      e.stop();
             }
             if(contactInfoEmail.value && !emailPttr.test(contactInfoEmail.value)){
                     contactInfoEmail.addClassName(cls);
                      e.stop();
             }
        });
    }
}
function externalLinksGAObeserve(){
    var links = $$('a, area');
        links.each(function(a){
            var href = a.href,
                isDownLoadContent = ( a.rel == 'product-attachments' );

            if(  !href.match( location.hostname ) || isDownLoadContent ){

                 var _clickFx = function(e){

                      e.stop();
      
                          var attrHref = a.readAttribute('href'),
                              category = isDownLoadContent ? attrHref.split(/\./).reverse()[0] : 'Out going link',
                              action = isDownLoadContent ? 'Download' : 'Click',
                              options = {
                                  label: attrHref,
                                  callback: function(){
                                      location.href = href;
                                  }
                              };

                      GAtracking( category, action, options);

                 };
                 a.stopObserving('click');
                 a.observe('click', _clickFx);

             }
    });
}
function GAtracking(category, action, options){

    var _undefined = function(arg){
          return typeof(arg) == 'undefined' || arg.blank();
        },
        pageTracker = typeof(_gat) != 'undefined' ? _gat._getTracker(_gaID) : false,
        opt = options || {};

    if( _undefined(category) || _undefined(action) || !pageTracker ){
        if( typeof(opt.callback) == 'function' ) {
            return  opt.callback();
        }
    }

    pageTracker._trackEvent(category, action, opt.label);
    
    if( typeof(opt.callback) == 'function' ) {
       opt.callback.delay(1);
    }

}
