var Gallery = Class.create({
    initialize: function(pathThumb, pathBig, images, captions) {
        this.intPos = 0;
        this.images = images;
        this.captions = captions;
        this.pathThumb = pathThumb;
        this.pathBig = pathBig;
        //HOLDER
        document.write('<div id="gh" class="GalleryHolder"></div>')

        //BIG HOLDER
        $('gh').insert(new Element("div", { id: 'divBig' }));

        //BIG IMAGE
        $('divBig').insert(new Element("img", {
            id: 'imgBig'
        }).observe('click', function() {
            //
        }));

        //INFO
        $('divBig').insert(new Element("div", { 'id': 'divImageInfo' }).addClassName('ImageInfo'));
        $('divImageInfo').insert(new Element("div", { 'id': 'imgInfo' }).addClassName('ImageInfoLeft'));
        $('divImageInfo').insert(new Element("div", { 'id': 'galleryInfo' }).addClassName('ImageInfoRight'));

        //NAVIGATION
        $('gh').insert(new Element("div", { 'id': 'divGalleryNavBar' }).addClassName('GalleryNavBar'));

        //PREV
        $('divGalleryNavBar').insert(new Element("div", { 'id': 'divGalleryNavBarLeft'
        }).observe('click', function() {
            if (epicGallery.intPos > 0) {
                epicGallery.intPos--;
                epicGallery.loadImage(epicGallery.intPos);
                epicGallery.loadThumbs();
            }
        }).addClassName('GalleryNavBarLeft'));

        //THUMBS
        $('divGalleryNavBar').insert(new Element("div", { 'id': 'imgThumbsHolder' }).addClassName('GalleryNavBarImages'));

        //NEXT
        $('divGalleryNavBar').insert(new Element("div", { 'id': 'divGalleryNavBarRight'
        }).observe('click', function() {

            if (epicGallery.intPos + 1 < images.length) {
                epicGallery.intPos++;
                epicGallery.loadImage(epicGallery.intPos);
                epicGallery.loadThumbs();
            }

        }).addClassName('GalleryNavBarRight'));

        this.loadImage(this.intPos);
        this.loadThumbs();

    },
    loadThumbs: function() {



        var start = 0
        if (this.intPos - 3 > 0)
            start = this.intPos - 3;
        var stop = start + 7;

        if (stop >= images.length) {
            stop = images.length;
            start = stop - 7;
        }


        $('imgThumbsHolder').update('');
        var imgFile = '';
        for (var i = start; i < stop; i++) {

            var cssClass = 'InActiveImg';
            if (i == this.intPos)
                cssClass = 'ActiveImg';



            imgFile = images[i];
            //BIG IMAGE
            $('imgThumbsHolder').insert(new Element("img", {
                'src': this.pathThumb + images[i]
            }).observe('click', function() {
                //  alert(decodeURI(this.src.substring(this.src.lastIndexOf('/') + 1)));


                epicGallery.intPos = epicGallery.indexOf(decodeURI(this.src.substring(this.src.lastIndexOf('/') + 1)));

                epicGallery.loadImage(epicGallery.intPos);
                epicGallery.loadThumbs();
            }).addClassName(cssClass));
        }

    },
    indexOf: function(strPath) {
        for (i = 0; i <= epicGallery.images.length; i++) {
            if (images[i] == strPath)
                return i;
        }
        return 0;

    },
    loadImage: function(pos) {
        $('imgBig').src = this.pathBig + images[pos];
        $('imgInfo').update(captions[pos]);
        $('galleryInfo').update('Bild ' + (pos + 1) + ' av ' + images.length);
    }
});