/*
 *
 *specific function for the webshop
 *
 */
Ext.ns('beeline.web');


// update current elements
beeline.web.bpmupdate = function(classNames, parms){
  var el = Ext.select('.' + classNames.split(',')[0]).item(0);
  if (!el)     
    return;
  var id = el.dom.getAttribute('id');
  var type = id.substring(0, 1);
  id = id.substring(1);
  if (!id)     
    return;
  Ext.Ajax.request({
    url: bpmPrefixURL + '/' + id + '.ajax' + parms,
    success: function(Response){
      if (type == 'r') {
        // replace whole div
        Ext.DomHelper.insertAfter(el, Response.responseText);
        el.remove();
      }
      else {
        // update content of div
        el.update(Response.responseText);
      }
      list = classNames.split(',');
      list.shift();
      if (list.length) beeline.web.bpmupdate(list.join(','), '');
    }
  });
}

// hide inactive elements  
beeline.web.hideInactive = function(el){

  el.setStyle('display', 'block');
  
  //hide previous divs
  var prev = el.prev('div');
  var itemSelected = 0;
  while (prev != null) {
    itemSelected = itemSelected + 1;
    prev.setStyle('display', 'none');
    prev = prev.prev('div');
  }
  // hide next divs	
  var next = el.next('div');
  while (next != null) {
    next.setStyle('display', 'none');
    next = next.next('div');
  }
  
  // change CSS activeTab class
  var list = el.prev('.tabs');
  if (list == null) {
    return;
  }
  next = list.first('li');
  
  var i = 0;
  while (next != null) {
    if (itemSelected == i) {
      next.radioClass('activeTab');
      break;
    }
    i = i + 1;
    next = next.next('li');
  }
  // has children tabs???
  if (el.select('.tabs').getCount()) {
    var liElement = el.select('li').item(0);
    liElement.radioClass('activeTab');
    var divElement = liElement.parent().next('div');
    divElement.setStyle('display', 'block');
  }
  //beeline.web.init();
}

beeline.web.bpmload = function(divId, parms){

  var el = Ext.get(divId);
  if (!el)     
    return;
  el.hide();
  
  // remove first char of number
  divId = divId.substring(1);
  
  // if not exist load
  if (el.dom.childNodes.length < 2) {
    //if (typeof parms == "undefined"){
    if (parms == '') {
      parms = "?bpmload=1";
    }
    else {
      parms = parms + "&bpmload=1";
    }
    
    Ext.Ajax.request({
      url: bpmPrefixURL + '/' + divId + '.ajax' + parms,
      success: function(XMLHttpRequest){
        var newEl = Ext.DomHelper.insertBefore(el, XMLHttpRequest.responseText);
        el = el.replaceWith(newEl).setStyle('display', 'block');
        
        var FirstElement = el.first();
        if (FirstElement != null) {
          var classNames = FirstElement.dom.className;
          if (classNames != null) {
            var prefixArray = classNames.split(" ");
            
            for (var i = 0; i < prefixArray.length; i++) {
              var funcName = 'beeline.web.' + prefixArray[i] + 'Init(el);';
              try {
                eval(funcName);
              } 
              catch (err) {
                //alert('beeline.web.bpmload: ' + err);
              }
            }
          }
          
        }
        // init loaded html
        if (el.select('.tabs').getCount()) beeline.web.hideInactive(el);
        beeline.web.init(divId);
      }
    });
  }
  else { // just set as active
    Ext.Ajax.request({
      url: bpmPrefixURL + '/' + divId + '.ajax',
      success: function(XMLHttpRequest){
        // do nothing ignore results
      }
    });
  }
  el.show();
  beeline.web.hideInactive(el);
}

beeline.web.sliderInit = function(SlideShow){
  if (!SlideShow.hasClass('slider')) {
    SlideShow = beeline.web.findSingleElement(SlideShow, '.slider');
    if (SlideShow === null) {
      return;
    }
  }
  
  var JSONConfig = beeline.web.getJSONfromTitle(SlideShow);
  new beeline.web.Carousel(SlideShow.dom.id, JSONConfig);
}


beeline.web.imageSliderInit = function(SlideShow){
  if (!SlideShow.hasClass('imageSlider')) {
    SlideShow = beeline.web.findSingleElement(SlideShow, '.imageSlider');
    if (SlideShow === null) {
      return;
    }
  }
  
  var JSONConfig = beeline.web.getJSONfromTitle(SlideShow);
  new beeline.web.ImageCarousel(SlideShow.dom.id, JSONConfig);
}
beeline.web.findSingleElement = function(el, nameOfClass){
  var SingleElement = null
  var CompositeElements = el.select(nameOfClass);
  var items = CompositeElements.getCount();
  
  if (items > 0) {
    if (items = 1) {
      SingleElement = CompositeElements.item(0);
    }
    else {
      alert('beeline.web.findSingleElement: find to many items.');
    }
  }
  return SingleElement;
}

beeline.web.getJSONfromTitle = function(el){
  var json = el.getAttribute('title');
  var JSON = null;
  
  if (json.length > 0) {
    try {
      var JSON = Ext.util.JSON.decode(json);
      el.dom.removeAttribute('title');
    } 
    catch (err) {
      alert('beeline.web.getJSONfromTitle: ' + err);
    }
  }
  return JSON;
}


beeline.web.init = function(divId){
  if (typeof bpminit == 'function') {
    if (typeof divId == "undefined") {
      divId = "";
    }
    bpminit(divId); // define in bpmLib.js
  }
}

beeline.web.initActiveTab = function(){

  Ext.select('.tabs').each(function(el){
    var next = el.next('div');
    var item = 0;
    
    while (next != null) {
      if (next.dom.innerHTML.length > 5) {
        next.setStyle('display', 'block');
        break;
      }
      if (next.getStyle('display') == 'block') {
        break;
      }
      item++;
      next = next.next('div');
    }
    
    var next = el.first('li');
    var itemSelected = 0;
    while (next != null) {
      if (itemSelected == item) {
        next.radioClass('activeTab');
        break;
      }
      itemSelected = itemSelected + 1;
      next = next.next('li');
    }
  });
}

beeline.web.initSlideShows = function(){
  Ext.select('.slider').each(function(el){
    beeline.web.sliderInit(el);
  });
  
  Ext.select('.imageSlider').each(function(el){
    beeline.web.imageSliderInit(el);
  });
}

beeline.web.mailto = function(){
  Ext.select('.secret').each(function(el, c, idx){
    var address = (el.first().dom.innerHTML);
    el.first().remove();
    el.set({
      href: 'mailto:' + beeline.web.hex2text(address)
    });
    el.dom.innerHTML = beeline.web.hex2text(el.dom.innerHTML);
    el.show();
  });
}

beeline.web.hex2text = function(hexValue){
  var textValue = "";
  var index = 0;
  
  while (hexValue.length > index) {
    textValue = textValue + String.fromCharCode(parseInt(hexValue.substring(index, index + 2), 16));
    index = index + 2;
  }
  return textValue;
}


Ext.onReady(function(){
  beeline.web.init();
  beeline.web.initActiveTab();
  beeline.web.initSlideShows();
  beeline.web.mailto();
});


beeline.web.Carousel = Ext.extend(Ext.util.Observable, {
  interval: 0,
  transitionDuration: 1,
  transitionType: 'fade', //'carousel', 
  transitionEasing: 'easeOut',
  itemSelector: 'div.sliderItem',
  activeSlide: 0,
  autoPlay: true,
  showPlayButton: false,
  pauseOnNavigate: false,
  wrap: false,
  freezeOnHover: false,
  navigationOnHover: false,
  hideNavigation: false,
  sliceClass: 'sliderItem',
  endless: true,
  indexNavigation: true,
  maxHeight: 0,
  
  
  constructor: function(elId, config){
    config = config || {};
    Ext.apply(this, config);
    beeline.web.Carousel.superclass.constructor.call(this, config);
    
    this.addEvents('beforeprev', 'prev', 'beforenext', 'next', 'change', 'play', 'pause', 'freeze', 'unfreeze', 'beforeselect');
    
    this.el = Ext.get(elId);
    
    this.slides = this.els = [];
    
    if (this.autoPlay || this.showPlayButton) {
      this.wrap = true;
    };
    
    if (this.autoPlay && config.showPlayButton === undefined) {
      this.showPlayButton = true;
    }
    
    this.initDom();
    this.initMarkup();
    this.initEvents();
    this.initHeight();
    
    this.addListener('beforenext', function(){
      if (this.endless && this.carouselSize == (parseInt(this.activeSlide) + 1)) {
        var firstElement = this.slides.shift(); // this.slides[(parseInt(this.activeSlide)+1)%this.originalCaroselSize];
        var lastElement = this.els.slidesWrap.appendChild(firstElement); //.dom.cloneNode(true));  
        this.slides.push(lastElement);
        
        this.els.slidesWrap.setLeft((this.activeSlide * -this.slideWidth) + this.slideWidth);
        this.activeSlide = this.activeSlide - 1;
        
        if (this.indexNavigation) {
          var first = this.els.navItems.shift();
          var last = this.els.indexNavigation.appendChild(first);
          this.els.navItems.push(last);
        }
      }
    });
    this.addListener('beforeprev', function(){
      if (this.endless && 0 == (parseInt(this.activeSlide))) {
        this.els.slidesWrap.setLeft(-this.slideWidth);
        this.activeSlide = 1;
        
        var lastElement = this.slides.pop();
        var firstElement = this.els.slidesWrap.insertFirst(lastElement);
        this.slides.unshift(firstElement);
        
        if (this.indexNavigation) {
          var last = this.els.navItems.pop();
          var first = this.els.indexNavigation.insertFirst(last);
          this.els.navItems.unshift(first);
        }
      }
      return true;
    });
    
    this.addListener('beforeselect', function(selectedNumber, currentNumber){
      if (this.endless) {
        var slideTo = 0;
        while (slideTo < this.carouselSize) {
          if (selectedNumber == this.els.navItems[slideTo].dom.innerHTML) break;
          slideTo++;
        }
        this.setSlide(slideTo);
      }
      else {
        this.setSlide(parseInt(selectedNumber) - 1);
      }
    });
    
    
    if (this.carouselSize > 0) {
      this.refresh();
    }
  },
  
  initDom: function(){
    var childDiv = this.el.first('div');
    var maxHeight = 0;
    while (childDiv != null) {
      if (maxHeight < childDiv.getHeight(true)) {
        maxHeight = childDiv.getHeight(true);
      }
      childDiv.addClass(this.sliceClass);
      childDiv = childDiv.next('div');
    }
    //this.el.setHeight(maxHeight+this.maxHeight);
    this.el.setHeight(this.maxHeight);
    //alert(this.maxHeight+'+'+this.maxHeight+'='+maxHeight+this.maxHeight);	    
  },
  
  initHeight: function(){
    var maxH = 0;
    var currentHeight = 0;
    
    this.el.select('.' + this.sliceClass).each(function(SingleSlice){
      currentHeight = SingleSlice.getHeight(true);
      if (currentHeight > maxH) {
        maxH = currentHeight;
      }
    });
    
    this.el.select('.' + this.sliceClass).each(function(SingleSlice){
      SingleSlice.setHeight(maxH);
    });
    this.els.container.setHeight(maxH);
    this.els.slidesWrap.setHeight(maxH);
    return maxH;
  },
  
  initMarkup: function(){
  
    var items = this.el.select(this.itemSelector);
    if (!this.maxHeight) {
      alert('maxHeight not set');
    }
    if (this.el.getHeight() == this.maxHeight) {
      //text & images
      this.el.setHeight(this.maxHeight);
    }
    else {
      //images
      this.el.setHeight(this.el.getHeight() + this.maxHeight);
    }
    
    this.carouselSize = 0;
    
    this.els.container = Ext.DomHelper.append(this.el, {
      cls: 'ux-carousel-container'
    }, true);
    this.els.slidesWrap = Ext.DomHelper.append(this.els.container, {
      cls: 'ux-carousel-slides-wrap'
    }, true);
    
    this.els.navigation = Ext.DomHelper.append(this.els.container, {
      cls: 'ux-carousel-nav'
    }, true).hide();
    this.els.caption = Ext.DomHelper.append(this.els.navigation, {
      tag: 'h2',
      cls: 'ux-carousel-caption'
    }, true);
    this.els.navNext = Ext.DomHelper.append(this.els.navigation, {
      tag: 'a',
      href: '#',
      cls: 'ux-carousel-nav-next'
    }, true);
    if (this.showPlayButton) {
      this.els.navPlay = Ext.DomHelper.append(this.els.navigation, {
        tag: 'a',
        href: '#',
        cls: 'ux-carousel-nav-play'
      }, true)
    }
    this.els.navPrev = Ext.DomHelper.append(this.els.navigation, {
      tag: 'a',
      href: '#',
      cls: 'ux-carousel-nav-prev'
    }, true);
    
    if (this.indexNavigation) {
      this.els.indexNavigation = Ext.DomHelper.append(this.els.container, {
        cls: 'ux-carousel-indexnav'
      }, true);
      
      this.els.navItems = [];
      var i = 0;
      while (i < items.getCount()) {
        var currItem = Ext.DomHelper.append(this.els.indexNavigation, {
          tag: 'a',
          href: '#',
          cls: 'ux-carousel-nav-item'
        }, true);
        currItem.dom.innerHTML = i + 1;
        this.els.navItems.push(currItem);
        i++;
      }
    }
    
    // set the dimensions of the container
    this.el.clip();
    this.slideWidth = this.el.getWidth(true);
    this.slideHeight = this.el.getHeight(true);
    
    this.els.container.setStyle({
      width: this.slideWidth + 'px',
      height: this.slideHeight + 'px'
    });
    
    this.els.caption.setWidth((this.slideWidth - (this.els.navNext.getWidth() * 2) - (this.showPlayButton ? this.els.navPlay.getWidth() : 0) - 20) + 'px')
    
    items.appendTo(this.els.slidesWrap).each(function(CurrentItem, currentObject, itemIndex){
      CurrentItem = CurrentItem.wrap({
        cls: 'ux-carousel-slide'
      });
      this.slides.push(CurrentItem);
      CurrentItem.setWidth(this.slideWidth + 'px').setHeight(this.slideHeight + 'px');
    }, this);
    this.carouselSize = this.slides.length;
    this.originalCaroselSize = this.carouselSize;
    if (this.navigationOnHover) {
      this.els.navigation.setStyle('top', (-1 * this.els.navigation.getHeight()) + 'px');
    }
    //this.el.clip();
  },
  
  initEvents: function(){
    this.els.navPrev.on('click', function(ev){
      ev.preventDefault();
      var target = ev.getTarget();
      target.blur();
      if (Ext.fly(target).hasClass('ux-carousel-nav-disabled'))         
        return;
      this.prev();
    }, this);
    
    this.els.navNext.on('click', function(ev){
    
      ev.preventDefault();
      var target = ev.getTarget();
      
      target.blur();
      if (Ext.fly(target).hasClass('ux-carousel-nav-disabled'))         
        return;
      
      
      this.next();
    }, this);
    
    if (this.showPlayButton) {
      this.els.navPlay.on('click', function(ev){
        ev.preventDefault();
        ev.getTarget().blur();
        if (this.playing) {
          this.pause();
        }
        else {
          this.play();
        }
      }, this);
    };
    
    if (this.freezeOnHover) {
      this.els.container.on('mouseenter', function(){
        if (this.playing) {
          this.fireEvent('freeze', this.slides[this.activeSlide]);
          Ext.TaskMgr.stop(this.playTask);
        }
      }, this);
      this.els.container.on('mouseleave', function(){
        if (this.playing) {
          this.fireEvent('unfreeze', this.slides[this.activeSlide]);
          Ext.TaskMgr.start(this.playTask);
        }
      }, this, {
        buffer: (this.interval / 2) * 1000
      });
    };
    
    if (this.navigationOnHover) {
      this.els.container.on('mouseenter', function(){
        if (!this.navigationShown) {
          this.navigationShown = true;
          this.els.navigation.stopFx(false).shift({
            y: this.els.container.getY(),
            duration: this.transitionDuration
          })
        }
      }, this);
      
      this.els.container.on('mouseleave', function(){
        if (this.navigationShown) {
          this.navigationShown = false;
          this.els.navigation.stopFx(false).shift({
            y: this.els.navigation.getHeight() - this.els.container.getY(),
            duration: this.transitionDuration
          })
        }
      }, this);
    };
    
    if (this.interval && this.autoPlay) {
      this.play();
    };
    
    if (this.indexNavigation) {
      this.els.indexNavigation.on('click', function(ev, el){
        ev.stopEvent();
        this.fireEvent('beforeselect', el.innerHTML, this.activeSlide);
      }, this);
    };
    
    
      },
  
  prev: function(){
  
    if (this.fireEvent('beforeprev') === false) {
      return;
    }
    if (this.pauseOnNavigate) {
      this.pause();
    }
    this.setSlide(this.activeSlide - 1);
    
    this.fireEvent('prev', this.activeSlide);
    return this;
  },
  
  next: function(){
  
    if (this.fireEvent('beforenext') === false) {
      return;
    }
    if (this.pauseOnNavigate) {
      this.pause();
    }
    
    this.setSlide(this.activeSlide + 1);
    
    this.fireEvent('next', this.activeSlide);
    return this;
  },
  
  play: function(){
    if (!this.playing) {
      this.playTask = this.playTask ||
      {
        run: function(){
          this.playing = true;
          this.setSlide(this.activeSlide + 1);
        },
        interval: this.interval * 1000,
        scope: this
      };
      
      this.playTaskBuffer = this.playTaskBuffer ||
      new Ext.util.DelayedTask(function(){
        Ext.TaskMgr.start(this.playTask);
      }, this);
      
      this.playTaskBuffer.delay(this.interval * 1000);
      this.playing = true;
      this.els.navPlay.addClass('ux-carousel-playing');
      this.fireEvent('play');
    }
    return this;
  },
  
  pause: function(){
    if (this.playing) {
      Ext.TaskMgr.stop(this.playTask);
      this.playTaskBuffer.cancel();
      this.playing = false;
      this.els.navPlay.removeClass('ux-carousel-playing');
      this.fireEvent('pause');
    }
    return this;
  },
  
  clear: function(){
    this.els.slidesWrap.update('');
    this.slides = [];
    this.carouselSize = 0;
    this.pause();
    return this;
  },
  
  add: function(el, refresh){
    var item = Ext.fly(el).appendTo(this.els.slidesWrap).wrap({
      cls: 'ux-carousel-slide'
    });
    item.setWidth(this.slideWidth + 'px').setHeight(this.slideHeight + 'px');
    this.slides.push(item);
    if (refresh) {
      this.refresh();
    }
    return this;
  },
  
  refresh: function(){
    this.carouselSize = this.slides.length;
    this.els.slidesWrap.setWidth((this.slideWidth * this.carouselSize) + 'px');
    if (this.carouselSize > 0) {
      if (!this.hideNavigation) this.els.navigation.show();
      this.activeSlide = 0;
      this.setSlide(0, true);
    }
    return this;
  },
  
  setSlide: function(index, initial){
    if (!this.wrap && !this.slides[index]) {
      return;
    }
    else 
      if (this.wrap) {
        if (index < 0) {
          if (this.endless) {
            index = 0;
          }
          else {
            index = this.carouselSize - 1;
          }
          
        }
        else 
          if (index > this.carouselSize - 1) {
            if (!this.endless) {
              index = 0;
            }
          }
      }
    // fix fade bug
    if (this.activeSlide < 0) {
      this.activeSlide = 0;
    }
    
    if (!this.slides[index]) {
      return;
    }
    
    this.els.caption.update(this.slides[index].child(':first-child', true).title || '');
    var offset = index * this.slideWidth;
    if (!initial) {
      switch (this.transitionType) {
        case 'fade':
          this.slides[index].setOpacity(0);
          this.slides[this.activeSlide].stopFx(false).fadeOut({
            duration: this.transitionDuration / 2,
            callback: function(){
              this.els.slidesWrap.setStyle('left', (-1 * offset) + 'px');
              this.slides[this.activeSlide].setOpacity(1);
              this.slides[index].fadeIn({
                duration: this.transitionDuration / 2
              });
            },
            scope: this
          })
          break;
          
        default:
          var xNew = (-1 * offset) + this.els.container.getX();
          this.els.slidesWrap.stopFx(false);
          this.els.slidesWrap.shift({
            duration: this.transitionDuration,
            x: xNew,
            easing: this.transitionEasing
          });
          break;
      }
    }
    else {
      this.els.slidesWrap.setStyle('left', '0');
    }
    
    this.activeSlide = index;
    this.updateNav();
    if (this.indexNavigation) {
      this.els.navItems[index].radioClass('ux-carousel-nav-item-selected');
    }
    this.fireEvent('change', this.slides[index], index);
  },
  
  updateNav: function(){
    this.els.navPrev.removeClass('ux-carousel-nav-disabled');
    this.els.navNext.removeClass('ux-carousel-nav-disabled');
    if (!this.wrap) {
      if (this.activeSlide === 0 && !this.endless) {
        this.els.navPrev.addClass('ux-carousel-nav-disabled');
      }
      if (this.activeSlide === this.carouselSize - 1 && !this.endless) {
        this.els.navNext.addClass('ux-carousel-nav-disabled');
      }
    }
  }
});

/*
 * Derived Class for Image
 */
beeline.web.ImageCarousel = function(elId, config){
  // explicitly call the superclass constructor
  beeline.web.ImageCarousel.superclass.constructor.call(this, elId, config);
  
};


Ext.extend(beeline.web.ImageCarousel, beeline.web.Carousel, {
  sliceClass: 'sliderItem',
  autoPlay: true,
  itemSelector: 'div.sliderItem',
  interval: 0,
  transitionEasing: 'easeIn',
  sliceItems: 4,
  wMargin: 800,
  maxHeight: 250, // pucture Height
  autoHeight: true,
  
  initHeight: function(){
    if (this.autoHeight) {
      beeline.web.ImageCarousel.superclass.initHeight.call(this);
      this.el.setHeight(this.els.container.getHeight());
    }
    this.el.select('.' + this.sliceClass).each(function(SingleSlice){
      SingleSlice.parent().setHeight(SingleSlice.getHeight());
    });
    
    
  },
  
  initDom: function(){
    var SlideShow = this.el;
    var SlideShowWidth = this.el.getWidth() - this.wMargin;
    var SlideShowHeight = this.maxHeight; // - this.el.getHeight();
    var sliceItems = this.sliceItems;
    var sliceClass = this.sliceClass;
    
    var i = 0;
    var slice = null;
    
    SlideShow.select('a').each(function(linkToImage){
      if ((i % sliceItems) == 0) {
        slice = Ext.DomHelper.append(SlideShow, '<div class="' + sliceClass + '"></div>', true);
      }
      //append 
      var addedItem = slice.appendChild(linkToImage);
      // scale
      var oldWidth = linkToImage.first().getWidth();
      var picWidth = SlideShowWidth / sliceItems;
      var scaleFactor = oldWidth / picWidth;
      var picHeight = linkToImage.first().getHeight() / scaleFactor;
      
      
      
      if (picHeight > SlideShowHeight) {
        scaleFactor = picHeight / SlideShowHeight;
        picHeight = picHeight / scaleFactor;
        picWidth = picWidth / scaleFactor;
      }
      addedItem.first().setStyle('width', picWidth + 'px').setStyle('height', picHeight + 'px');
      i++;
    });
    
    // clone Images for full sliderSlice
    SlideShow.select('.' + this.sliceClass + ' a').each(function(slice){
      var items = 0;
      //count items
      slice.select('a').each(function(singleImage){
        items++;
      });
      
      while (items % sliceItems) {
        slice.appendChild(slice.prev('div').select('a').item(items - 1).dom.cloneNode(true));
        items++;
      }
    });
    
    Ext.select('.' + this.sliceClass).each(function(slidePage){
      slidePage.addClass(this.sliceClass);
    });
    
    Ext.select('.' + this.sliceClass).each(function(slidePage){
      slidePage.addClass('sliderItem');
    });
  }
});


beeline.web.createToolTip = function(eventObj, className, contentTitle, contentText, posXY){
  if (Ext.get(className) == null) {
    ExtElement = Ext.DomHelper.append(document.body, {
      tag: 'div',
      id: className
    });
  }
  
  //IE Bug
  var title = '';
  
  Ext.fly(eventObj).addListener('mouseenter', function(event, target){
    title = target.title;
    var TipSpec = {
      tag: 'div',
      id: className,
      title: target.getAttribute('title'),
      children: [{
        tag: 'div',
        cls: className + 'Item',
        children: [{
          tag: 'p',
          cls: className + 'ContentTitle',
          html: contentTitle
        }, {
          tag: 'p',
          cls: className + 'ContentText',
          html: contentText,
          style: 'display: block'
        }]
      }]
    }
    target.removeAttribute('title');
    Ext.get(className).replaceWith(TipSpec);
    Ext.get(className).setStyle({
      position: 'absolute',
      display: 'block'
    });
    var pos = event.getXY();
    pos[0] = pos[0] + posXY[0];
    pos[1] = pos[1] - posXY[1];
    Ext.get(className).setXY(pos);
    //IE Bug
    target.title = '';
  });
  
  
  Ext.fly(eventObj).on('mousemove', function(event){
    var pos = event.getXY();
    pos[0] = pos[0] + posXY[0];
    pos[1] = pos[1] - posXY[1];
    Ext.get(className).setXY(pos);
  });
  
  
  Ext.fly(eventObj).on('mouseleave', function(event, target){
    Ext.get(target).set({
      title: Ext.get(className).getAttribute('title')
    });
    Ext.get(className).setStyle('display', 'none');
    //IE Bug
    target.title = title;
  });
}

beeline.web.submit = function(formId){

  var Form = Ext.get(formId);
  if (Form == null)     
    return;
  
  Form.dom.submit();
}

beeline.web.setValue = function(formId, fieldName, fieldValue){

  var Form = Ext.get(formId);
  if (Form == null)     
    return;
  
  if ((typeof fieldName != "undefined") && (typeof fieldValue != "undefined")) {
    //exist given fieldName
    var InputField = null;
    if (typeof Form.dom.elements[fieldName] == "undefined") {
      var FirstInputField = Form.select('input').item(0);
      if (FirstInputField != null) {
        InputField = Ext.DomHelper.insertBefore(FirstInputField, '<input type="hidden" name="' + fieldName + '" >', true);
      }
    }
    else {
      InputField = Ext.get(Form.dom.elements[fieldName]);
    }
    InputField.dom.value = fieldValue;
  }
}

/*
 * TOOLS
 */
//reflection class can add or remove reflection
beeline.web.Reflection = Ext.extend(Ext.util.Observable, {
  defaultHeight: 0.5,
  defaultOpacity: 0.5,
  
  constructor: function(config){
    config = config || {};
    Ext.apply(this, config);
    beeline.web.Reflection.superclass.constructor.call(this, config)
  },
  
  add: function(image, options){
    this.remove(image);
    
    doptions = {
      "height": this.defaultHeight,
      "opacity": this.defaultOpacity
    }
    if (options) {
      for (var i in doptions) {
        if (!options[i]) {
          options[i] = doptions[i];
        }
      }
    }
    else {
      options = doptions;
    }
    
    try {
      var d = document.createElement('div');
      var p = image;
      
      var classes = p.className.split(' ');
      var newClasses = '';
      for (j = 0; j < classes.length; j++) {
        if (classes[j] != "reflect") {
          if (newClasses) {
            newClasses += ' '
          }
          
          newClasses += classes[j];
        }
      }
      
      var reflectionHeight = Math.floor(p.height * options['height']);
      var divHeight = Math.floor(p.height * (1 + options['height']));
      
      var reflectionWidth = p.width;
      
      if (document.all && !window.opera) {
        /* Fix hyperlinks */
        if (p.parentElement.tagName == 'A') {
          var d = document.createElement('a');
          d.href = p.parentElement.href;
        }
        
        /* Copy original image's classes & styles to div */
        d.className = newClasses;
        p.className = 'reflected';
        
        d.style.cssText = p.style.cssText;
        p.style.cssText = 'vertical-align: bottom';
        
        var reflection = document.createElement('img');
        reflection.src = p.src;
        reflection.style.width = reflectionWidth + 'px';
        reflection.style.display = 'block';
        reflection.style.height = p.height + "px";
        
        reflection.style.marginBottom = "-" + (p.height - reflectionHeight) + 'px';
        reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity=' + (options['opacity'] * 100) + ', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' + (options['height'] * 100) + ')';
        
        d.style.width = reflectionWidth + 'px';
        d.style.height = divHeight + 'px';
        p.parentNode.replaceChild(d, p);
        
        d.appendChild(p);
        d.appendChild(reflection);
      }
      else {
        var canvas = document.createElement('canvas');
        if (canvas.getContext) {
          /* Copy original image's classes & styles to div */
          d.className = newClasses;
          p.className = 'reflected';
          
          d.style.cssText = p.style.cssText;
          p.style.cssText = 'vertical-align: bottom';
          
          var context = canvas.getContext("2d");
          
          canvas.style.height = reflectionHeight + 'px';
          canvas.style.width = reflectionWidth + 'px';
          canvas.height = reflectionHeight;
          canvas.width = reflectionWidth;
          
          d.style.width = reflectionWidth + 'px';
          d.style.height = divHeight + 'px';
          p.parentNode.replaceChild(d, p);
          
          d.appendChild(p);
          d.appendChild(canvas);
          
          context.save();
          
          context.translate(0, image.height - 1);
          context.scale(1, -1);
          
          context.drawImage(image, 0, 0, reflectionWidth, image.height);
          
          context.restore();
          
          context.globalCompositeOperation = "destination-out";
          var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
          
          gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
          gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - options['opacity']) + ")");
          
          context.fillStyle = gradient;
          context.rect(0, 0, reflectionWidth, reflectionHeight * 2);
          context.fill();
        }
      }
    } 
    catch (e) {
    }
  },
  
  remove: function(image){
    if (image.className == "reflected") {
      image.className = image.parentNode.className;
      image.parentNode.parentNode.replaceChild(image, image.parentNode);
    }
  }
  
});

beeline.web.addReflection = function(){
  var Reflection = new beeline.web.Reflection();
  
  Ext.select('.reflect').each(function(el){
    var rheight = null;
    var ropacity = null;
    
    var classes = el.dom.className.split(' ');
    for (j = 0; j < classes.length; j++) {
      if (classes[j].indexOf("rheight") == 0) {
        var rheight = classes[j].substring(7) / 100;
      }
      else 
        if (classes[j].indexOf("ropacity") == 0) {
          var ropacity = classes[j].substring(8) / 100;
        }
    }
    
    Reflection.add(el.dom, {
      height: rheight,
      opacity: ropacity
    });
  });
}


//beeline.web.carousel = function(firstCover, maxCover, reflect){
/*
 * TODO find error 
 */
beeline.web.CircleCarousel = Ext.extend(Ext.util.Observable, {
  firstCover: 0,
  lastCover: 10,
  maxCover: 13,
  reflect: false,
  
  
  constructor: function(elId, config){
    config = config || {};
    Ext.apply(this, config);
    beeline.web.CircleCarousel.superclass.constructor.call(this, config);
    
    if (this.firstCover) {
      if (this.firstCover > this.maxCover) this.firstCover = this.maxCover;
    }
    else {
      this.firstCover = 0;
    }
    if (this.maxCover) {
      if (this.maxCover < 5) this.maxCover = 5;
      if (this.maxCover == 6) this.maxCover = 7;
      if (this.maxCover == 8) this.maxCover = 9;
      if (this.maxCover == 10) this.maxCover = 11;
      if (this.maxCover > 11) this.maxCover = 13;
    }
    else {
      this.maxCover = 13;
    }
    this.lastCover = (this.maxCover - 1) / 2;
    if (this.reflect == 0) this.reflect = false;
    
    this.showMember();
    this.preparePresentationStage();
    this.initCarousel();
    
  },
  showMember: function(){
    alert('firstCover: ' + this.firstCover + ' lastCover: ' + this.lastCover + ' maxCover: ' + this.maxCover);
  },
  
  // put content in stage and presentation area
  preparePresentationStage: function(){
    var Reflection = new beeline.web.Reflection({});
    Ext.select('.carousel').each(function(e){
      var linkId = 0;
      var stage = e.select('.carouselStage').item(0);
      var presentation = e.select('.carouselPresentation').item(0);
      e.select('.carouselItem').each(function(item){
        var cover = item.first(); // the link element around the image
        var image = item.select('img').item(0); // the image element
        cover.set({
          name: linkId,
          href: 'javascript:void(0)',
          rel: cover.getAttribute('href')
        });
        if (this.reflect) {
          // create the reflection, which creates additional elements
          
          Reflection.add(image.dom, {
            height: 1 / 4
          });
        }
        else {
          // otherwise add a div element between link and image
          var dh = Ext.get(document.createElement('div'));
          dh.appendChild(image);
          cover.appendChild(dh);
        }
        stage.appendChild(cover);
        item.last().addClass('article' + linkId);
        presentation.appendChild(item.last());
        linkId = linkId + 1;
      });
    });
  },
  // positioning of each image
  carouselSetPos: function(cover, position, init, ignoreKnob){
    if (typeof ignoreKnob == "undefined") {
      ignoreKnob = false;
    }
    var helper = cover.first(); // the div element within the link element
    var image = cover.select('img').item(0); // the image element
    cover.setStyle('display', 'none');
    if ((position < -this.lastCover) || (position > this.lastCover))       
      return;
    cover.setStyle('display', 'block');
    var large = 1;
    
    for (var i = large; i <= 5; i = i + 0.1) {
      if (image.getWidth() > (image.getHeight() / 1.2 * i)) {
        large = i;
      }
      else {
        break;
      }
    }
    if (position >= 0) {
      var coverHeight = stage.getHeight(true) / ((this.lastCover + 1) / (this.lastCover + 1 - position)) / large;
      helper.parent().setStyle('zIndex', 20 - position); // zindex have to be set in parent to work in IE7
    }
    else {
      var coverHeight = stage.getHeight(true) / ((this.lastCover + 1) / (this.lastCover + 1 + position)) / large;
      helper.parent().setStyle('zIndex', 20 + position);
    }
    var coverWidth = image.getWidth() / image.getHeight() * coverHeight;
    var top = stage.getHeight(true) - coverHeight;
    var minLeft = stage.getWidth(true) / 300;
    
    if (position < 0) {
      var stepWidth = Math.pow(2, (6 - (6 / -this.lastCover * position)));
      left = minLeft * stepWidth;
    }
    if (position > 0) {
      var stepWidth = Math.pow(2, (6 - (6 / this.lastCover * position)));
      left = stage.getWidth(true) - (minLeft * stepWidth) - coverWidth;
    }
    if (position == 0) var left = (stage.getWidth(true) / 2) - (coverWidth / 2);
    if (init == true) {
      var duration = 0;
      image.parent().setStyle('background-color', stage.getStyle('background-color'));
    }
    else {
      var duration = 0.7;
    }
    if (this.reflect) {
      // with reflection
      helper.shift({
        x: left + stage.getX(),
        y: top + stage.getY(),
        width: coverWidth,
        height: coverHeight / 4 * 5,
        duration: duration,
        concurrent: true
      });
      helper.last().shift({
        width: coverWidth,
        height: coverHeight / 4,
        duration: duration,
        concurrent: true
      });
    }
    else {
      // without reflection
      helper.shift({
        x: left + stage.getX(),
        y: top + stage.getY(),
        width: coverWidth,
        height: coverHeight,
        duration: duration,
        concurrent: true
      });
    }
    image.shift({
      width: coverWidth,
      height: coverHeight,
      duration: duration,
      concurrent: true,
      callback: function(){
        image.setStyle('visibility', 'visible');
      }
    });
    
    if (position == 0) {
      var linkId = cover.getAttribute('name');
      e.select('.carouselItemText').each(function(textElement){
        if (textElement.hasClass('article' + linkId)) {
          textElement.fadeIn({
            duration: duration
          });
        }
        else {
          textElement.setStyle('display', 'none');
        }
      });
      if (ignoreKnob != null) {
        var knob = e.select('.carouselNavigationSliderKnob').item(0);
        var slider = e.select('.carouselNavigationSlider').item(0);
        var items = e.select('.carouselItemCover').getCount() - 1;
        var sliderSlice = slider.getWidth(true) / items;
        var knobPos = slider.getX() + (sliderSlice * linkId) - (knob.getWidth() / 2);
        knob.setX(knobPos);
      }
    }
  },
  
  // move carousel
  moveCover: function(init, ignoreKnob){
    var pos = position;
    e.select('.carouselItemCover').each(function(cover){
      this.carouselSetPos(cover, pos, init, ignoreKnob);
      pos = pos + 1;
    });
  },
  
  drag: function(){
    this.dragObj = this.knob;
  },
	
  drop: function(){
    this.dragObj = null;
  },
	
  moveSlider: function(event){
    if (this.dragObj) {
      var firstPos = this.slider.getXY()[0] - (this.knob.getWidth() / 2);
      var lastPos = this.slider.getXY()[0] + this.slider.getWidth() - (this.knob.getWidth() / 2);
      var knobPos = event.getXY()[0] - (this.knob.getWidth() / 2);
      if (knobPos < firstPos) this.knobPos = firstPos;
      if (knobPos > lastPos) knobPos = lastPos;
      for (var i = 0; i <= items; i = i + 1) {
        var knobPosCatch = this.slider.getX() + (sliderSlice * i) - this.knob.getWidth();
        if (knobPos > knobPosCatch) {
          coverPos = position + i;
        }
      }
      if (coverPos < 0) {
        position = position + 1;
        coverPos = coverPos + 1;
        this.moveCover(null, true);
      }
      if (coverPos > 0) {
        position = position - 1;
        coverPos = coverPos - 1;
        this.moveCover(null, true);
      }
      this.dragObj.setX(knobPos);
    }
  },
  
  initCarousel: function(){
		
    // change positioning
    Ext.select('.carousel').each(function(e){
      var stage = e.select('.carouselStage').item(0);
      
      // initial positioning
      e.select('.carouselItemCover').each(function(cover){
        var image = cover.select('img').item(0);
        var initTop = stage.getBottom() - image.getHeight();
        if (this.reflect) {
          image.parent().last().setWidth(50);
          initTop = stage.getBottom() - (image.getHeight() / 4 * 5);
        }
        cover.setStyle({
          left: stage.getRight() - image.getWidth() + 'px',
          top: initTop + 'px',
          display: 'none'
        });
      });
      var position = -this.firstCover;
      Ext.getBody().on('load', function(){
        this.moveCover(true);
      });
      
      // on window resize
      window.onresize = function(){
        this.moveCover();
      }
      
      // click on back button
      e.select('.carouselNavigationPrev').item(0).on('click', function(){
        if (position < 0) {
          position = position + 1;
          this.moveCover();
        }
      });
      
      // click on forward button
      e.select('.carouselNavigationNext').item(0).on('click', function(){
      
        if (position > -(e.select('.carouselItemCover').getCount() - 1)) {
          position = position - 1;
          this.moveCover();
        }
      });
      
      // click on cover image
      e.select('.carouselItemCover').each(function(cover){
        cover.on('click', function(event, target){
          coverId = Ext.get(target).parent().parent().getAttribute('name');
          coverPos = position + parseInt(coverId);
          if (coverPos == 0) {
            var href = Ext.get(target).parent().parent().getAttribute('rel');
            if (href != "undefined") document.location.href = href;
          }
          while (coverPos < 0) {
            position = position + 1;
            coverPos = coverPos + 1;
            this.moveCover();
          }
          while (coverPos > 0) {
            position = position - 1;
            coverPos = coverPos - 1;
            this.moveCover();
          }
        });
      });
			
      // move the slider knob
      this.slider = e.select('.carouselNavigationSlider').item(0);
      this.knob = e.select('.carouselNavigationSliderKnob').item(0);
      this.dragObj = null;
      this.items = e.select('.carouselItemCover').getCount() - 1;
      this.sliderSlice = this.slider.getWidth(true) / this.items;

      
			
      this.slider.on('mousedown', function(){
				this.drag();
			});
      this.slider.on('mouseleave', function(){
				this.drop();
			});
      this.slider.on('click', function(event){
        this.drag();
        this.moveSlider(event);
        this.drop();
      });
			
			
			
      Ext.getBody().on('mouseup', function(){
				this.drop();
			});
      Ext.getBody().on('mousemove', function(event){
        this.moveSlider(event);
      });

      // resize and hide invisible items
      stage.select('.carouselItemCover').each(function(cover){
        cover.setStyle('visibility', 'visible');
        if (cover.getStyle('display') == 'none') {
          var image = cover.select('img').item(0);
          image.setWidth(20);
          image.setStyle('height', 'auto');
          image.setStyle('visibility', 'hidden');
        }
      });
            
    });
  }
});








/*
 *
 * OLD CODE
 * not remove until beeline.web.CircleCarousel work correct
 *
 */
beeline.web.carousel = function(firstCover, maxCover, reflect){
  // check values
  if (firstCover) {
    if (firstCover > maxCover) firstCover = maxCover;
  }
  else {
    var firstCover = 0;
  }
  if (maxCover) {
    if (maxCover < 5) maxCover = 5;
    if (maxCover == 6) maxCover = 7;
    if (maxCover == 8) maxCover = 9;
    if (maxCover == 10) maxCover = 11;
    if (maxCover > 11) maxCover = 13;
  }
  else {
    var maxCover = 13;
  }
  var lastCover = (maxCover - 1) / 2;
  if (reflect == 0) reflect = false;
  
  var Reflection = new beeline.web.Reflection({});
  // put content in stage and presentation area
  Ext.select('.carousel').each(function(e){
    var linkId = 0;
    var stage = e.select('.carouselStage').item(0);
    var presentation = e.select('.carouselPresentation').item(0);
    e.select('.carouselItem').each(function(item){
      var cover = item.first(); // the link element around the image
      var image = item.select('img').item(0); // the image element
      cover.set({
        name: linkId,
        href: 'javascript:void(0)',
        rel: cover.getAttribute('href')
      });
      if (reflect) {
        // create the reflection, which creates additional elements
        Reflection.add(image.dom, {
          height: 1 / 4
        });
      }
      else {
        // otherwise add a div element between link and image
        var dh = Ext.get(document.createElement('div'));
        dh.appendChild(image);
        cover.appendChild(dh);
      }
      stage.appendChild(cover);
      item.last().addClass('article' + linkId);
      presentation.appendChild(item.last());
      linkId = linkId + 1;
    });
  });
  
  // change positioning
  Ext.select('.carousel').each(function(e){
    var stage = e.select('.carouselStage').item(0);
    
    // positioning of each image
    function carouselSetPos(cover, position, init, ignoreKnob){
      if (typeof ignoreKnob == "undefined") {
        ignoreKnob = false;
      }
      var helper = cover.first(); // the div element within the link element
      var image = cover.select('img').item(0); // the image element
      cover.setStyle('display', 'none');
      if ((position < -lastCover) || (position > lastCover))         
        return;
      cover.setStyle('display', 'block');
      var large = 1;
      
      for (var i = large; i <= 5; i = i + 0.1) {
        if (image.getWidth() > (image.getHeight() / 1.2 * i)) {
          large = i;
        }
        else {
          break;
        }
      }
      if (position >= 0) {
        var coverHeight = stage.getHeight(true) / ((lastCover + 1) / (lastCover + 1 - position)) / large;
        helper.parent().setStyle('zIndex', 20 - position); // zindex have to be set in parent to work in IE7
      }
      else {
        var coverHeight = stage.getHeight(true) / ((lastCover + 1) / (lastCover + 1 + position)) / large;
        helper.parent().setStyle('zIndex', 20 + position);
      }
      var coverWidth = image.getWidth() / image.getHeight() * coverHeight;
      var top = stage.getHeight(true) - coverHeight;
      var minLeft = stage.getWidth(true) / 300;
      
      if (position < 0) {
        var stepWidth = Math.pow(2, (6 - (6 / -lastCover * position)));
        left = minLeft * stepWidth;
      }
      if (position > 0) {
        var stepWidth = Math.pow(2, (6 - (6 / lastCover * position)));
        left = stage.getWidth(true) - (minLeft * stepWidth) - coverWidth;
      }
      if (position == 0) var left = (stage.getWidth(true) / 2) - (coverWidth / 2);
      if (init == true) {
        var duration = 0;
        image.parent().setStyle('background-color', stage.getStyle('background-color'));
      }
      else {
        var duration = 0.7;
      }
      if (reflect) {
        // with reflection
        helper.shift({
          x: left + stage.getX(),
          y: top + stage.getY(),
          width: coverWidth,
          height: coverHeight / 4 * 5,
          duration: duration,
          concurrent: true
        });
        helper.last().shift({
          width: coverWidth,
          height: coverHeight / 4,
          duration: duration,
          concurrent: true
        });
      }
      else {
        // without reflection
        helper.shift({
          x: left + stage.getX(),
          y: top + stage.getY(),
          width: coverWidth,
          height: coverHeight,
          duration: duration,
          concurrent: true
        });
      }
      image.shift({
        width: coverWidth,
        height: coverHeight,
        duration: duration,
        concurrent: true,
        callback: function(){
          image.setStyle('visibility', 'visible');
        }
      });
      
      if (position == 0) {
        var linkId = cover.getAttribute('name');
        e.select('.carouselItemText').each(function(textElement){
          if (textElement.hasClass('article' + linkId)) {
            textElement.fadeIn({
              duration: duration
            });
          }
          else {
            textElement.setStyle('display', 'none');
          }
        });
        if (ignoreKnob != null) {
          var knob = e.select('.carouselNavigationSliderKnob').item(0);
          var slider = e.select('.carouselNavigationSlider').item(0);
          var items = e.select('.carouselItemCover').getCount() - 1;
          var sliderSlice = slider.getWidth(true) / items;
          var knobPos = slider.getX() + (sliderSlice * linkId) - (knob.getWidth() / 2);
          knob.setX(knobPos);
        }
      }
    }
    
    // move carousel
    function moveCover(init, ignoreKnob){
      var pos = position;
      e.select('.carouselItemCover').each(function(cover){
        carouselSetPos(cover, pos, init, ignoreKnob);
        pos = pos + 1;
      });
    }
    
    // initial positioning
    e.select('.carouselItemCover').each(function(cover){
      var image = cover.select('img').item(0);
      var initTop = stage.getBottom() - image.getHeight();
      if (reflect) {
        image.parent().last().setWidth(50);
        initTop = stage.getBottom() - (image.getHeight() / 4 * 5);
      }
      cover.setStyle({
        left: stage.getRight() - image.getWidth() + 'px',
        top: initTop + 'px',
        display: 'none'
      });
    });
    var position = -firstCover;
    Ext.getBody().on('load', moveCover(true));
    
    // on window resize
    window.onresize = function(){
      moveCover();
    }
    
    // click on back button
    e.select('.carouselNavigationPrev').item(0).on('click', function(){
      if (position < 0) {
        position = position + 1;
        moveCover();
      }
    });
    
    // click on forward button
    e.select('.carouselNavigationNext').item(0).on('click', function(){
    
      if (position > -(e.select('.carouselItemCover').getCount() - 1)) {
        position = position - 1;
        moveCover();
      }
    });
    
    // click on cover image
    e.select('.carouselItemCover').each(function(cover){
      cover.on('click', function(event, target){
        coverId = Ext.get(target).parent().parent().getAttribute('name');
        coverPos = position + parseInt(coverId);
        if (coverPos == 0) {
          var href = Ext.get(target).parent().parent().getAttribute('rel');
          if (href != "undefined") document.location.href = href;
        }
        while (coverPos < 0) {
          position = position + 1;
          coverPos = coverPos + 1;
          moveCover();
        }
        while (coverPos > 0) {
          position = position - 1;
          coverPos = coverPos - 1;
          moveCover();
        }
      });
    });
    
    // move the slider knob
    var slider = e.select('.carouselNavigationSlider').item(0);
    var knob = e.select('.carouselNavigationSliderKnob').item(0);
    var dragObj = null;
    var items = e.select('.carouselItemCover').getCount() - 1;
    var sliderSlice = slider.getWidth(true) / items;
    function drag(){
      dragObj = knob;
    }
    function drop(){
      dragObj = null;
    }
    function moveSlider(event){
      if (dragObj) {
        var firstPos = slider.getXY()[0] - (knob.getWidth() / 2);
        var lastPos = slider.getXY()[0] + slider.getWidth() - (knob.getWidth() / 2);
        var knobPos = event.getXY()[0] - (knob.getWidth() / 2);
        if (knobPos < firstPos) knobPos = firstPos;
        if (knobPos > lastPos) knobPos = lastPos;
        for (var i = 0; i <= items; i = i + 1) {
          var knobPosCatch = slider.getX() + (sliderSlice * i) - knob.getWidth();
          if (knobPos > knobPosCatch) {
            coverPos = position + i;
          }
        }
        if (coverPos < 0) {
          position = position + 1;
          coverPos = coverPos + 1;
          moveCover(null, true);
        }
        if (coverPos > 0) {
          position = position - 1;
          coverPos = coverPos - 1;
          moveCover(null, true);
        }
        dragObj.setX(knobPos);
      }
    }
    slider.on('mousedown', drag);
    slider.on('mouseleave', drop);
    slider.on('click', function(event){
      drag();
      moveSlider(event);
      drop();
    });
    Ext.getBody().on('mouseup', drop);
    Ext.getBody().on('mousemove', function(event){
      moveSlider(event);
    });
    
    // resize and hide invisible items
    stage.select('.carouselItemCover').each(function(cover){
      cover.setStyle('visibility', 'visible');
      if (cover.getStyle('display') == 'none') {
        var image = cover.select('img').item(0);
        image.setWidth(20);
        image.setStyle('height', 'auto');
        image.setStyle('visibility', 'hidden');
      }
    });
    
  });
}