ImageScroller = function(options){
    var self = this;
    
    this.options = options;
    var image_sources = [];
    
    this.$container = $("#" + this.options.container);
	
    this.$div = $("<div class='slider_main'></div>")
	.appendTo(this.$container);
    
    this.$img_container = $("<div></div>").css({
        position: "relative",
        width: "9999px",
		overflow: "hidden"
    }).appendTo(this.$div);
    this.$imgs = [];
    
    this.initPositions = [];
	if ($.browser.msie) {
		this.options.items.pop();
	}
	
    var picsToBeLoaded = this.options.items.length;
    
    for (var i = 0; i < this.options.items.length; i++) {
		
        var itemContainer = $("<div class='slider_item_container'></div>").css({
			marginLeft: this.options.margin / 2,
			marginRight: this.options.margin / 2
		});
//        var sliderItemLeft = $("<div class='slider_item_left'></div>");
//        var sliderItemCenter = $("<div class='slider_item_bg'></div>");
//        var sliderItemRight = $("<div class='slider_item_right'></div>");
//        
//        sliderItemLeft.appendTo(itemContainer);
//        sliderItemCenter.appendTo(itemContainer);
//        sliderItemRight.appendTo(itemContainer);
//        
        var $img = $("<img src='" + this.options.items[i].src + "' title='" + this.options.items[i].img_title + "'/>");
        
        $img.css({
            cursor: "pointer",
            marginTop: "4px"
        });
        
        $img[0].item = this.options.items[i];
        
        if (this.options.onclick) {
            $img.click(this.options.onclick);
        }
        
        if (this.options.onmouseover || this.options.onmouseout) {
            $img.hover(this.options.onmouseover, this.options.onmouseout);
        }
        
        this.$imgs.push($img);
		itemContainer.appendTo(this.$img_container).css({
			visibility: "hidden"
		});		
//        sliderItemCenter.append($img);
		itemContainer.append($img); 
		
		$img.hover(function() {
			$(this).addClass("hover");	
		}, function() {
			$(this).removeClass("hover");
		});
		
		
        $img.load(function(){
            //if ($(this).height() > self.options.height) {
                var newHeight = self.options.height;
                var newWidth = $(this).width() / $(this).height() * newHeight;
                
                $(this).width(newWidth).height(newHeight);
            //}
            $(this.parentNode).css({
				visibility: "visible",
				width: newWidth + 9 + "px"
			});
			
            picsToBeLoaded--;
            if (picsToBeLoaded === 0) {
                self.onPicsLoaded();
            }
        });
    }
    
    this.x = 0;
    
    this.initScrollbar();
};


ImageScroller.prototype.initScrollbar = function(){
    var self = this;
	$("<div style='clear: both'></div>").appendTo(this.$div);
    var scrollContainer = $("<div class='slider_scroll_container'></div>")
	.appendTo(this.$container).click(function(e){
        self.moveScroller(e, true);
        return false;
    });
    
    var leftArrow = $("<div class='slider_left_arrow'></div>").click(function(){
        self.scrollLeft();
        return false;
    }).appendTo(scrollContainer);
    
    var rightArrow = $("<div class='slider_right_arrow'></div>").click(function(){
        self.scrollRight();
        return false;
    }).appendTo(scrollContainer);
	
    this.$scrollDiv = $("<div class='slider_scroll_bar'></div>");
    
    this.$scrollDiv.appendTo(scrollContainer);
    
    this.$scrollBall = $("<div class='slider_scroll_ball'></div>");
    this.$scrollBall.appendTo(this.$scrollDiv);
    
    this.dragging = false;
    
    this.$scrollBall.mousedown(function(){
        self.dragging = true;
        return false;
    });
    
    $(window).mouseup(function(){
        self.dragging = false;
        return false;
    });
    
    $(window).mousemove(function(e){
        if (self.dragging) {
            self.moveScroller(e);
        }
    });
};

ImageScroller.prototype.onPicsLoaded = function(){
    var curPos = 0;
    var width = 0;
    for (var i = 0; i < this.$imgs.length; i++) {
        width += this.$imgs[i].width() + 9 + this.options.margin;
    }
    width += 2;
    this.$img_container.width(width);
    i = 0;
    while (this.$div.width() < width - curPos) {
        this.initPositions.push(curPos);
        curPos += this.$imgs[i++].width() + 9 + this.options.margin;
    }
    this.initPositions.push(curPos);
	
	if (this.options.onload) {

		this.options.onload();
	}
};

ImageScroller.prototype.scrollRight = function(){
	var self = this;
    var x = -this.x;
    var i = 0;
    while (i < this.initPositions.length && x >= this.initPositions[i]) {
        i++;
    }
    
    if (i != this.initPositions.length) {
        this.x = -this.initPositions[i];
    }
    
    this.$img_container.animate({
        left: this.x
    }, "fast");
    
    this.$scrollBall.animate({
        left: self.posFromPercentage(-this.x / this.initPositions[this.initPositions.length - 1])
    }, "fast");
};

ImageScroller.prototype.scrollLeft = function(){
	var self = this;
    var x = -this.x;
    var i = this.initPositions.length - 1;
    while (i >= 0 && x <= this.initPositions[i]) {
        i--;
    }
    if (i >= 0) {
        this.x = -this.initPositions[i];
    }
    
    this.$img_container.animate({
        left: this.x
    }, "fast");
    this.$scrollBall.animate({
        left: self.posFromPercentage(-this.x / this.initPositions[this.initPositions.length - 1])
    }, "fast");
};

ImageScroller.prototype.scrollToItem = function(i) {
	var self = this;
	if (i >= this.initPositions.length) {
		i = this.initPositions.length - 1;
		this.x = -this.initPositions[i];		
	} else {
		this.x = -this.initPositions[i] + this.$div.width() / 2;
		if (this.x > 0) {
			this.x = 0;
		}
	}
	
    this.$img_container.animate({
        left: self.x
    }, "fast");

    this.$scrollBall.animate({
        left: self.posFromPercentage(-self.x / self.initPositions[self.initPositions.length - 1])
    }, "fast");	
};

ImageScroller.prototype.moveScroller = function(e, animate){
    var self = this;
    
    var pos_x = e.pageX - this.$scrollDiv.offset().left;
    var percentage_x = pos_x / (this.$scrollDiv.width() - 15);
    if (percentage_x < 0) {
        percentage_x = 0;
    }
    else {
        if (percentage_x > 1.0) {
            percentage_x = 1.0;
        }
    }
    
    self.x = -percentage_x * self.initPositions[self.initPositions.length - 1];
    
    if (animate) {
        self.$img_container.animate({
            left: self.x
        }, "fast");
        self.$scrollBall.animate({
            left: self.posFromPercentage(percentage_x)
        }, "fast");
    }
    else {
        self.$img_container.css({
            left: self.x
        });
        self.$scrollBall.css({
            left: self.posFromPercentage(percentage_x)
        });
    }
};


ImageScroller.prototype.selectItem = function(i) {
//	$(".slider_item_left, .slider_item_right, .slider_item_bg", this.$imgs[i][0].parentNode.parentNode).addClass("selected");
	this.$imgs[i].addClass("selected");
};

ImageScroller.prototype.deselectAll = function() {
	$(".slider_item_container img").removeClass("selected");
};

ImageScroller.prototype.posFromPercentage = function(percentage) {
	return percentage * (this.$scrollDiv.width() - 15) + "px";
};