function sSlideShow(v, p){
  sComponent.call(this);

  this.path = p ? p : "";
  
  this.setBackgroundColor("#ffffff");
  this.setOverflow("hidden");
  
  
  this._inactive = new SElement();
  
  this._inactive.setBackgroundColor("#000000");
  this._inactive.setOpacity(70);
  this._inactive.setZIndex(_sZIndex+1);
  this._inactive.addForDoc();
  this._inactive.setSizeForWindow();

  
  this._images = new Array();
  this._imageIndex = 0; 
  
  if (v) this._images = v; 
  
  this._loading = new sImage( this.path+"selement/style/img/ajax-loader.gif");
  this._image = new sImage();
  
  this.add(this._loading);

  this.lb = new sImage( this.path+"selement/style/leftarrow.png");
  this.rb = new sImage( this.path+"selement/style/rightarrow.png");
  
  this.lb._element.style.border="none";
  this.rb._element.style.border="none";
  
  this.add(this.lb);
  this.add(this.rb);
  
  this.lb.setPos(60, 10);
  this.rb.setRight(10);
  this.rb.setTop(60);
  
  var _this = this;
  
 
  
  this._inactive.addEvent("click", function(){
    _this.display(false);
  } );
  
 
  var sE = new sEffects(this);
  var iE = new sEffects(this._image);
  

  this.imgOnload = function(){

    _this._loading._element.style.display="none"; 

    var w = _this._image.getElement().width;
    var h = _this._image.getElement().height;

    
    var tw = _this.getWidth();
    var th = _this.getHeight();
    
    var vieplus = 20;
    var hieplus = 20;
    
    var _hstep = 10;
    var _vstep = 10;
    
    if ( w < tw){ 
      _hstep = -10;
      hieplus = -20;
    }
    if ( h < th){
      _vstep = -10;
      vieplus = -20;
    }

    
    sE.clearAnimation();
    if (Math.abs(tw-w)+hieplus > 0)
      sE.addEffect({type: "h", n: Math.abs(tw-w)+hieplus, step: _hstep});
    if (Math.abs(th-h)+vieplus > 0)
      sE.addEffect({type: "v", n: Math.abs(th-h)+vieplus, step: _vstep});

      
    sE.addEffect({type: "func", func: function(){
      iE = new sEffects(_this._image);
      _this.add(_this._image);
      _this._image.setOpacity(0);
      _this._image.setDisplay("block");
      
      iE.clearAnimation();
      iE.addEffect({type: "o", n: 100, step: 10});
      
      iE.addEffect({type: "func", func: function(){
        if (_this._imageIndex > 0)
          _this.lb.setDisplay("block");
        if (_this._imageIndex < _this._images.length-1)
          _this.rb.setDisplay("block");
      } });
      iE.play();
    } });

    sE.play();
  }

  this.displayImage = function(x){
    if(this._images[x]){ 
      this._loading.setDisplay("block");
      this._loading.setInheritPosition("center", "center");
      
      this._imageIndex = x;
      

      
      this.removeChild(this._image);
      this._image = new sImage(this._images[this._imageIndex]+"?"+Math.random()+"="+Math.random());
      this._image._element.style.border="none";
      this._image._element.style.margin="10px";
      this._image.addEvent("load", this.imgOnload );
      this.lb.setDisplay("none");
      this.rb.setDisplay("none");
      this.lb.setZIndex(_sZIndex+1);
      this.rb.setZIndex(_sZIndex+1);
      
      this._image.addEvent("click", function(){
        _this.displayImage(_this._imageIndex+1);
      });
      
    }
  }
  
  this.lb.addEvent("click", function(){
    _this.displayImage(_this._imageIndex-1);
  });
  this.rb.addEvent("click", function(){
    _this.displayImage(_this._imageIndex+1);
  });
}

_p = sExtend(sSlideShow, sComponent, "sSlideShow");

_p.display = function(v){
  var d = v ? "block" : "none";
  if (v){
    this._inactive.setZIndex(_sZIndex++);
    this.setZIndex(_sZIndex++);
  }
  this.setDisplay(d);
  this._inactive.setDisplay(d);
  if (v){
    this._loading.setInheritPosition("center", "center");
    this._loading._element.style.display="block";
    this.setInheritPosition("center", "center");
    this._inactive.setSizeForWindow();
    
  }
}

function sMiniPreview(v){
  sComponent.call(this);
  
  var _this = this;
  
  this.path = v ? v : "";
  
  this._images = new Array();
  this._imageIndex = 0;
  this._imgLeft = 0;
  
  this.container = new sComponent("relative");
  this.container.setOverflow("hidden");
  
  this.imgContainer = new sComponent("static");
  this.imgContainer.getElement().style.whiteSpace = "nowrap";
  this.container.add(this.imgContainer);
  
  this.add(this.container);
  
  var lb = new sImage( this.path+"selement/style/leftarrow.png");
  var rb = new sImage( this.path+"selement/style/rightarrow.png");
  
  lb.setPos(60, 10);
  rb.setRight(10);
  rb.setTop(60);
  
  this.add(lb);
  this.add(rb);
  
  this._slide = new sSlideShow(this._images,  this.path);
  this._slide.setSize("100", "100");
  this._slide.addForDoc();
  this._slide.setInheritPosition("center", "center");
  this._slide.display(false);
  
  var sE = new sEffects(this.container);
  
  var _scroll = true;
  
  lb.addEvent("click", function(){
    
    if (_scroll){
      _scroll = false;
      if ( (_this.container.getScrollLeft() + _this.container.getWidth() ) < _this.container.getElement().scrollWidth ){
        var w = _this.imgContainer.getChildren()[_this._imageIndex].getElement().width+3;
        sE.clearAnimation();
        _this._imageIndex++;
        sE.addEffect({type: "slr", n: w, step: 5});
        sE.addEffect({type: "func", func: function(){ _scroll = true; } });
        sE.play();
      }else{
        var w = _this.container.getScrollLeft()+5;
        sE.clearAnimation();
        _this._imageIndex = 0;
        sE.addEffect({type: "slr", n: w, step: -40});
        sE.addEffect({type: "func", func: function(){ _scroll = true; } });
        sE.play();
      }
    }
  } );
  
  rb.addEvent("click", function(){
    if (_scroll){
      _scroll = false;
      if (_this.container.getScrollLeft() > 0){
        var w = _this.imgContainer.getChildren()[_this._imageIndex].getElement().width+5;
        sE.clearAnimation();
        _this._imageIndex--;
        sE.addEffect({type: "slr", n: w, step: -5});
        sE.addEffect({type: "func", func: function(){ _scroll = true; } });
        sE.play();
      }else{
        var w = _this.container.getElement().scrollWidth+5;
        sE.clearAnimation();
        _this._imageIndex = _this.imgContainer.getChildren().length-1;
        sE.addEffect({type: "slr", n: w, step: 40});
        sE.addEffect({type: "func", func: function(){ _scroll = true; } });
        sE.play();
      }
    }
  });
  
  this.addImage = function(miniImgUrl, normalImgUrl){
    var img = new sImage(miniImgUrl);
    img.setPosition("relative");
    img._element.style.margin = "5px";
    this.imgContainer.add(img);
    var l = this._images.length;
    img.addEvent("click", function(){
      _this._slide.display(true);
      _this._slide.displayImage(l);
    } );
    
    this._images[this._images.length] = normalImgUrl;
  }
  
}

_mp = sExtend(sMiniPreview, sComponent, "sMiniPreview");

_mp._setLeft = function(v){
  this._imgLeft = v;
}

_mp._getLeft = function(){
  return this._imgLeft;
}

_mp.setWidth = function(v){
  this._element.style.width = v+"px";
  this._width = v;
  //this.container.setWidth( v-(2* this.container.getLeft() ) );
}