function ASlideGallery(images, bottomHtml) {

    this.div = $("#myGalery");
    this.images = images;
    this.totalImageWidth = 0;
    this.bottomHtml = bottomHtml;
    this.lastXOffset = undefined;

    this.createDivs = function() {
        this.div.html("<div id=\"shownImage\"></div><div id=\"galleryEventDiv\" ondrag=\"return false;\"></div><div id=\"galleryTop\"></div><div id=\"galleryBottom\"></div>");
        $('#galleryEventDiv').css("z-index", "9");
        $('#galleryEventDiv').css("position", "absolute");
        $("#galleryBottom").css("position", "absolute");
    }

    this.createDivs();

    this.draw = function(xOffset) {
        var offset = this.div.offset();
        this.x = offset.left;
        this.y = offset.top;
        this.width = this.div.width();

        if (xOffset != undefined) {
            this.lastXOffset = xOffset;
        }
        
        $("#galleryTop").html("");

        var curX = 0;
        for(var i=0; i<images.length; i++) {

            var x = 0;
            var imgOffset = 0;
            var imgWidth = 0;

            if (curX <= this.width + this.lastXOffset && curX+this.images[i].width >= this.lastXOffset) {

                if (curX >= this.lastXOffset) {
                    x = this.x + curX - this.lastXOffset;
                    imgOffset = 0;
                    imgWidth = this.images[i].width;
                } else {
                    x = this.x;
                    imgOffset = this.lastXOffset - curX;
                    imgWidth = this.images[i].width - (this.lastXOffset - curX);
                }

                if (curX + this.images[i].width > this.width + this.lastXOffset) {
                    imgWidth = this.width + this.lastXOffset - curX;
                }
            }

            if (imgWidth>0) {
                this.images[i].visible = true;

                this.images[i].draw(
                    $("#galleryTop"),
                    x,
                    this.y, // y
                    imgOffset, // xoffset
                    0, // yoffset
                    imgWidth, // width
                    this.images[i].height  // height
                    );

                this.height = this.images[i].height;
            } else {
                this.images[i].visible = false;
            }

            curX += this.images[i].width;
        }

        this.totalImageWidth = curX;

        this.layout();
        this.drawBottom();
    }

    this.layout = function() {
        $('#galleryEventDiv').css("top", this.y);
        $('#galleryEventDiv').css("left", this.x);
        $('#galleryEventDiv').css("width", this.width);
        $('#galleryEventDiv').css("height", this.height);


        $("#galleryBottom").css("top", (this.y + this.height));
        $("#galleryBottom").css("left", this.x);
    }


    this.drawBottom = function() {
        $("#galleryBottom").html("");

        var scale = this.width / this.totalImageWidth;

        if (scale>1)
            scale = 1;

        new APositionBar(
            this,
            $("#galleryBottom"),
            this.width,
            scale,
            //this,
            this.lastXOffset * scale
        );

        if (this.bottomHtml != undefined) {
            html = this.bottomHtml;
            $("#galleryBottom").append(html);
        }

    }

    var drager = new ADrager($("#galleryEventDiv"), $("#galleryEventDiv"), this);

    $("#galleryEventDiv").mousemove( function(event) {
        for(var i=0; i<images.length; i++) {
            if (images[i].visible)
                images[i].onmousemove(event);
        }

        event.preventDefault();
    });



    $("#galleryEventDiv").mouseup( function(event) {
        if (drager.delta == 0) {

            for(var i=0; i<images.length; i++) {
                if (images[i].visible)
                    images[i].onclick(event);
            }

            event.preventDefault();
        }
    });

    var touchstartEvent;

    $("#galleryEventDiv").bind('touchstart', function(event) {
        touchstartEvent = event;
    });

    $("#galleryEventDiv").bind('touchend', function(event) {

        if (!videoMode && drager.delta == 0) {

            event.pageX = touchstartEvent.originalEvent.touches[0].pageX;
            event.pageY = touchstartEvent.originalEvent.touches[0].pageY;

            for(var i=0; i<images.length; i++) {
                if (images[i].visible)
                    images[i].onclick(event);
            }

            event.preventDefault();
        } else {
            videoMode = false;
        }
    });

    this.onDrag = function(delta) {
        var x = this.lastXOffset - delta;

        if (x<0)
            x = 0;

        if (x > this.totalImageWidth - this.width)
            x = this.totalImageWidth - this.width;

        this.draw(x);
    }

    this.scrollBarCallBack = function(scrollBar) {
        this.draw(
            scrollBar.offset
                * this.totalImageWidth
                / scrollBar.slideAreaWidth
        );
    }

    var self = this;

    $(window).resize(function() {
        self.draw();
    });

}