MTJax.SwapperUtil = {
   image: {}
  ,urlConfig: {}
  ,urlInfo: {}
  ,txtConfig: {}
  ,timbers: {}
  ,milkboxTriggers: {}
  ,instances: []
  
  ,onPT: 'eic'
  ,onTimber: 'Eiche'
  
  ,tp: {}
  ,pt: {
     EuAhorn: 'ahe'
    ,Bergulme: 'bul'
    ,Rotbuche: 'buc'
    ,Erle: 'erl'
    ,Eiche: 'eic'
    ,EicheRauch: 'eig'
    ,EicheKalk: 'eik'
    ,EicheRust: 'eir'
    ,EicheBeizWenge: 'eiw'
    ,EicheBeizWeiss: 'ewg'
    ,Esche: 'esh'
    ,EscheBeizPalisander: 'esp'
    ,Hickory: 'hic'
    ,Kernahorn: 'kah'
    ,Rotkernbuche: 'kbu'
    ,AmKirsche: 'kia'
    ,EuKirsche: 'kie'
    ,AmNussbaumD: 'nua'
    ,FrNussbaum: 'nuf'
    ,ItNussbaum: 'nui'
    ,Roteiche: 'rei'
  }
  /**
   *
    ''	 => '',
    'bul'  => '',
    'buc'	 => '',
    'erl'	 => '',
    'eic'  => '',
    'eig'  => '',
    'eik'  => '',
//    'eim'  => 'EicheMoor',
    'eir'  => '',
    'eiw'  => '',
    'ewg'  => '',
    'esh'  => '',
    'esp'	 => '',
    'hic'  => '',
    'kah'  => '',
    'kbu'  => '',
    'kia'  => '',
    'kie'  => '',
    'nua'  => '',
    'nuf'  => '',
    'nui'  => '',
    'rei'  => '',
   */

  ,preLoad: []
  ,Milkbox: null
  ,rxPT: /([^\/])([\b\/-])([^i][a-z]{2}|[^i][a-z]{2}\d)([\b\/\.])/

  ,init: function()
  {
    for (timber in this.pt)
    {
      this.tp[this.pt[timber]] = timber;
    }
    
    this.pt.Birke = 'ahe';
  }
};

MTJax.Swapper = {
   ImgContainer: null
  ,imgContainers: []
  ,LoadAssets: []
  ,Active: null
  ,CfgButton: null
  ,Magnifier: null
  ,Triggers: []
  ,elTriggerCS: null
  ,elTriggerBR: null
  ,swapSet: ''
  ,onMod: 'Bamaco'
  ,requestName: null

  ,timberTriggers: []
  ,timberTrigIndex: {}
  ,timberTrigAct: null

  ,timberChangers: []
  ,rxPT: MTJax.SwapperUtil.rxPT

  ,switchToTimber: function(timber)
  {
    if (timber.massframe_ident)
    {
      timber = timber.massframe_ident;
    }
    tp = MTJax.SwapperUtil.pt[timber] + '2';
    
    this.onTimber = timber;
    this.onPT = tp;
    
    for (mod in MTJax.SwapperUtil.image[this.swapSet])
    {
      var e = MTJax.SwapperUtil.image[this.swapSet][mod].length;
      for (var i = 0; i < e; i ++)
      {
        MTJax.SwapperUtil.image[this.swapSet][mod][i] = MTJax.SwapperUtil.image[this.swapSet][mod][i].replace(this.rxPT, '$1$2' + tp + '$4');
      }
    }
    
    this.resetTimber();
  }

  ,toResetTImber: null
  ,resetTimber: function(mod)
  {
    mod = [mod, this.onMod].pick();
    
    if (this.toResetTImber) window.clearTimeout(this.toResetTImber);
    this.toResetTImber = window.setTimeout(this.doResetTimber.bind(this), 500);
    
    var onTimber = MTJax.SwapperUtil.tp[MTJax.SwapperUtil.pt[this.onTimber]];
    
    if ((el = $('info-prinzipfoto')) && this.onTimber)
    {
      el.set('text', MTJax.SwapperUtil.imageInfo[this.swapSet][mod].replace(/{timber}/, MTJax.Lang.get('.timber.'+onTimber.toLowerCase()+'.display')));
    }
  }

  ,doResetTimber: function()
  {
    this.setBackgrounds();
  }

  ,hoverTimber: function(timber)
  {
    try
    {
      if (this.toResetTImber) window.clearTimeout(this.toResetTImber);
      tp = MTJax.SwapperUtil.pt[timber] + '2';
      this.setBackgrounds(null, tp)
    }
    catch (e)
    {
      console.log(e);
    }
  }

  ,setBackgrounds: function(mod, tp)
  {
    mod = arguments[0] ? arguments[0] : this.onMod;
		console.log(mod, arguments, this.onMod);
    var e = this.imgContainers.length;

    for (var i = 0; i < e; i ++)
    {
      var url = MTJax.SwapperUtil.image[this.swapSet][mod][i];
      if (arguments[1])
      {
        url = url.replace(this.rxPT, '$1$2' + tp + '$4');
      }
      this.imgContainers[i].setStyle('backgroundImage', 'url(' + url + ')');
      this.imgContainers[i].setStyle('backgroundPosition', MTJax.SwapperUtil.imagePos[this.swapSet][i]);
    }
  }

  ,switchToSet: function(set)
  {
    this.swapSet = set;
    this.setBackgrounds();
  }

  ,initialize: function(el)
  {
    MTJax.SwapperUtil.instances.push(this);
    this.onMod        = /\bmod-([\w-]+)\b/.exec(el.className)[1];
    this.onTimber     = /timber-([\w-]*)\b/.exec(el.className)[1];
    console.log(el.className, this.onTimber);
    this.requestName  = /req-([\w-]*)\b/.exec(el.className)[1];
    this.id           = el.get('id');
    
    this.switchToSet(/swap-([\w-]*)\b/.exec(el.className)[1]);

    this.imgContainers = el.getElements('.swapperLayer');
    //console.log(el, this.onMod, this.swapSet, this.imgContainers);

    this.Triggers = el.getElements('a.trigger');
    this.ImgContainer = el.getFirst(); if (!this.ImgContainer) return;
    this.CfgButton = $(el.id + '-cfgButton');

    if (this.CfgButton)
    {
      this.CfgButton.addEvent('click', function(){
        Cart.update([{name: this.requestName, value: this.Active.Modell}]);
        this.onMod = this.Active.Modell;
        this.CfgButton.getParent().setStyle('display', 'none');
      }.bind(this));
    }

    this.Magnifier = el.getElement('.magnify');
    this.timberChangers = $$('img.ptchg, div.ptchg');

    this.ImgContainer.setStyle('curosr', 'pointer');

    if ((modelListing = el.getElement('.modelListing')))
    {
      modelListing.setStyles({
         position: 'relative'
        ,top: -15
        ,left: -15
        ,padding: 15
        ,cursor: 'default'
      })
      modelListing.addEvent('click', function(e){ e.stopPropagation(); });
    }

    this.infoRevealer = el.getElement('.mod-infos');
    if (this.infoRevealer)
    {
      var revTrigger = this.infoRevealer.getFirst();
      var revContainer = revTrigger.getNext();
      revContainer.setStyles({
         overflow: 'hidden'
        ,height: 0
        ,display: ''
      });
      el.set('tween', {chain: 'cancel'});
      revContainer.set('tween', {chain: 'cancel'});
      revTrigger.set('tween', {chain: 'cancel'});
      revTrigger.store('status', 'closed');
      revTrigger.store('revContainer', revContainer);
      revTrigger.store('swapContainer', el);
      revTrigger.addEvent('click', function(){
        var swapContainer = this.retrieve('swapContainer');
        var revContainer = this.retrieve('revContainer');
        var status = this.retrieve('status');
        switch (status)
        {
          case 'closed' :
            swapContainer.tween('margin-bottom', 20);
            this.tween('top', 6);
            revContainer.tween('height', revContainer.scrollHeight);
            this.src = '/theme/com.fueg/img/mod-info-opened.gif';
            this.store('status', 'opened');
            break;
          case 'opened' :
            swapContainer.tween('margin-bottom', 34);
            this.tween('top', 11);
            revContainer.tween('height', 0);
            this.src = '/theme/com.fueg/img/mod-info-closed.gif';
            this.store('status', 'closed');
            break;
        }
      });
    }


    this.infoContainer = $(this.id+'-infoContainer');
    this.fxScrollInfo = null;
    if (this.infoContainer)
    {
      var cld = this.infoContainer.getChildren();
      var tmp = {max: 0, act: cld[0]};
      console.log(cld.length);
      if (0 < cld.length)
      {
        cld.setStyles({
          overflow: 'hidden'
        });
        
        cld.each(function(el)
        {
          return;
          if (el.scrollHeight)
          {
            this.act = el;
            this.max = el.scrollHeight;
          }
        }.bind(tmp));
        
        tmp.act.inject(cld[0], 'before');
        this.infoContainer.setStyles({
           height: tmp.max
          ,overflow: 'hidden'
        })
        
        cld.setStyles({
          overflow: 'hidden',
          display: ''
        });
        
        cld.each(function(el)
        {
          if (this.max < el.scrollHeight)
          {
            this.max = el.scrollHeight;
          }
        }.bind(tmp))
        
        cld.setStyles({
          overflow: '',
          display: 'none'
        });
        tmp.act.setStyle('display', 'block');
        console.log(cld, tmp);
        
        this.infoContainer.setStyle('height', tmp.max);
        this.infoContainer.setStyles({
           height: tmp.max
          ,overflow: ''
        })
      }
    }

    window.addEvent('chooseLayer_changedTimber', this.switchToTimber.bind(this));

    document.getElements('input[id^=stellform_]').each(function(el){
      el.store('swapper', this);
      el.addEvents({
        click: function(){
          this.retrieve('swapper').switchToSet(this.get('value'));
        }
      })
    }.bind(this));
    
    document.getElements('input[id^=holzident_]').each(function(el){
      el.store('swapper', this);
      el.getParent().addEvents({
         mouseover: function(){
          this.getFirst().retrieve('swapper').hoverTimber(this.get('id').split(/_/).pop());
         }
        ,mouseleave: function(){
          this.getFirst().retrieve('swapper').resetTimber();
        }
      })
      el.addEvents({
        click: function(){
          this.retrieve('swapper').switchToTimber(this.get('id').split(/_/).pop());
        }
      })
    }.bind(this));

    el.getElements('div[class^=timber-]').each(function(el)
    {
      el.timber = /timber-([a-z]{3})\b/.exec(el.className)
      if (!el.timber) return;

      el.Swapper = this;
      el.timber = el.timber.pop();
      this.timberTriggers.push(el);
      this.timberTrigIndex[el.timber] = el;
      if (el.hasClass('swapper-timber-act')) this.timberTrigAct = el;

      el.addEvents({
        click: function(e)
        {
          e.stop();
          this.useTimber = this.timber;
          if ('beds' == this.Swapper.swapSet)
          {
            if ('eic' == this.useTimber || 'ahe' == this.useTimber)
            {
              //this.useTimber += '1';
            }
          }
          var oldSrc = this.Swapper.ImgContainer.getStyle('backgroundImage');

          if (oldSrc.search(/closet/))
          {
            switch (this.timber)
            {
              case 'eic' :
              case 'ahe' :
                this.useTimber += '2';
                break;
            }
          }
          var newSrc = oldSrc.replace(this.Swapper.rxPT, '$1$2' + this.useTimber + '$4');
          this.Swapper.ImgContainer.setStyle('backgroundImage', newSrc);
          this.Swapper.markTimber();
          this.Swapper.timberChangers.each(function(el)
          {


            switch (el.get('tag'))
            {
              case 'img' :
                el.src = el.src.replace(this.Swapper.rxPT, '$1$2' + this.useTimber + '$4');
                break;
              case 'div' :
                el.setStyle('background-image', el.getStyle('background-image').replace(this.Swapper.rxPT, '$1$2' + this.useTimber + '$4'));
                break;
            }

            if (el.tipPrepped)
            {
              el.store('tip:text', el.retrieve('tip:text').replace(this.Swapper.rxPT, '$1$2' + this.useTimber + '$4'));
              el.store('tip:title', el.retrieve('tip:title').replace(this.Swapper.rxPT, '$1$2' + this.useTimber + '$4'));
            }
          }.bind(this));
        }.bindWithEvent(el)
      });
    }.bind(this));


    if ((this.elTriggerDrawersOn = document.getElement('a.swapper-trigger-drawer-on')))
    {
      this.elTriggerDrawersOn.addEvent('click', function(){
        this.ImgContainer.setStyle('background-image', this.ImgContainer.getStyle('background-image').replace(/schraenke\d/, 'schraenke2'));
      }.bind(this));
    }


    if ((this.elTriggerDrawersOff = document.getElement('a.swapper-trigger-drawer-off')))
    {
      this.elTriggerDrawersOff.addEvent('click', function(){
        this.ImgContainer.setStyle('background-image', this.ImgContainer.getStyle('background-image').replace(/schraenke\d/, 'schraenke1'));
      }.bind(this));
    }


    if (this.timberTrigAct)
    {
      this.initTimberSwitch();
      this.timberChangers.each(function(el)
      {
        switch (el.get('tag'))
        {
          case 'img' :
            el.src = el.src.replace(this.Swapper.rxPT, '$1$2' + this.timber + '$4');
            break;
          case 'div' :
            el.setStyle('background-image', el.getStyle('background-image').replace(this.Swapper.rxPT, '$1$2' + this.timber + '$4'));
            break;
        }
      }.bind(this.timberTrigAct));
    }

    if ((this.elTriggerBR = el.getParent().getParent().getParent().getElement('div.trigger-backrest')))
    {
      this.elTriggerBR.Swapper = this;
      this.elTriggerBR.isOn = true;

      this.elTriggerBR.setStyles({
        cursor: 'pointer'
      });

      this.elTriggerBR.addEvents({
        click: function()
        {
          if (this.isOn)
          {
            this.isOn = false;
            this.getElement('.checked').setStyle('display', 'none');
            this.Swapper.swapSet += '-nb';
          }
          else
          {
            this.isOn = true;
            this.getElement('.checked').setStyle('display', 'block');
            this.Swapper.swapSet = this.Swapper.swapSet.split('-').shift();
          }

          this.Swapper.Active.fireEvent('click');
        }
      });
    }

    if ((this.elTriggerCS = el.getParent().getParent().getParent().getElement('div.trigger-corner-seat')))
    {
      this.elTriggerCS.Swapper = this;

      this.elTriggerCS.setStyles({
        cursor: 'pointer'
      });

      this.elTriggerCS.addEvents({
        click: function()
        {
          switch (this.Swapper.swapSet)
          {
            case 'FG_Item::BENCH_CR' :
              this.getElement('.checked').setStyle('display', 'none');
              this.Swapper.swapSet = 'FG_Item::BENCH_SR';
              break;
            case 'FG_Item::BENCH_SR' :
              this.getElement('.checked').setStyle('display', 'block');
              this.Swapper.swapSet = 'FG_Item::BENCH_CR';
              break;
            case 'FG_Item::BENCH_CF' :
              this.getElement('.checked').setStyle('display', 'none');
              this.Swapper.swapSet = 'FG_Item::BENCH_SF';
              break;
            case 'FG_Item::BENCH_SF' :
              this.getElement('.checked').setStyle('display', 'block');
              this.Swapper.swapSet = 'FG_Item::BENCH_CF';
              break;
          }
          this.Swapper.Active.fireEvent('click');
        }
      });
    }

    for (img in MTJax.SwapperUtil.image[this.swapSet])
    {
      MTJax.SwapperUtil.preLoad.push(MTJax.SwapperUtil.image[this.swapSet][img]);
    }

    if (!this.CfgButton)
    {
      this.CfgButton = {};
    }

    if (this.Magnifier)
    {
//  		this.Magnifier.href = 'javascript:void(0);';
//  		this.Magnifier.addEvent('click', function(){this.ImgContainer.fireEvent('click');}.bind(this));
    }

    this.Triggers.each(function(el)
    {
      el.Modell = /modell_([\w-]*)\b/i.exec(el.className)[1];
      el.Swapper = this;

      if (el.hasClass('active'))
      {
        this.Active = el;
      }
    }.bind(this));

    this.Triggers.addEvents({
      mouseenter: function()
      {
        window.clearTimeout(this.Swapper.tsOnModReset);
        this.Swapper.setBackgrounds(this.Modell);
        this.Swapper.displayInfo(this.Modell);
        //this.Swapper.ImgContainer.setStyle('backgroundImage', 'url(' + MTJax.SwapperUtil.image[this.Swapper.swapSet][this.Modell] + ')');
        this.Swapper.markTimber();
        var onTimber = MTJax.SwapperUtil.tp[MTJax.SwapperUtil.pt[this.Swapper.onTimber]];
        if ((el = $('info-prinzipfoto')) && this.Swapper.onTimber)
        {
          el.set('text', MTJax.SwapperUtil.imageInfo[this.Swapper.swapSet][this.Modell].replace(/{timber}/, MTJax.Lang.get('.timber.'+onTimber.toLowerCase()+'.display')));
        }

        return;
        if (this.Swapper.Active !== this)
        {
          if (this.timeout) window.clearTimeout(this.timeout);
          this.timeout = window.setTimeout(function(){this.fireEvent('click')}.bind(this), 400);
        }
      }

      ,mouseleave: function()
      {
        this.Swapper.startOnModReset();
        this.Swapper.restore();
        window.clearTimeout(this.timeout);
      }

      ,click: function(e)
      {
        e.stopPropagation();
        //this.fireEvent('click');

        if (this.Swapper.Active)
        {
          this.Swapper.Active.toggleClass('active'); 
        }
        this.Swapper.Active = this;
        this.Swapper.Active.toggleClass('active');

        if ('element' == typeOf(this.Swapper.CfgButton))
        {
          this.Swapper.CfgButton.getElement('em').set('html', MTJax.SwapperUtil.txtConfig[this.Swapper.swapSet][this.Modell]);
          this.Swapper.CfgButton.fireEvent('click');
        }
      }

      ,click_: function()
      {
        this.blur();

        if (this.Swapper.Active === this && MTJax.SwapperUtil.urlConfig[this.Swapper.swapSet][this.Modell])
        {
//          document.location.href = MTJax.SwapperUtil.urlConfig[this.Swapper.swapSet][this.Modell];
        }

        this.Swapper.Active.toggleClass('active');
        this.Swapper.Active = this;
        this.toggleClass('active');

        this.Swapper.ImgContainer.setStyle('backgroundImage', 'url(' + MTJax.SwapperUtil.image[this.Swapper.swapSet][this.Modell] + ')');
        //if (this.Swapper.CfgButton) this.Swapper.CfgButton.href = MTJax.SwapperUtil.urlConfig[this.Swapper.swapSet][this.Modell];
        if (this.Swapper.Magnifier) this.Swapper.Magnifier.href = MTJax.SwapperUtil.urlInfo[this.Swapper.swapSet][this.Modell];
        if (this.Swapper.CfgButton)
        {
          //this.Swapper.CfgButton.getParent().setStyle('display', 'block');
          this.Swapper.CfgButton.getElement('em').set('html', MTJax.SwapperUtil.txtConfig[this.Swapper.swapSet][this.Modell]);
        }
        this.Swapper.markTimber();

        if (MTJax.SwapperUtil.detailPics[this.Swapper.swapSet][this.Modell])
        {
          var e = MTJax.SwapperUtil.detailPics[this.Swapper.swapSet][this.Modell].thumb.length;
          var elThumbs = $$('.details div div');
          for (var i = 0; i < e; i ++)
          {
            var thumb = MTJax.SwapperUtil.detailPics[this.Swapper.swapSet][this.Modell].thumb[i];
            var hover = MTJax.SwapperUtil.detailPics[this.Swapper.swapSet][this.Modell].hover[i];
//            console.log(thumb, hover, elThumbs[i]);
            if ((el = elThumbs[i]))
            {
              console.log(el);
              el.store('tip:title', hover);
              el.setStyle('background-image', 'url(' + thumb + ')');
            }
          }
        }
      }
    });
  }

  ,tsOnModReset: null

  ,doOnModReset: function()
  {
    $(this.id).getElement('a.trigger.modell_'+this.onMod).fireEvent('click');
    $(this.id).getElement('a.trigger.modell_'+this.onMod).fireEvent('mouseenter');
    this.CfgButton.getParent().setStyle('display', 'none');
  }

  ,startOnModReset: function()
  {
    window.clearTimeout(this.tsOnModReset);
    this.tsOnModReset = window.setTimeout(this.doOnModReset.bind(this), 5000);
  }

  ,toTimberSwitch: null

  ,doTimberSwitch: function()
  {
    var el = this.timberTrigAct.getParent().getNext();
    if (!el)
    {
      el = this.timberTrigAct.getParent().getParent().getFirst();
    }
    el.getFirst().fireEvent('click');
  }

  ,initTimberSwitch: function()
  {
    return;
    if (this.toTimberSwitch) window.clearTimeout(this.toTimberSwitch);
    this.toTimberSwitch = window.setTimeout(this.doTimberSwitch.bind(this), 8000);
  }

  ,displayInfo: function(mod)
  {
    if ((el = $(this.id+'-mod-'+mod)))
    {
      el.getParent().getChildren().setStyle('display', 'none');
      el.setStyle('display', '');
    }
  }
  

  ,markTimber: function()
  {
    try
    {
      if (!this.timberTrigAct) return;
      this.initTimberSwitch();

      timber = this.rxPT.exec(this.ImgContainer.getStyle('backgroundImage'));
      if (!timber[3]) return;
      timber = timber[3];
      this.timberTrigAct.addClass('swapper-timber');
      this.timberTrigAct.removeClass('swapper-timber-act');

      if (this.timberTrigIndex[timber])
      {
        this.timberTrigAct = this.timberTrigIndex[timber];
        this.timberTrigAct.addClass('swapper-timber-act');
      }

      this.timberChangers.each(function(el)
      {
        el.src = el.src.replace(this.Swapper.rxPT, '$1$2' + this.timber + '$4');
      }.bind({Swapper: this, timber: timber}));
    }
    catch (e)
    {
      console.log(this.timberTrigAct);
    }
  }

  ,restore: function()
  {
    if (this.Active)
    {
      this.Active.fireEvent('mouseenter'); 
    }
  }
};
MTJax.Swapper = new Class(MTJax.Swapper);

window.addEvent('domready', function()
{
  document.getElements('div.swapper').each(function(el) { new MTJax.Swapper(el); });
  MTJax.SwapperUtil.init();
});