
BUF = function() {

  var $D = YAHOO.util.Dom;
  var $E = YAHOO.util.Event;
  var $ = $D.get;
  
  return {

    /**
    * Setup and/or display a lightbox with the Gallery images
    */
    gallery: function(defaultImg) {

      var r = $D.getClientRegion();

      if(!$('mask')) {
        var mask = document.createElement('div'),
            stage = document.createElement('div'),
            head = document.createElement('h2'),
            close = document.createElement('div'),
            caption = document.createElement('p'),
            img = new Image,
            next = document.createElement('div'),
            prev = document.createElement('div');

        mask.id = 'mask';
        stage.id = 'stage';
        img.id = 'stage-image';
        next.id = 'next';
        prev.id = 'prev';
        close.id = 'close';
        caption.id = 'caption';

        $D.setXY(mask, [0,0]);
        $D.setStyle(mask, 'opacity', 0);
        $('wrapper').appendChild(mask);

        head.appendChild(document.createTextNode(''));
        close.appendChild(document.createTextNode('schließen'));
        next.appendChild(document.createTextNode('nächstes Bild'));
        prev.appendChild(document.createTextNode('vorheriges Bild'));

        $E.on(['prev', 'next'], 'click', function(e) {
          $E.stopEvent(e);
          var imgs = $('images').getElementsByTagName('img'),
              spans, n;
          for (var i = 0; i < imgs.length; i++) {
            if('http://' + window.location.hostname + $D.getAttribute(imgs[i], 'data-detail') == img.src) {
              if(this.id == 'next') {
                n = i+1;
              } else {
                n = i-1;
              }
              if(imgs[n]) {
                var newImage = new Image();
                $E.on(newImage, 'load', function(e) {
                  img.src = this.full.src;
                  if($D.getAttribute(this.thumb, 'alt')) {
                    caption.innerHTML = $D.getAttribute(this.thumb, 'alt');
                  } else {
                    caption.innerHTML = '';
                  }
                }, {'thumb': imgs[n], 'full': newImage}, true);
                newImage.src = $D.getAttribute(imgs[n], 'data-detail');
              }
              break;
            }
          };
        });

        $E.on('close', 'click', function(e) {
          $E.stopEvent(e);
          var bg = new YAHOO.util.Anim([mask, stage], { opacity: { to: 0 }}, 0.25);
          bg.onComplete.subscribe(function(e) {
            $D.setStyle([mask, stage], 'display', 'none');
          });
          bg.animate();
        });

        $E.on(img, 'load', function(e) {

          $D.setStyle(this, 'width', 'auto');
          $D.setStyle(this, 'height', 'auto');

          var r = $D.getRegion(this);

          var stageResize = new YAHOO.util.Anim(stage, { 
              height: { to: r.height+100 } 
          }, 0.25);
          stageResize.animate();
        });

        $E.on(window, 'resize', function(e) {
          $D.setStyle(mask, 'width', $D.getDocumentWidth()+'px');
          $D.setStyle(mask, 'height', $D.getDocumentHeight()+'px');
          $D.setX(stage, ($D.getViewportWidth()/2)-240);
        });

      } else {
        mask = $('mask');
        stage = $('stage');
        img = $('stage-image');
        next = $('next');
        prev = $('prev');
        close = $('close');
        caption = $('caption');
      }

      $D.setStyle(mask, 'width', $D.getDocumentWidth()+'px');
      $D.setStyle(mask, 'height', $D.getDocumentHeight()+'px');

      var bg = new YAHOO.util.Anim(mask, { opacity: { from: 0, to: 0.4 }}, 0.25);
      bg.onStart.subscribe(function(e) {
        $D.setStyle([mask, stage], 'display', 'block');
        $D.setStyle($D.getChildren(stage), 'display', 'none');
        $D.setStyle(stage, 'opacity', 1);
        $D.setStyle(stage, 'width', 1+'px');
        $D.setStyle(stage, 'height', 1+'px');
        $D.setStyle(stage, 'borderWidth', 0);
        $D.setStyle(stage, 'left', r.width/2+'px');
        $D.setStyle(stage, 'top', r.height/2+'px');

        var bd = document.body;

        if(YAHOO.env.ua.ie || YAHOO.env.ua.gecko) {
          bd = document.documentElement;
        }

        if(bd.scrollTop > 0 || bd.scrollLeft > 0) {
          var scrollAnim = new YAHOO.util.Scroll(bd, {
            scroll: { to: [0, 0] }
          }, 0.5, YAHOO.util.Easing.easeBoth);
          scrollAnim.animate();
        }

      });
      bg.onComplete.subscribe(function(e) {
        var stageOpen = new YAHOO.util.Anim(stage, { 
            width: { from: 1, to: 440 }, 
            height: { from: 1, to: 608 }, 
            borderWidth: { from: 0, to: 20, unit: 'px' }, 
            top: { from: $D.getViewportHeight()+1000/2, to: 1050 },
            left: { from: $D.getViewportWidth()/2, to: ($D.getViewportWidth()/2)-220 }
        }, 0.25);
        stageOpen.onStart.subscribe(function(e) {
          if(!$D.getFirstChild(stage)) {
            $('wrapper').appendChild(stage);
          }
        });
        stageOpen.onComplete.subscribe(function(e) {
          if(!$D.getFirstChild(stage)) {
            stage.appendChild(head);
            stage.appendChild(close);
            stage.appendChild(img);
            stage.appendChild(next);
            stage.appendChild(prev);
            stage.appendChild(caption);
          } else {
            $D.setStyle($D.getChildren(stage), 'display', 'block');
            img.src = null;
          }
          var imgs = $('images').getElementsByTagName('img');
          if(imgs.length == 1) {
            $D.setStyle([next, prev], 'opacity', 0);
          }
          img.src = $D.getAttribute(defaultImg, 'data-detail');
          if($D.getAttribute(defaultImg, 'alt')) {
            caption.innerHTML = $D.getAttribute(defaultImg, 'alt');
          }
        });
        stageOpen.animate();
      });
      bg.animate();

    }, // end gallery()

    init: function() {

      if($('secondary')) {
        var links = $('secondary').getElementsByTagName('a');
        for(i = 0; i < links.length; i++) {
          links[i].innerHTML += '&nbsp;&raquo;';
        }
      }


      if($('login-details') && $('save')) {

        if($('save').checked == true) {
          $D.setStyle('login-details', 'display', 'block');
        } else {
          $D.setStyle('login-details', 'display', 'none');
        }

        $E.on('save', 'click', function(e) {
          if(this.checked == true) {
            $D.setStyle('login-details', 'display', 'block');
          } else {
            $D.setStyle('login-details', 'display', 'none');
          }
        });

      }

      $E.onAvailable('hours-switch', function(e) {
        $E.on(this, 'click', function(e) {
          $E.stopEvent(e);
          var t = $('hours-popup');
          if($D.hasClass(t, 'hidden')) {
            $D.removeClass(t, 'hidden');
            $D.addClass(this, 'active');
          } else {
            $D.addClass(t, 'hidden');
            $D.removeClass(this, 'active');
          }
        });
      });

      // $E.onAvailable('zoom', function(e) {
      //   $E.on(this, 'click', function(e) {
      //     $E.stopEvent(e);
      //     var t = $E.getTarget(e);
      //     if(t.tagName.toLowerCase() == 'img') {
      //       BUF.gallery(t);
      //     } else {
      //       BUF.gallery(t.getElementsByTagName('img')[0]);
      //     }
      //   });
      // });

      $E.onAvailable('images', function(e) {
        $E.on(this, 'click', function(e) {
          $E.stopEvent(e);
          var t = $E.getTarget(e);
          if(t.tagName.toLowerCase() == 'img') {
            BUF.gallery(t);
          } else {
            BUF.gallery(t.getElementsByTagName('img')[0]);
          }
        });
      });

      $E.onAvailable('price-table', function(e) {
        if(this.offsetWidth > 480) {
          $D.addClass(this, 'overflow');
          $D.setStyle(this.parentNode.parentNode, 'overflow', 'hidden');
        }
      });

      $E.onAvailable('login-option', function(e) {
        $D.setStyle(this, 'cursor', 'pointer');
        $E.on(this, 'click', function(e) {
          if($D.getStyle('login', 'display') == 'block') {
            $D.setStyle($('login-switch').getElementsByTagName('p'), 'display', 'block');
            $D.setStyle('login', 'display', 'none');
            $D.setStyle('login-switch', 'cursor', 'auto');
          } else {
            $D.setStyle($('login-switch').getElementsByTagName('p'), 'display', 'none');
            $D.setStyle('login', 'display', 'block');
            $D.setStyle('login-switch', 'cursor', 'auto');
          }
        });
      });

      $E.onAvailable('no_login', function(e) {
        $E.on([$('no_login'), $('with_login')], 'change', function(e) {
          if(this.value == 0) {
            $D.setStyle($('login-switch').getElementsByTagName('p'), 'display', 'none');
            $D.setStyle('login', 'display', 'block');
            $D.setStyle('login-switch', 'cursor', 'auto');
          } else {
            $D.setStyle($('login-switch').getElementsByTagName('p'), 'display', 'block');
            $D.setStyle('login', 'display', 'none');
            $D.setStyle('login-switch', 'cursor', 'auto');
          }
        });
      });

      if($('login-switch')) {

        $D.setStyle('login', 'display', 'none');
        $D.setStyle('login-switch', 'cursor', 'pointer');
        $D.setStyle($('login-switch').getElementsByTagName('p'), 'display', 'block');

        $E.on('login-switch', 'click', function(e) {
          $E.stopEvent(e);
          $D.setStyle($('login-switch').getElementsByTagName('p'), 'display', 'none');
          $D.setStyle('login', 'display', 'block');
          $D.setStyle('login-switch', 'cursor', 'auto');
        });

      }

      if($('shipping')) {

        if($('shipping_address').checked == true) {
          $D.setStyle('shipping', 'display', 'block');
        } else {
          $D.setStyle('shipping', 'display', 'none');
        }

        $E.on('shipping_address', 'click', function(e) {
          if(this.checked == true) {
            $D.setStyle('shipping', 'display', 'block');
          } else {
            $D.setStyle('shipping', 'display', 'none');
          }
        });

      }

      if($('change_password')) {

        if($('change_password').checked == true) {
          $D.setStyle('login-details', 'display', 'block');
        } else {
          $D.setStyle('login-details', 'display', 'none');
        }

        $E.on('change_password', 'click', function(e) {
          if(this.checked == true) {
            $D.setStyle('login-details', 'display', 'block');
          } else {
            $D.setStyle('login-details', 'display', 'none');
          }
        });

      }

    }
  };

}();

YAHOO.util.Event.onDOMReady(BUF.init);

