jQuery.fn.extend( {

    totalWidth : function () {
        var width = $(this).width();
        width += parseInt($(this).css('margin-left'));
        width += parseInt($(this).css('margin-right'));
        width += parseInt($(this).css('border-right-width'));
        width += parseInt($(this).css('border-left-width'));
        
        return width;
    },

    totalHeight : function () {
        var width = $(this).height();
        width += parseInt($(this).css('margin-top'));
        width += parseInt($(this).css('margin-bottom'));
        width += parseInt($(this).css('border-top-width'));
        width += parseInt($(this).css('border-bottom-width'));

        return width;
    },

    imageGallery : function () {
        var
        canvas = $('dd', this),
        mask = $('<div/>')
            .addClass('imagegallery_mask')
            .appendTo(canvas),

        reel = $('<div/>')
            .addClass('imagegallery_reel')
            .appendTo(mask),

        links = $('a.imagegallery')
            .appendTo(reel),

        reelWidth = links.length * $(links[0]).totalWidth(),

        maskWidth = mask.width(),

        speed = 3,

        fastSpeed = 6,

        interval = 0,

        left = 0,

        min = 0,

        max = reelWidth - maskWidth;


        mask
            .css('height',$(links[0]).totalHeight());

        if (max < 0) {
            return $(this);
        }

        $('<a/>')
            .attr('href','#')
            .addClass('imagegallery_control-left')
            .appendTo(canvas)
            .append($('<span/>').text('<'))
            .mouseover(function () {
                moveReel(speed);
            })
            .mouseout(function () {
                stopReel();
            })
            .mousedown(function () {
                moveReel(fastSpeed);
            })
            .mouseup(function () {
                $(this)
                    .blur()
                    .mouseover();
            })
            .click(function () {
                return false;
            });

        $('<a/>')
            .attr('href','#')
            .addClass('imagegallery_control-right')
            .appendTo(canvas)
            .append($('<span/>').text('>'))
            .mouseover(function () {
                moveReel(-speed);
            })
            .mouseout(function () {
                stopReel();
            })
            .mousedown(function () {
                moveReel(-fastSpeed);
            })
            .mouseup(function () {
                $(this)
                    .blur()
                    .mouseover();
            })
            .click(function () {
                return false;
            });

        function moveReel(move) {
            stopReel();
            interval = window.setInterval(function () {
                if (left + move <= -max) {
                    stopReel();
                    reel.css('left',-max);
                } else if (left + move >= min) {
                    stopReel();
                    reel.css('left',min);
                } else {
                    left += move;
                    reel.css('left',left);
                }
            },20);
        }

        function stopReel() {
            window.clearInterval(interval);
        }

        return $(this);
    }
});

$(function () {
   $('dl.imagegallery').imageGallery();
});