var scrollToElem = function() {
};
var Scrollpane = null;
var cornerType = '';
var onModell = 2;
var onForm = 'straight';
var laguna_desc = '<b>Laguna:</b><br/> Das Modell Laguna besteht aus weich fallenden Sitz- und Rückenkissen, die zum Lümmeln einladen. Die Kissenfüllungen sind aus einem Daunen-Schaumstoffgemisch, die durch Kanalunterteilungen in Form gehalten werden. Sowohl die Rückenkissen als auch die Sitzkissen können durch gelegentliches Ausklopfen wieder in ihre Ursprungsform gebracht werden. Für junge und jung gebliebene Genießer einer gemütlichen Atmosphäre.';
var delgano_desc = "<b>Delgano:</b><br/> Unser Modell Delgano ist für fast jeden Zweck geeignet. Ob Fernsehabende zu zweit, Gäste oder auch mal als Schlafplatz für Ausnahmesituationen. Die Sitz- und Rückenkissen sind aus hochwertigem HR-Kaltschaum gefertigt und werden durch einen Federrahmen im Korpus unterstützt. Etwaige Faltenbildungen, die dem sehr kubisch-geradlinigem Design geschuldet sind, können mit einem sprichwörtlichen Handstreich wieder glattgezogen werden.";
var mono_desc = '<b>Mono:</b><br/>Das Modell Mono stellt die kubischste aller möglichen Bauformen dar. Im Korpus ist ein Federkern mit hochwertigen HR-Kaltschaum kombiniert, der einen guten Sitzkomfort ermöglicht. Die Rückenlehne ist direkt in den Korpus integriert und ebenfalls mit Kaltschaum gefüllt. Diese besonders reduzierte und kubische Formensprache ist ideal für bequeme sitzende Tätigkeiten, bei denen man weder einschlafen noch nicht wieder hochkommen möchte.';
var montana_desc = '<b>Montana:</b><br/>Das Modell Montana ist eine Abwandlung unseres Modells Laguna. Wie auch die Laguna bestehen die Kissenfüllungen aus einem Daunen-Schaumstoffgemisch, aber im Gegensatz zur sehr "loungigen" Laguna werden die Kissen bei der Montana deutlich praller und somit fester befüllt. Die Rückenkissen werden zusätzlich zum Daunen-Schaumstoffgemisch mit einem Kaltschaumrücken formstabil gehalten. Das gelegentliche "Formklopfen" der Laguna ist bei einer Montana somit nicht nötig.';
var genua_desc = '<b>Genua:</b><br/>Unser Modell Genua besteht aus einem domninanten Korpus, der aus einem Federkern und darüber einer HR-Kaltschaumschicht aufgebaut ist. Das darauf liegende flache Kaltschaumkissen wird grundsätzlich durchgesteppt und dient als bequemes Sitzkissen. Der Sitzkomfort ist trotz des schmalen Sitzkissens sehr gut mit dem des Modells Delgano vergleichbar.';


var chooseCornerL = function(type) {
  cornerType = type;
  scrollToElem('panel-click-l-corner-2');
};

MM_Cfg_001 = {
  Scrollpane: null,
  
  cornerSize: {
    w: 20,
    h: 20,
    t: 40
  },
  cornerSizeH: {
    w: 32,
    h: 32,
    t: 27
  },
  cornerPositions: {
    l: {
      a: {
        a: 56,
        b: 68,
        c: 68
      },
      b: {
        a: 31,
        b: 31,
        c: 41
      },
      c: {
        a: 5,
        b: 5,
        c: 5
      }
    },
    r: {
      a: {
        a: 60,
        b: 72,
        c: 72
      },
      b: {
        a: 35,
        b: 35,
        c: 46
      },
      c: {
        a: 9,
        b: 9,
        c: 9
      }
    }
  },
  
  
  evtTopMouseEnter: function() {
    var imgName = this.id.replace(/-cor/, 'cor');
    
    switch (this.id) {
      case 'lcorner-a':
      case 'rcorner-a':
      case 'lcorner-b':
      case 'rcorner-b':
      case 'lcorner-c':
      case 'rcorner-c':
        this.childImg.a.fireEvent('show');
        this.childImg.b.fireEvent('show');
        this.childImg.c.fireEvent('show');
        this.style.backgroundImage = '';
        break;
        
      default:
        this.style.backgroundImage = 'url(/media/masscouch/common/konfigurator/auswahl/' + imgName + '-h.gif)';
        break;
        
      case 'lcorner-a':
      case 'rcorner-a':
        this.childImg.b.fireEvent('showLeft');
        this.childImg.c.fireEvent('showRight');
        break;
      case 'lcorner-b':
      case 'rcorner-b':
        this.childImg.c.fireEvent('showLeft');
        this.childImg.a.fireEvent('showRight');
        break;
      case 'lcorner-c':
      case 'rcorner-c':
        this.childImg.a.fireEvent('showLeft');
        this.childImg.b.fireEvent('showRight');
        break;
    }
  },
  evtCornerImgEnter: function(e) {
    e.stop();
    var toElement = $('panel-modell-' + onModell + '-' + this.id.split(/_/)[1]);
    MM_Cfg_001.Scrollpane.Fx.toElement(toElement);
  },
  evtCornerImgClick: function(e) {
    e;
    $(onForm).removeClass('act');
    onForm = this.id.split(/_/)[1];
    this.getParent().id = onForm;
    $(onForm).addClass('act');
    
    var toElement = $('panel-modell-' + onModell + '-' + onForm);
    MM_Cfg_001.Scrollpane.lastClickedPanel = toElement;
    MM_Cfg_001.Scrollpane.Fx.toElement(toElement);
    MM_Cfg_001.Scrollpane.justClicked = true;
    
    //    var imgName = this.id.split(/_/)[1].replace(/-cor/, 'cor');
    //    this.getParent().style.backgroundImage = 'url(/media/masscouch/common/konfigurator/auswahl/' + imgName + '-exp.png)';
  },
  evtCornerImgHide: function(e) {
    //    alert('hide ...');
    var initSize = MM_Cfg_001.cornerSize;
    
    var iAm = this.id.split(/-/).pop()
    var iAmC = this.id.substring(4, 5);
    var aIs = this.getParent().id.split(/-/).pop();
    
    //    alert(this.id);
    if ('sub_' + this.getParent().id == this.id) {
      var initSize = MM_Cfg_001.cornerSizeH;
    }
    
    //    alert(this.style.right);
    //    alert(iAm + ', ' + iAmC + ', ' + aIs);
    
    switch (iAmC) {
      case 'l':
        this.Fx.start({
          top: initSize.t,
          height: initSize.h,
          width: initSize.w,
          opacity: 0,
          left: parseInt(MM_Cfg_001.cornerPositions[iAmC][iAm][aIs])
        });
        break;
      case 'r':
        this.Fx.start({
          top: initSize.t,
          height: initSize.h,
          width: initSize.w,
          opacity: 0,
          right: parseInt(MM_Cfg_001.cornerPositions[iAmC][iAm][aIs])
        });
        break;
    }
  },
  
  evtCornerImgShow: function() {
    //    alert('show ...');
    var initSize = {
      w: 20,
      h: 20,
      t: 40
    };
    
    var iAm = this.id.split(/-/).pop()
    var iAmC = this.id.substring(4, 5);
    var aIs = this.getParent().id.split(/-/).pop();
    
    var initPositions = {
      l: {
        a: {
          a: 56,
          b: 68,
          c: 68
        },
        b: {
          a: 31,
          b: 31,
          c: 41
        },
        c: {
          a: 5,
          b: 5,
          c: 5
        }
      },
      r: {
        a: {
          a: 60,
          b: 72,
          c: 72
        },
        b: {
          a: 35,
          b: 35,
          c: 46
        },
        c: {
          a: 9,
          b: 9,
          c: 9
        }
      }
    };
    
    if ('sub_' + this.getParent().id == this.id) {
      var initSize = {
        w: 32,
        h: 32,
        t: 27
      };
    }
    
    this.Fx.set({
      top: initSize.t,
      height: initSize.h,
      width: initSize.w,
      opacity: 1
    });
    
    switch (iAmC) {
      case 'l':
        this.Fx.set({
          top: initSize.t,
          height: initSize.h,
          width: initSize.w,
          opacity: 1,
          left: initPositions[iAmC][iAm][aIs]
        });
        
        this.Fx.start({
          top: 27,
          height: 32,
          width: 32,
          left: {
            c: -5,
            b: 29,
            a: 64
          }[iAm]
        });
        break;
      case 'r':
        this.Fx.set({
          top: initSize.t,
          height: initSize.h,
          width: initSize.w,
          opacity: 1,
          right: initPositions[iAmC][iAm][aIs]
        });
        
        this.Fx.start({
          top: 27,
          height: 32,
          width: 32,
          right: {
            c: -5,
            b: 29,
            a: 64
          }[iAm]
        });
        break;
    }
  },
  
  evtCornerImgShowLeft: function() {
    var extraPad = Math.floor((parseInt(this.getParent().getCoordinates().width) - 74) / 2);
    
    this.Fx.set({
      left: extraPad,
      top: 40,
      height: 19,
      width: 19,
      opacity: 1
    });
    this.Fx.start({
      height: 32,
      width: 32,
      left: extraPad - 13,
      top: 27
    });
  },
  evtCornerImgShowRight: function() {
    var extraPad = Math.floor((parseInt(this.getParent().getCoordinates().width) - 74) / 2);
    
    this.Fx.set({
      left: extraPad + 54,
      top: 40,
      height: 19,
      width: 19,
      opacity: 1
    });
    this.Fx.start({
      height: 32,
      width: 32,
      top: 27
    });
  },
  evtTopMouseLeave: function() {
    var imgName = this.id.replace(/-cor/, 'cor');
    this.setStyle('background-image', 'url(/media/masscouch/common/konfigurator/auswahl/' + imgName + '-exp.gif)');
    this.childImg.a.fireEvent('hide');
    this.childImg.b.fireEvent('hide');
    this.childImg.c.fireEvent('hide');
  },
  setUp: function() {
    $(onForm).addClass('act');
    $('modell-' + onModell).addClass('act');
    
    
    scrollToElem = function(to) {
      var toElement = $(to);
      MM_Cfg_001.Scrollpane.lastClickedPanel = toElement;
      MM_Cfg_001.Scrollpane.Fx.toElement(toElement);
    }
    
    
    var sample = MM_Cfg_001.Scrollpane.getFirst().getFirst();
    var coords = sample.getCoordinates();
    var contCoords = MM_Cfg_001.Scrollpane.getCoordinates();
    var allPanels = MM_Cfg_001.Scrollpane.getElements('.panel');
    
    MM_Cfg_001.Scrollpane.originalWidth = MM_Cfg_001.Scrollpane.getStyle('width');
    MM_Cfg_001.Scrollpane.lastClickedPanel = null;
    
    var triggerUp = new Element('div', {
      style: 'position: absolute; top: 0; left: 0; height: 40px; width: ' + contCoords.width + 'px;'
    });
    var triggerLeft = new Element('div', {
      style: 'position: absolute; top: 0; right: 0; height: ' + contCoords.height + 'px; width: 40px'
    });
    var triggerDown = new Element('div', {
      style: 'position: absolute; bottom: 0; left: 0; height: 40px; width: ' + contCoords.width + 'px;'
    });
    var triggerRight = new Element('div', {
      style: 'position: absolute; top: 0; left: 0; height: ' + contCoords.height + 'px; width: 40px'
    });
    
    
    MM_Cfg_001.Scrollpane.sFx = new Fx.Morph(MM_Cfg_001.Scrollpane, {
      wait: false
    });
    this.showUse(onModell, 'click');
    
    [triggerUp, triggerLeft, triggerDown, triggerRight].each(function(el) {
      el.setStyles({
        cursor: 'pointer',
        'background-color': '#ffffff',
        opacity: 0.8
      })
      
      el.resetTimeout = function() {
        if (this.expTimeout) {
          window.clearTimeout(this.expTimeout);
        }
      }
      
      el.expand = function() {
        MM_Cfg_001.Scrollpane.sFx.start({
          width: 1000,
          left: 0 - Math.floor((1000 - MM_Cfg_001.Scrollpane.originalWidth) / 2),
          'padding-left': Math.floor(MM_Cfg_001.Scrollpane.getStyle('padding-left')) + Math.floor((1000 - MM_Cfg_001.Scrollpane.originalWidth) / 2)
        });
      }
      
      el.defalte = function() {
        MM_Cfg_001.Scrollpane.sFx.start({
          width: MM_Cfg_001.Scrollpane.originalWidth,
          left: 0,
          'padding-left': Math.floor(MM_Cfg_001.Scrollpane.getStyle('padding-left')) - Math.floor((1000 - MM_Cfg_001.Scrollpane.originalWidth) / 2)
        });
      }
      
      el.addEvents({
        mouseenter: function() {
          this.setStyles({
            'background-color': '#eeeeff',
            opacity: 0.5
          });
          
          this.resetTimeout();
          this.expTimeout = window.setTimeout(this.expand.bind(this), 2000);
        },
        mouseleave: function() {
          el.setStyles({
            'background-color': '#ffffff',
            opacity: 0.8
          })
          this.resetTimeout();
          this.defalte();
        }
      })
    });
    
    //        MM_Cfg_001.Scrollpane.getParent().adopt(triggerUp, triggerLeft, triggerDown, triggerRight);
    //        MM_Cfg_001.Scrollpane.getParent().adopt(triggerLeft, triggerRight);
    
    var ml = parseInt(sample.getStyle('margin-left')) + parseInt(sample.getStyle('padding-left')) + parseInt(sample.getStyle('border-left-width'));
    var mb = parseInt(sample.getStyle('margin-bottom')) + parseInt(sample.getStyle('padding-bottom')) + parseInt(sample.getStyle('border-bottom-width'));
    
    var spacePerPanel = (ml * 2) + coords.width + (parseInt(sample.getStyle('border-left-width')) * 2);
    var panelsPerRow = Math.floor(coords.height / spacePerPanel);
    var rowHeight = (ml * 2) + coords.height + (parseInt(sample.getStyle('border-bottom-width')) * 2);
    
    ml = Math.floor(contCoords.width / 2) - Math.floor(coords.width / 2) - Math.floor(parseInt(sample.getStyle('border-left-width')) / 2);
    mb = Math.floor(contCoords.height / 2) - Math.floor(coords.height / 2) - Math.floor(parseInt(sample.getStyle('border-bottom-width')) / 2);
    
    MM_Cfg_001.Scrollpane.Fx = new Fx.Scroll(MM_Cfg_001.Scrollpane, {
      duration: 150,
      wait: false,
      offset: {
        x: -ml,
        y: -mb
      }
    });
    if ((el = $('panel-modell-' + onModell + '-' + onForm))) {
      MM_Cfg_001.Scrollpane.Fx.toElement(el);
    }
  },
  showUse: function(modell, state) {
    modell = parseInt(modell);
    sw_modell = 1;
    
    switch (modell) {
      // Laguna
      case 5:
      case 6:
        sw_modell = 2;
        md_description = laguna_desc;
        break;
      // Delgano
      case 2:
      case 1:
        sw_modell = 1;
        md_description = delgano_desc;
        break;
      // Mono
      case 3:
      case 4:
        sw_modell = 3;
        md_description = mono_desc;
        break;
      // Montana
      case 9:
      case 10:
        sw_modell = 5;
        md_description = montana_desc;
        break;
      // Genua
      case 7:
      case 8:
        sw_modell = 4;
        md_description = genua_desc;
        break;
    }
    hl_row = $('modell_' + sw_modell + '_row');
    
    switch (state) {
      case 'over':
        if (modell != onModell) {
          hl_row.setStyle('background-color', '#eeeeee');
          md = $('modell_description');
          md.set('html', md_description);
        }
        break;
      case 'leave':
        if (modell != onModell) {
          hl_row.setStyle('background-color', '#ffffff');
        }
        break;
      case 'click':
        //    $('modell_' + "1" + '_row').setStyle('background-color', '#ffffff');
        
        for (var cnt = 1; cnt <= 4; cnt++) {
          if (cnt != modell) {
            $('modell_' + cnt + '_row').setStyle('background-color', '#ffffff');
          }
        }
        md = $('modell_description');
        md.set('html', md_description);
        hl_row.setStyle('background-color', '#eeeeee');
        break;
    }
  }
}

window.addEvent('domready', function() {
  MM_Cfg_001.Scrollpane = $('scroll-pane');
  MM_Cfg_001.setUp(MM_Cfg_001.Scrollpane);
  MM_Cfg_001.Scrollpane.lastClickedPanel = $('panel-modell-' + onModell + '-' + onForm);
  
  if ((el = $('types'))) {
    el.addEvents({
      mouseleave: function() {
        if (MM_Cfg_001.Scrollpane.justClicked) {
          MM_Cfg_001.Scrollpane.justClicked = false;
        }
        else {
          if (MM_Cfg_001.Scrollpane.lastClickedPanel) {
            MM_Cfg_001.Scrollpane.Fx.toElement(MM_Cfg_001.Scrollpane.lastClickedPanel);
          }
        }
      }
    });
  }
  
  if ((el = $('modells'))) {
    el.addEvents({
      mouseleave: function() {
        if (MM_Cfg_001.Scrollpane.justClicked) {
          MM_Cfg_001.Scrollpane.justClicked = false;
        }
        else {
          if (MM_Cfg_001.Scrollpane.lastClickedPanel) {
            if ((toElement = $('panel-modell-' + onModell + '-' + onForm))) {
              MM_Cfg_001.Scrollpane.Fx.toElement(toElement);
            }
          }
        }
      }
    });
  }
  
  
  $$('#modells li').each(function(el) {
  
    el.addEvents({
      mouseout: function() {
        if (whichModell = $('panel-modell-' + (this.id.split(/-/)[1]) + '-' + onForm)) {
          outModell = (this.id.split(/-/)[1]);
          MM_Cfg_001.showUse(outModell, 'leave');
        }
      },
      click: function() {
        $('modell-' + onModell).removeClass('act');
        onModell = (this.id.split(/-/)[1]);
        this.addClass('act');
        if (whichModell = $('panel-modell-' + (this.id.split(/-/)[1]) + '-' + onForm)) {
          outModell = (this.id.split(/-/)[1]);
          MM_Cfg_001.showUse(outModell, 'click');
        }
        if ((toElement = $('panel-modell-' + onModell + '-' + onForm))) {
          MM_Cfg_001.Scrollpane.lastClickedPanel = toElement;
          MM_Cfg_001.Scrollpane.Fx.toElement(toElement);
          MM_Cfg_001.Scrollpane.justClicked = true;
        }
      },
      mouseover: function() {
        if (whichModell = $('panel-modell-' + (this.id.split(/-/)[1]) + '-' + onForm)) {
          overModell = (this.id.split(/-/)[1]);
          MM_Cfg_001.showUse(overModell, 'over');
        }
        if (!MM_Cfg_001.Scrollpane.justClicked) {
          if ((toElement = $('panel-modell-' + (this.id.split(/-/)[1]) + '-' + onForm))) {
            MM_Cfg_001.Scrollpane.Fx.toElement(toElement);
          }
        }
      }
    });
  });
  
  
  
  $$('#types li').each(function(el) {
    var childs = el.getElements('img');
    el.childImg = {};
    
    if (childs.length > 0) {
      childs.each(function(el) {
        switch (el.id.substr(4, 1)) {
          case 'l':
            el.setStyles({
              opacity: 0,
              position: 'absolute',
              left: 0,
              top: 0,
              'z-index': 1000
            });
            break;
          case 'r':
            el.setStyles({
              opacity: 0,
              position: 'absolute',
              right: 0,
              top: 0,
              'z-index': 1000
            });
            break;
        }
        el.Fx = new Fx.Morph(el, {
          duration: 200,
          wait: false
        });
        
        el.getParent().childImg[el.id.split(/-/).pop()] = el;
        
        el.addEvents({
          mouseenter: MM_Cfg_001.evtCornerImgEnter.bindWithEvent(el),
          click: MM_Cfg_001.evtCornerImgClick.bindWithEvent(el),
          hide: MM_Cfg_001.evtCornerImgHide,
          show: MM_Cfg_001.evtCornerImgShow,
          showLeft: MM_Cfg_001.evtCornerImgShowLeft,
          showRight: MM_Cfg_001.evtCornerImgShowRight
        });
      });
      
      el.addEvents({
        mouseenter: MM_Cfg_001.evtTopMouseEnter,
        mouseleave: MM_Cfg_001.evtTopMouseLeave
      });
      
      el.fireEvent('mouseleave');
    }
    
    
    el.addEvents({
      mouseout: function() {
      },
      click: function() {
        $(onForm).removeClass('act');
        
        onForm = this.id;
        this.addClass('act');
        
        if ((toElement = $('panel-modell-' + onModell + '-' + onForm))) {
          MM_Cfg_001.Scrollpane.lastClickedPanel = toElement;
          MM_Cfg_001.Scrollpane.Fx.toElement(toElement);
          MM_Cfg_001.Scrollpane.justClicked = true;
        }
      },
      mouseover: function() {
        if (!MM_Cfg_001.Scrollpane.justClicked) {
          if ((toElement = $('panel-modell-' + onModell + '-' + this.id))) {
            MM_Cfg_001.Scrollpane.Fx.toElement(toElement);
          }
        }
      }
    });
  });
});