function ImageBrowser(maxShown, imageWidth, imageHeight) {
    this.animationDuration = 200;
    this.maxShown = maxShown;
    this.currentIndex = 0;
    this.images = [];
    this.elementReference;
    this.leftButton;
    this.rightButton;
    this.imagesContainer;
    this.width=0;
    this.height=0;
    this.imageHeight=imageHeight;
    this.imageWidth = imageWidth;
    //this.leftOffset = leftOffset;
    //this.rightOffset = rightOffset;
    this.createBody();
   
}

ImageBrowser.prototype.createBody = function () {
    var object = this;

    this.leftButton = $('<div style="width:50px; display:inline-block; vertical-align:top; background:#000">left</div>');
    this.rightButton = $('<div style="width:50px; display:inline-block; vertical-align:top; background:#000">right</div>');
    this.imagesContainer = $('<div style="position:relative; overflow:hidden; beckground:#FFF; display:inline-block; vertical-align:top"></div>');
    this.elementReference = $('<div class="imageBrowser" style="height:50px"></div>');
    this.elementReference.append(this.leftButton)
                        .append(this.imagesContainer)
                        .append(this.rightButton);

    this.leftButton.mousedown(function (event) {
        object.moveLeft();
    });
    this.rightButton.mousedown(function (event) {
        object.moveRight();
    });
};

ImageBrowser.prototype.moveRight = function () {
    if (this.currentIndex < this.images.length-this.maxShown) {
        this.currentIndex++;
        this.repositionImagesSlowly();
    }
};

ImageBrowser.prototype.moveLeft = function () {
    if (this.currentIndex >0) {
        this.currentIndex--;
        this.repositionImagesSlowly();
    }
};

ImageBrowser.prototype.setWidth=function(newValue){
    this.width=newValue;
};

ImageBrowser.prototype.setHeight=function(newValue){
    this.height=newValue;
};

ImageBrowser.prototype.refreshBody = function () {
    this.leftButton.height(this.height);
    this.rightButton.height(this.height);
    this.imagesContainer.width(this.width - this.leftButton.width() - this.rightButton.width());
    this.imagesContainer.height(this.height);
    this.elementReference.height(this.height);
    this.repositionImages();
};

ImageBrowser.prototype.repositionImages = function () {
    var spacing = (this.width-this.leftButton.width()-this.rightButton.width() - (this.imageWidth * this.maxShown)) / (this.maxShown - 1 + 1);
    for(var currentImageIndex=0;currentImageIndex<this.images.length;currentImageIndex++){
        this.images[currentImageIndex].css('left', ((currentImageIndex-this.currentIndex) * (this.imageWidth + spacing) + spacing/2) + 'px');
    }
};

ImageBrowser.prototype.repositionImagesSlowly = function () {
    var spacing = (this.width - this.leftButton.width() - this.rightButton.width() - (this.imageWidth * this.maxShown)) / (this.maxShown - 1 + 1);
    for (var currentImageIndex = 0; currentImageIndex < this.images.length; currentImageIndex++) {
        this.images[currentImageIndex].stop();
        this.images[currentImageIndex].animate({ left: ((currentImageIndex - this.currentIndex) * (this.imageWidth + spacing) + spacing / 2) });
    }
};

ImageBrowser.prototype.getBodyReference=function(){
    return this.elementReference;
};

ImageBrowser.prototype.addImageUrl = function (url, action) {
    var newImageObject = this.createImage(url,action);
    this.images.push(newImageObject);
    this.imagesContainer.append(newImageObject);

    this.repositionImages();
};

ImageBrowser.prototype.createImage = function (url, action) {
    var newImage = $('<img style="position:absolute; top:' + ((this.height - this.imageHeight) / 2) + 'px" src="' + url + '"/>');
    if (action) {
        newImage.mousedown(function (event) {
            ProjectionScreen.prototype.showQTMovie(action);
        });
    }
    return newImage;
};