_H.imageGallery = function() {

    var DOMgallery              = null;
    var gallery                 = null;
    var scroller, sb            = null;
    var galleryCnt              = null;
    var galleryWidth            = 0;
    var galleryScrolledWidth    = 0;
    var currentImage            = 0;
    var images                  = [];
    var pl, nl                  = null;
    var lsc, rsc                = null;
    var ieOld                   = jQuery.browser.msie && (jQuery.browser.version < 7);

    var enableJsControls = function(id) {

        DOMgallery  = new _H.DOM();
        _H.addClass(gallery, "js");

        /* set decorators and get images total width */
        getImages();
        //addMask();
        addScrollbar(id);
        addArrows(id);

        /* set links events */
        setArrowsLinkClick(id);

    };

    var addArrows       = function(id) {
        var arrowsNode = {
            "ul" : {
                "class": "ig_arrows",

                "li~1" : {
                    "class" : "ig_prev disabled",
                    "a"     : {
                        "id"        : [id, "_prev_arrow"].join(''),
                        "text"      : "Precedente",
                        "title"     : "Precedente",
                        "href"      : "#",
                        "onclick"   : function() { return goToImage(-1); }
                    }
                },
                "li~2" : {
                    "class" : "ig_next",
                    "a"     : {
                        "id"        : [id, "_next_arrow"].join(''),
                        "text"      : "Successiva",
                        "title"     : "Successiva",
                        "href"      : "#",
                        "onclick"   : function() { return goToImage(+1); }
                    }
                }
            }
        };

        DOMgallery.create(arrowsNode).append("into", gallery);

    };

    var addMask         = function() {

        var leftMask = {
            "span" : {
                "class" : "ig_mask ig_mask_left",
                "text"  : "&nbsp;"
            }
        };
        var rightMask = {
            "span" : {
                "class" : "ig_mask ig_mask_right",
                "text"  : "&nbsp;"
            }
        };

        DOMgallery.create(leftMask).append("into", gallery);
        DOMgallery.create(rightMask).append("into", gallery);

    };


    var addScrollbar    = function(id) {

        var sbnode = {
            "p" : {
                "class" : "ig_scrollbar",
                "a~1"   : {
                    "href"  : "#",
                    "class" : "left_scroll",
                    "id"    : [id, "_left_scroll"].join(''),
                    "onclick"   : function() { return goToImage(-1); }
                },
                "a~2"   : {
                    "href"  : "#",
                    "class" : "right_scroll",
                    "id"    : [id, "_right_scroll"].join(''),
                    "onclick"   : function() { return goToImage(+1); }
                },

                "strong" : {
                    "span"  : {
                        "text"  : "&nbsp;"
                    }
                }
            }
        };

        if (DOMgallery.create(sbnode).append("into", gallery)) {
            sb = _H.$$(gallery, "p")[0];
            scroller = _H.$$(sb, "strong")[0];


            lsc = _H.$([id, "_left_scroll"].join(''));
            rsc = _H.$([id, "_right_scroll"].join(''));

            /* se l'ultima immagine arrivasse a sinistra questo sarebbe la larghezza corretta */
            // scroller.style.width = [Math.floor(sb.offsetWidth/images.length), 'px'].join('');
            /* poiché l'ultima immagine resta a destra la dimensione della scrollbar è una proporzione data da
            tot width gallery : larghezza visibile gallery = tot width scroll : x */
            //alert(Math.floor(gallery.offsetWidth * sb.offsetWidth / galleryWidth));
            //alert(navigator.userAgent);
            if (galleryWidth < 856)
              galleryWidth =  856;
            if (!(/safari/i.test(navigator.userAgent))) {
              
              scroller.style.width = [Math.floor(gallery.offsetWidth * sb.offsetWidth / galleryWidth), 'px'].join('')
              
            }//if
            else {
              scroller.style.width = [Math.floor(gallery.offsetWidth * sb.offsetWidth / galleryWidth), 'px !important'].join('')
            }//else
            lsc.style.width = [scroller.offsetLeft, 'px'].join('')
            rsc.style.width = [sb.offsetWidth - scroller.offsetLeft - scroller.offsetWidth, 'px'].join('');
            //alert(["1 - ", lsc.offsetWidth, rsc.offsetWidth].join(' '));


            if (!ieOld) {

                scroller.style.cursor = 'pointer';

                var ratio = galleryWidth / sb.offsetWidth;
                var leftGalleryPos = 0;

                $(scroller).draggable({
                    axis        : "x",
                    containment : sb,

                    drag   : function() {
                        leftGalleryPos = Math.floor(scroller.offsetLeft * ratio);
                    },

                    stop    : function() {
                        var dfl = 0;
                        for (var i=0; i<images.length; i++) {
                            dfl = images[i]['distanceFromLeft'];
                            if (leftGalleryPos - dfl <= 0) {
                                currentImage = i;
                                break;
                            }
                        };

                        var imagepos = Math.min((images[currentImage]['distanceFromLeft']), (galleryWidth - gallery.offsetWidth));
                        $(galleryCnt).animate({ left: -imagepos }, 400);

                        var scrollpos = Math.min((images[currentImage]['distanceFromLeft'] / ratio), (sb.offsetWidth - scroller.offsetWidth));
                        $(scroller).animate({ left: scrollpos }, 400, function() {
                            setArrowsControl(imagepos);
                        });


                    }
                });

            }

        };
    };

    var setArrowsControl    = function(imagepos) {
        if (imagepos === 0) {
            _H.addClass(pl.parentNode, 'disabled');
            lsc.style.width = [scroller.offsetWidth, 'px'].join('');
            rsc.style.width = [sb.offsetWidth - scroller.offsetWidth, 'px'].join('');
        }
        else {
            lsc.style.width = [scroller.offsetLeft, 'px'].join('');
            rsc.style.width = [sb.offsetWidth - scroller.offsetWidth - scroller.offsetLeft, 'px'].join('');
            _H.removeClass(pl.parentNode, 'disabled');
        };
        //alert(["2 - ", lsc.offsetWidth, rsc.offsetWidth].join(' '));

        if (imagepos >= (galleryWidth - gallery.offsetWidth)) _H.addClass(nl.parentNode, 'disabled');
            else _H.removeClass(nl.parentNode, 'disabled');
    };


    var setArrowsLinkClick = function(id) {


        pl = _H.$([id, "_prev_arrow"].join(''));
        nl = _H.$([id, "_next_arrow"].join(''));

        pl.onclick = function() {
            return (_H.hasClass(this.parentNode, 'disabled'))? false : goToImage(-1);
        };

        nl.onclick = function() {
            return (_H.hasClass(this.parentNode, 'disabled'))? false : goToImage(+1);
        };
    };


    var goToImage = function(inc) {

        var nextImage = currentImage + inc;
        if (images[nextImage] === undefined) return false;

        /* animazione della foto */
        var x1 = images[nextImage]['distanceFromLeft'];
        x1 = Math.min(x1, (galleryWidth - gallery.offsetWidth))
        $(galleryCnt).animate({ left: -x1 }, 800);

        /* animazione della scrollbar */

        /* x1 : galleryWidth = x : scroller.parentNode.offsetWidth */
        s1 = Math.floor(x1 * scroller.parentNode.offsetWidth / galleryWidth);
        $(scroller).animate({ left: s1 }, 800 , function() {
            lsc.style.width = [scroller.offsetLeft, 'px'].join('');
            rsc.style.width = [sb.offsetWidth - scroller.offsetLeft - scroller.offsetWidth, 'px'].join('');
            //alert(["3 - ", lsc.offsetWidth, rsc.offsetWidth].join(' '));
        });


        currentImage = nextImage;


        /** enable-disable arrows */
        if (x1 >= (galleryWidth - gallery.offsetWidth)) _H.addClass(nl.parentNode, 'disabled');
        else _H.removeClass(nl.parentNode, 'disabled');

        if (x1 === 0) _H.addClass(pl.parentNode, 'disabled');
        else _H.removeClass(pl.parentNode, 'disabled');



        return false;
    };


    var getImages      = function() {
        //var img = _H.$$(gallery, "img");
        var img = _H.$$(gallery, "li");
        var j   = img.length;
        for (i=0; i<j; i++) {
            images[i] = {};
            images[i]['width']            = 223; //213; //img[i].offsetWidth;
            images[i]['distanceFromLeft'] = (images[i-1] !== undefined)? (images[i-1]['distanceFromLeft'] + images[i-1]['width'] + 2) : 0;
            galleryWidth += (images[i]['width'] + 2);
        };

    };


    return {

        init    : function(idGallery) {

            if (!_H.$(idGallery)) throw "No gallery found.";
            gallery = _H.$(idGallery);
            galleryCnt = _H.$$(gallery, "div")[0];

            setTimeout(function() {
                enableJsControls(idGallery);
            }, 20);
        }
    }


};