var thumbs = null;
var slideShow = null;
var imageZoom = null;
var cancelSlideShow = false;

window.addEvent('domready', function() {
    //    var slider = new Slider({ url: 'portraits.js' });
    var links = $$('#bottomNav a').each(
        function(item, index) {
            item.addEvent('click', function(e, text) {
                e.stop();
                cancelSlideShow = true;
                if (slideShow) {
                    slideShow.stop();
                }
                initSlider("json/" + text + ".js");
            } .bindWithEvent(this, item.get('text')));
        }
    , this);
    initSlideShow();
    disableSelection(document.body) //Disable text selection on entire body
});

function initGoogleTracker() {
	try {
		var pageTracker = _gat._getTracker("UA-11688011-1");
		pageTracker._trackPageview();
	} catch(err) {}
}

function disableSelection(target) {
    if (typeof target.onselectstart != "undefined") //IE route
        target.onselectstart = function() { return false }
    else if (typeof target.style.MozUserSelect != "undefined") //Firefox route
        target.style.MozUserSelect = "none"
    else //All other route (ie: Opera)
        target.onmousedown = function() { return false }
    target.style.cursor = "default"
}

function getWindowWidth() {
    var windowWidth = 0;
    if (typeof (window.innerWidth) == 'number') {
        windowWidth = window.innerWidth;
    }
    else {
        if (document.documentElement && document.documentElement.clientWidth) {
            windowWidth = document.documentElement.clientWidth;
        }
        else {
            if (document.body && document.body.clientWidth) {
                windowWidth = document.body.clientWidth;
            }
        }
    }
    return windowWidth;
}

var initSlider = function(urlJsonImages) {
    if ($chk(thumbs)) {
        thumbs.startRequest(urlJsonImages);
    } else {
        thumbs = new Thumblist({ url: urlJsonImages });
    }
}

var initSlideShow = function() {
    var request = new Request.JSON(
    { 'url': 'json/slideshow.js',
        method: "get",
        noCache: true,
        onSuccess: function(jsonObj) {
            if (!cancelSlideShow) {
                slideShow = new SlideShow('galleryContainer', jsonObj.images);
                slideShow.play(-1);
            }
        },
        onFailure: function(xhr) {
            alert(xhr);
        }
    }).send();
}

var Thumblist = new Class({
    Implements: [Events, Options],

    options: {
        transition: Fx.Transitions.linear, //Fx.Transitions.Cubic.easeOut
        currentSlide: 0,
        //itemsVisible: 3,
        thumbsContainer: 'thumbs',
        elementScrolled: 'thumbContainer',
        outerContainer: 'galleryContainer',
        hideContainer: 'mainContainer',
        thumbType: 'div',
        url: 'json/json.js'
    },
    initialize: function(options) {
        this.setOptions(options);

        this.images = $(this.options.thumbsContainer).getElements(this.options.thumbType);
        this.fxScroll = new Fx.Scroll(this.options.elementScrolled, {
            transition: this.options.transition,
            onComplete: function() {
                this.updateNavigation();
            } .bind(this)
        });
        this.fxTween = new Fx.Tween(this.options.hideContainer);

        $(this.options.thumbsContainer).addEvent('mousewheel', function(ev) {
            new Event(ev).stop();
            ev.wheel < 0 ? $('left').fireEvent('click') : $('right').fireEvent('click');
        } .bind(this));

        $(this.options.outerContainer).addEvent('onHide', function() { this.showThumbs(); } .bind(this));
        $(this.options.outerContainer).addEvent('onShow', function() { this.hideThumbs(); } .bind(this));

        this.startRequest(this.options.url);
    },

    addNavigation: function() {
        if (this.slideLeft == null) {
            this.slideLeft = new Element('a', {
                'id': 'left',
                'class': 'slideLeft',
                'events': { 'click': function() { this.slide(-1); } .bind(this) },
                'styles': { 'opacity': 0 }
            }).injectBefore(this.options.elementScrolled);
        }
        if (this.slideRight == null) {
            this.slideRight = new Element('a', {
                'id': 'right',
                'class': 'slideRight',
                'events': { 'click': function() { this.slide(1); } .bind(this) },
                'styles': { 'opacity': 0 }
            }).injectBefore(this.options.elementScrolled);
        }
    },

    updateNavigation: function() {
        this.addNavigation();

        if (this.options.currentSlide > 0) {
            this.slideLeft.fade('in');
        } else {
            this.slideLeft.fade('out');
        }

        var lastImageIndex = this.images.length - 1;
        var lastImage = this.images[lastImageIndex];
        var position = lastImage.getPosition();
        var lastImageCoordinates = lastImage.getCoordinates();
        var outerContainer = $(this.options.outerContainer);
        var relativePosition = lastImage.getPosition(outerContainer);
        var coordinates = outerContainer.getCoordinates();

        if (lastImageCoordinates.right > (coordinates.right - 50)) {
            this.slideRight.fade('in');
        } else {
            this.slideRight.fade('out');
        }
    },
    
    computeTotalThumbWidths: function() {
        var thumbListWidth = 0;
        this.images.each(function(image) {
            thumbListWidth += image.getSize().x;
        } .bind(this));
        return thumbListWidth;
    },

    computeThumbListWidth: function() {
        var thumbListWidth = 0;
        this.images.each(function(image) {
            thumbListWidth += image.getSize().x;
        } .bind(this));
        var windowWidth = getWindowWidth() - 100; //$('mainContainer').getStyle('width').toInt();
        var width = Math.min(thumbListWidth, windowWidth) + 100;

        return width;
    },

    setWidth: function() {
        var newThumbListWidth = this.computeThumbListWidth();
        if (this.thumbListWidth != 0) {
            $(this.options.outerContainer).setStyle('width', this.thumbListWidth);
        }

        this.fxMorph = new Fx.Morph(this.options.outerContainer,
        {
            duration: 500,
            transition: Fx.Transitions.Cubic.easeInOut
        }
        ).start({
            'width': newThumbListWidth,
            'height': 199
        }).chain(function() {
            if (this.computeTotalThumbWidths() > getWindowWidth()) {
                $(this.options.outerContainer).setStyle('width', '100%');
            }
            this.thumbListWidth = newThumbListWidth;
        } .bind(this));
    },

    slide: function(step) {
        if (this.options.currentSlide == 0 && step < 0) return;
        if (this.options.currentSlide >= this.images.length - 1 && step > 0) return;

        this.fxScroll.cancel();

        this.options.currentSlide += step;
        this.fxScroll.toElement(this.images[this.options.currentSlide]);
    },

    hideThumbs: function() {
        this.fxTween.start('opacity', 0);
        this.slideRight.fade('out');
        this.slideLeft.fade('out');
    },

    showThumbs: function() {
        this.fxTween.start('opacity', 1);
        this.updateNavigation();
    },

    addImages: function(images) {
        var gallery = $(this.options.thumbsContainer);
        var loadingImg = Asset.image("imagezoom/images/loading.gif");

        gallery.empty();
        images.each(function(image) {
            Asset.image(image.src);
            var el = new Element('div', { 'class': 'thumbnail' });
            var a = new Element('a', { 'href': image.href, 'rel': image.rel, 'target': image.target }).injectInside(el);
            var img = new Element('img', { 'src': image.src, 'title': image.alt, 'alt': image.alt }).injectInside(a);
            el.inject(gallery);

            if (image.sublist == null) {
                a.addEvent("click", function() {
                    this.blur();

                    var imagezoom = new Imagezoom({
                        image: this.href,
                        caption: image.caption,
                        title: image.alt,
                        info: image.info,
                        startElement: img,
                        container: $('galleryContainer'),
                        loadImage: loadingImg,
                        detail1: image.detail1,
                        detail2: image.detail2,
                        detail3: image.detail3
                    });

                    imagezoom.show(true);
                    return false;
                });
            } else {
                a.addEvent("click", function() {
                    initSlider("json/" + image.sublist);
                    return false;
                });
            }
        });
        this.images = $(this.options.thumbsContainer).getElements(this.options.thumbType);
    },

    startRequest: function(jsonUrl) {
        var request = new Request.JSON(
        { 'url': jsonUrl + "?" + Date(),
            noCache: true,
            method: "get",
            onSuccess: function(jsonObj) {
                this.options.currentSlide = 0;
                this.addImages(jsonObj.images);
                this.setWidth();
                this.fxScroll.toElement(this.images[this.options.currentSlide]);
            } .bind(this),
            onFailure: function(xhr) {
                alert(xhr);
            } .bind(this)
        }).send();
    }
})