var SlideAndThumb = new Class({
	Extends: SlideAndHide,
	options: {
		// options for all 3 classes --> see slideAndHide class for option list

		thumbs: {
			container: "thumb_container", // container for Thumbnails and Scrollbar
			images: [], // array of images (only src)
			height: 80, // height for the whole thumbnail box (needed for loading image)
			aStyle: { // style for A elements which are wrapping the Thumbnail img's

			}
		},
		slides: {
			// see class slideAndHide for option list
		},
		scrollBar: { // for deactivating scrollBar set this to false!
                mode: 'horizontal',
                barPositionTop: true,
                wheel: true,
                snap: true,
                clickStep: 400,
                buttons: true,
                ifNoScrollbarStylesForContainer: {
                }
		}
	},
	onCreateThumbs: $empty, // fired when thumbnails are preloaded and created in DOM
	onUpdateThumbs: $empty, // fired when thumbnails are updatet (new Gallery)
	onSlideBeforeThumbs: $empty, 
	onSlideAfterThumbs: $empty,
	onActThumb: $empty, // fired when Thumb gets clicked
	onBlurThumb: $empty, // fired when Thumb is blured
	initialize: function(options) {
		this.parent(options); 
		this.outerWrap = $(this.options.thumbs.container); 
		this.addThumbsLoading();
		if(this.options.thumbs.images.length>0) {
			new Asset.images(this.options.thumbs.images, {
				"onComplete": function() {
					this.removeThumbsLoading();
					this.options.thumbs.images.each(function(item, index) {
						this.addThumb(item);
					}.bind(this));
					this.createThumbs();
                    this.fireEvent("onCreateThumbs", [this.thumbSlides,this.options.slides.startIndex]);
					if(this.options.scrollBar) {
                        this.setRealSlideWidth(); // for scrolling
						this.scrollbar = new Scrollbar(this.outerContainer, this.options.scrollBar);
						this.slideToCenter(this.options.startIndex);
					}	
					// start is different
					this.thumbContainer.getElement("a.thumb_"+this.options.startIndex).addClass("act");
   	                this.fireEvent("onActThumb", [this.thumbContainer.getElement("a.thumb_"+this.options.startIndex), this.options.startIndex]);
					this.addEvent("onSlideBefore", function(slides,index) {
                        if(this.thumbContainer.getElement("a.act")) {
                            this.fireEvent("onBlurThumb", [this.thumbContainer.getElement("a.act"), index]);
                            this.thumbContainer.getElement("a.act").removeClass("act");
                        }
                       this.thumbContainer.getElement("a.thumb_"+index).addClass("act");
			           this.fireEvent("onActThumb", [this.thumbContainer.getElement("a.thumb_"+index), index]);
					}.bind(this))
					this.addEvent("onSlideAfter", function(slides,index) {
	                    if(this.options.scrollBar) {
							this.slideToCenter(index);
						}
					}.bind(this))
				}.bind(this)
			});
		}
	},
	addThumbsLoading: function() {
		this.thumbsLoading = new Element("div", {
			"styles": {
				"height": this.options.thumbs.height,
				"background": "transparent url(img/ajax.gif) no-repeat center center"
			}
		});
		this.outerWrap.adopt(this.thumbsLoading);
	},
	removeThumbsLoading: function() {
		this.thumbsLoading.destroy();
	},
	thumbSlides: [],
	slideToCenter: function(index) {
        this.fireEvent("onSlideBeforeThumbs", [index]);
		var toEl = "a.thumb_"+index;
		this.scrollbar.scrollToElement(toEl);
	},
	createThumbs: function() {
		this.thumbContainer = new Element("div", {
			"class": "scrollContent" // for scrollbar
		});
		this.thumbSlides.each(function(item,index) {
			var el = new Element("a", {
				"styles": this.options.thumbs.aStyle,
				"class": "thumb_"+index,
				"events": {
					"click": function() {
						if(!this.tweening) {
							this.autostop(); // stop automatic tweening
							this.showSlide(index);
						}
					}.bind(this,index)
				}
			}).adopt(new Element("img",{
				"src": item
			}));
			if(index==0) {
				el.addClass("first");
			}
			else {
				if(index==this.thumbSlides.length-1) {
					el.addClass("last");
				}
			}
			if(index==this.options.slides.startIndex) {
				el.addClass("act");
			}
			this.thumbContainer.adopt(el);
		}.bind(this));

        if(this.options.scrollBar) {
			var scrollbar = new Element("div", {
				"class": "scrollbar"
			}).adopt(new Element("div", {
				"class": "knob"
			}));
		}
		else {
			var scrollbar = null;
		}
		this.outerContainer = new Element("div", {
			"styles": {
				"overflow": "hidden",
				"width": this.options.width
			}
		}).adopt(this.thumbContainer,scrollbar); 
		this.outerWrap.setStyles({
			"width": this.options.width,
			"overflow": "hidden"
		});
		this.outerWrap.adopt(this.outerContainer);
	},
	setRealSlideWidth: function() {
        // calculate real scrollWidth
        this.scrollWidth = 0;
        this.thumbContainer.getElements("a").each(function(item,index) {
            this.scrollWidth += item.getSize().x.toInt() + item.getStyle("margin-left").toInt() + item.getStyle("margin-right").toInt();
       }.bind(this));
        this.thumbContainer.setStyle("width",this.scrollWidth); // set real scrollWidth
	},
	addThumb: function(thumb) {
		this.thumbSlides.include(thumb);
	},
	update: function(images,thumbArr,startIndex) {
		// update slideAndHide
		this.parent(images,startIndex);
		// update Thumbnails
		this.outerWrap.empty(); // dell old Thumbs
        this.addThumbsLoading();
		this.thumbSlides.empty();
        if(thumbArr.length>0) {
            new Asset.images(thumbArr, {
                "onComplete": function() {
                    this.removeThumbsLoading();
                    thumbArr.each(function(item, index) {
                        this.addThumb(item);
                    }.bind(this));
                    this.createThumbs();
                    this.fireEvent("onUpdateThumbs", [this.thumbSlides,this.options.slides.startIndex]);
                    if(this.options.scrollBar) {
                        this.setRealSlideWidth(); // for scrolling
						this.scrollbar = new Scrollbar(this.outerContainer, this.options.scrollBar);						
                        this.slideToCenter(this.options.startIndex);
                    }
                    // start is different
                    this.thumbContainer.getElement("a.thumb_"+this.options.startIndex).addClass("act");
                    this.fireEvent("onActThumb", [this.thumbContainer.getElement("a.thumb_"+this.options.startIndex), this.options.startIndex]);
				}.bind(this,thumbArr)
			});
		} 
	}
});