autoSlideshowPresenter = {
    images: [],
    curTimeout: null,
    init: function()
    {
        this.el = jQuery('body').find('.slideshow.main');
        this.el.append('<div class="dotContainer"></div>');
    },
    addImage: function(imageUrl)
    {
        this.el.find('.dotContainer').append('<a class="dot" id="dot_' + this.images.length + '" onclick="autoSlideshowPresenter.gotoImage(' + this.images.length + ')"></a>');
        this.images.push(imageUrl);
        var preloadImg = new Image(912, 335);
        preloadImg.src = imageUrl;
    },
    nextImage: function()
    {
        var idx = this.curImage + 1;
        if (idx >= this.images.length)
        {
            idx = 0;
        }
        this.gotoImage(idx);
    },
    prevImage: function()
    {
        var idx = this.curImage - 1;
        if (idx < 0)
        {
            idx = this.images.length;
        }
        this.gotoImage(idx);
    },
    gotoImage: function(idx)
    {
        if (this.curTimeout) {
            clearTimeout(this.curTimeout);
        }
        this.curTimeout = setTimeout(function() {
            autoSlideshowPresenter.nextImage();
        }, 5000);
        this.curImage = idx;
        this.el.find('.dot').removeClass('selected');
        this.el.find('#dot_' + idx).addClass('selected');
        var oldImg = this.el.find('img');
        oldImg.fadeOut(500, function() {
            oldImg.remove();
        });
        var newImg = jQuery('<img src="' + this.images[idx] + '" alt="" style="display: none" />');
        this.el.find(".img").append(newImg);
        newImg.fadeIn(500);
    },
    render: function()
    {
        this.gotoImage(0);
    }
}

galleryPresenter = {
    images: [],
    curMainIdx: 0,
    curSubIdx: 0,
    init: function()
    {
        this.el = jQuery('.slideshow');
        this.el.append('<a class="prev" onclick="galleryPresenter.prevImage()"></a><a class="next" onclick="galleryPresenter.nextImage()"></a>');
    },
    addImage: function(image)
    {
        this.images.push([image]);
        var preloadImg = new Image(912, 335);
        preloadImg.src = image;
    },
    addImagePair: function(before, after)
    {
        this.images.push([before, after]);
        var preloadImg = new Image(665, 380);
        preloadImg.src = before;
        var preloadImg = new Image(665, 380);
        preloadImg.src = after;
    },
    nextImage: function()
    {
        var mainIdx = this.curMainIdx;
        var subIdx = this.curSubIdx;
        var imgSet = this.images[mainIdx];
        var transition = 'fade';
        if (++subIdx >= imgSet.length)
        {
            subIdx = 0;
            mainIdx++;
            transition = 'left';
        }
        if (mainIdx >= this.images.length) {
            mainIdx = 0;
        }
        this.gotoImage(mainIdx, subIdx, transition);
    },
    prevImage: function()
    {
        var mainIdx = this.curMainIdx;
        var subIdx = this.curSubIdx;
        var imgSet = this.images[mainIdx];
        var transition = 'fade';
        if (--subIdx < 0)
        {
            subIdx = imgSet.length - 1;
            mainIdx--;
            transition = 'right';
        }
        if (mainIdx < 0)
        {
            mainIdx = this.images.length - 1;
        }
        this.gotoImage(mainIdx, subIdx, transition)
    },
    gotoImage: function(mainIdx, subIdx, transition)
    {
        this.curMainIdx = mainIdx;
        this.curSubIdx = subIdx;
        var oldImg = this.el.find('img');
        var newImg = jQuery('<img src="' + this.images[mainIdx][subIdx] + '" alt=""' + (transition == 'fade' ? ' style="display:none;"' : (transition == 'right' ? ' style="left: -665px;"' : ' style="left: 665px;"')) + ' />');
        this.el.find(".img").prepend(newImg);
        if (transition == 'fade') {
            oldImg.fadeOut(500, function()
            {
                oldImg.remove();
            });
            newImg.fadeIn(500);
        }
        else if (transition == 'right') {
            oldImg.animate({
                left: oldImg.width()
            }, 500, 'swing', function()
            {
                oldImg.remove();
            });
            
            newImg.animate({
                left: 0
            }, 500, 'swing');
        }
        else {
            oldImg.animate({
                left: oldImg.width() * -1
            }, 500, 'swing', function()
            {
                oldImg.remove();
            });
            
            newImg.animate({
                left: 0
            }, 500, 'swing');
        }
    },
    render: function()
    {
        this.gotoImage(0, 0, 'fade');
    }
}