var prodprev = Class.create({
  initialize: function(img, showOnLeft) {
    this.img = $(img);
    var href = this.img.up('a').href;
    var divforie = new Element('div',{style:'margin:0; padding:0; height:117px;'});
    this.img.up(1).replaceChild(divforie,this.img.up('a'));
    this.img.setStyle({cursor:'pointer'});
    this.img.observe('mouseover',this.over.bind(this));
    this.img.observe('mouseout',this.out.bind(this));
    this.img.observe('click',function(){self.location.href=href});

    var left = showOnLeft?160:-265;
    this.container = new Element('div',{style:'display:none;left:'+left+'px;z-index:5'});
    this.container.className = 'prodprev';
    this.prevpic = new Element('img', { src:this.img.src.replace('131x119','235x210')});
    this.container.insert(this.prevpic);

    var div = new Element('div',{style:'position:relative;'});
    div.insert(this.container);

    divforie.insert(div);
    divforie.insert(this.img);
  },

  over:function() {
    this.container.show();
  },
  out:function() {
    this.container.hide();
  }
});

var cybox = Class.create({
  initialize: function(img) {
    this.detailbox = Builder.node('table',{cellpadding:0,cellspacing:0,border:0},
      Builder.node('tbody',[
        Builder.node('tr',[
          Builder.node('td',{className:'detail-left-top'}),
          Builder.node('td',{className:'detail-center-top'}),
          Builder.node('td',{className:'detail-right-top'})]
        ),
        Builder.node('tr',[
          Builder.node('td',{className:'detail-left-center'}),
          Builder.node('td',{className:'detail-center-center'}),
          Builder.node('td',{className:'detail-right-center'})]
        ),
        Builder.node('tr',[
          Builder.node('td',{className:'detail-left-bottom'}),
          Builder.node('td',{className:'detail-center-bottom'}),
          Builder.node('td',{className:'detail-right-bottom'})]
        )]
      ));
    $(document.body).insert({bottom:this.detailbox});
    this.detailbox = $(this.detailbox);
    this.detailbox.setStyle({position:'absolute'}).hide();
    this.container = this.detailbox.select('.detail-center-center')[0];
    
    this.img = $(img);
    this.img.observe('click',this.show.bind(this));
    $(document.body).observe('click',this.hide.bind(this));
  },
  show:function(e) {
    e.stop();
    this.container.setStyle({width:'150px',height:'150px'}).update();
    this.pos();

    this.imgObj = new Image();
    this.imgObj.src = this.img.src.replace(/235x210px/,'max');
    this.checkImg.bind(this).delay(0.5);
  },
  pos:function() {
    var wdim = document.viewport.getDimensions();
    var edim = this.detailbox.getDimensions();
    var scroll = document.viewport.getScrollOffsets();
    var top = scroll.top + Math.floor((wdim.height-edim.height)/2);
    var left = scroll.left + Math.floor((wdim.width-edim.width)/2);
    this.detailbox.setStyle({top:top+'px',left:left+'px'}).show();
  },
  hide:function(){
    this.detailbox.hide();
  },
  checkImg:function() {
    if (this.imgObj.complete) {
      this.detailbox.hide();
      this.container.setStyle({width:'auto',height:'auto'}).insert(Builder.node('div',{className:'close'},['Schließen ',Builder.node('span','X')])).insert(this.imgObj);
    
      this.pos();
    } else this.checkImg.bind(this).delay(0.1);
  }
});

Event.observe(window,'load',function(){
  if ($$('.product-pic')) $$('.product-pic a img').each(function(img,i){new prodprev(img,(i+1)%3);});
  if ($('prod-detail-pics')) {
    new cybox($('prod-detail-pics').down('img'));
    if ($$('div.pics')) {
      $('prod-detail-pics').select('.pics a').each(function(a){
        $(a).observe('click',function(e){
          var a = e.element();
          e.stop();
          $('prod-detail-pics').select('.pics img.active')[0].removeClassName('active');
          a.addClassName('active');
          $('prod-detail-pics').down('img').src = a.src.replace('160x130','235x210');
        });
      });
    }
  }
});

    function pop(file)
    {
    img3dwindow = window.open(file,"img3d","width=480, height=350, resizable=no, toolbar=no, location=no, status=no");
    img3dwindow.focus();
    return false;
    }