window.arivis = window.arivis || {};
window.arivis.website = window.arivis.website || {};

/**
 * @constructor
 */
arivis.website.Gallery = function () {
	// Default Configuration
	this.conf = {
		containerClass: 		"gallery",

		prevScrollClassName:	"prevScroll",
		nextScrollClassName:	"nextScroll",
		scrollClassName:		"galleryScroll",
		hideIfSingle:			true,
		scrollerHide:			false,
		itemHeight:				0,

		contentHTML:		'<!-- {COUNT} --><div class="prevScroll scroller"></div><div class="galleryScroll"><table><tr>{LIST}</tr></table></div><div class="nextScroll scroller"></div>',
		itemHTML:		
			'<td class="galleryItem"><a id="galleryItem_{IMAGEID}" class="galleryLink" title="{TITLE}"><img src="{SRC}" alt="{TITLE}" /></a></td>'
	};

	// init
    this.init();
};

arivis.website.Gallery.prototype = {

	container: null,

	items: null,
	currentItem: null,

	// the HTML element scroll
    scrollElement: null,
    
	// the left scroll button 
    scrollLeft: null,
    
    // the right scroll button
    scrollRight: null,
    
    // the table containing the gallery entries
    table: null,
    
	// scroll method
	scroller: null,		
	
	// number of pixels scrolled
	scrollSpeedPixel: 3,
    
	// number of milli second between scrolling events
    scrollSpeedInterval: 30,

	// Element id of the gallery Item
	galleryItemId: [],

    toString: function () {
        return "arivis.webview.Gallery";
    },

    /**
     * Sets up the gallery object.
     */
    init: function () {

        this.createHTML();
    },

    /**
     * creates the html elements for the gallery
     * 
     * @method createHTML
     * @return {Boolean}      True if the operation was successful.
     */
	createHTML: function() {
	
	    // safe parent element
		this.container = document.getElementsByClassName(this.conf.containerClass)[0];
		this.container.style.width = this.container.offsetWidth;
		this.container.style.overflow = "hidden";

		this.items = $$(".gallerylist img");
		this.currentItem = $$(".gallerylist img.current")[0];

		// hide gallery container if count <= 1
		if (this.conf.hideIfSingle && this.items.length <= 1){
			this.container.style.display = "none";
			return;
		}

        // get dom elements
        this.scrollLeft    = $$(".gallery .prevScroll")[0];
        this.scrollRight   = $$(".gallery .nextScroll")[0];
		this.scrollElement = $$(".gallery .galleryScroll")[0];

		if (this.currentItem)
			this.jumpTo(this.currentItem);

        // register listeners
		if (this.scrollLeft) {
			Event.observe(this.scrollLeft, "mouseover", this.startScrollLeft.bind(this) );
			Event.observe(this.scrollLeft, "mouseout", this.stopScroll.bind(this) );
		}
		if (this.scrollRight) {
			Event.observe(this.scrollRight, "mouseover", this.startScrollRight.bind(this) );
			Event.observe(this.scrollRight, "mouseout", this.stopScroll.bind(this) );
		}
		this.stopScroll();
	},

    /**
     * calc url
     * 
     * @method getPreviewUrl
     * @private
     */
   	getPreviewUrl: function(image) {
		var url = image.url;
		var param = new Array();
		var height = (this.conf.itemHeight)
			? this.conf.itemHeight
			: this.container.offsetHeight;
		var zoom = height / image.size.height;
		param["z"] = zoom;
		param["x"] = 0;
		param["y"] = 0;
		param["w"] = parseInt(image.size.width * zoom);
		param["h"] = height;
		url = composeURL(url, param);
		return url;
	},

    /**
     * Jump to an gallery frame
     * 
     * @method jumpTo
     */
   	jumpTo: function(object) {
		if (typeof object != "object")
			return;
		//this.stopScroll();
		for (var i= 0; i < this.items.length; i++){
			if (this.items[i] == object){
				var offset = Element.cumulativeOffset(object).left;
				var centerElement = Element.cumulativeOffset(object).left + object.offsetWidth/2;
				var centerContainer = Element.cumulativeOffset(this.container).left + this.container.offsetWidth/2;
				var left = centerElement - centerContainer;
				this.scrollElement.scrollLeft = left; 
				break;
			}
		}
	},

    /**
     * Stop the automatic scrolling of the gallery
     * 
     * @method stopScroll
     * @private
     */
   	stopScroll: function() {
		window.clearTimeout(this.scroller);
		window.clearTimeout(this.startScroller);
		if (this.conf.scrollerHide){
			(this.scrollElement.scrollLeft == 0)
				? this.scrollLeft.style.visibility = "hidden"
				: this.scrollLeft.style.visibility = "visible";
			(this.scrollElement.scrollLeft + this.scrollElement.offsetWidth >= this.scrollElement.scrollWidth)
				? this.scrollRight.style.visibility = "hidden"
				: this.scrollRight.style.visibility = "visible";
		}
   	},

    /**
     * starts to automaticly scroll the gallery to the left
     * 
     * @method startScrollLeft
     * @private
     */
   	startScrollLeft: function() {
		window.clearTimeout(this.scroller);
		window.clearTimeout(this.startScroller);
		var self = this;
		this.startScroller = window.setTimeout( function(){
				self.scroller = window.setTimeout( function(){ self.doScrollLeft(); }, this.scrollSpeedInterval);
			}, 400);
   	},

    /**
     * starts to automaticly scroll the gallery to the right
     * 
     * @method startScrollRight
     * @private
     */
   	startScrollRight: function() {
		window.clearTimeout(this.scroller);
		window.clearTimeout(this.startScroller);
		var self = this;
		this.startScroller = window.setTimeout( function(){
				self.scroller = window.setInterval( function(){ self.doScrollRight(); }, this.scrollSpeedInterval);
			}, 400);
   	},

    /**
     * scrolls the gallery a fixed amount of pixels to the left
     * 
     * @method doScrollLeft
     * @private
     */
   	doScrollLeft: function() {
		window.clearTimeout(this.scroller);
        var left = this.scrollElement.scrollLeft - this.scrollSpeedPixel;
        var maxRight = 0;
		if (left < 0) {
			this.stopScroll();
			left = 0;
		}
        this.scrollElement.scrollLeft = left; 
		var self = this;
		self.scroller = window.setTimeout( function(){ self.doScrollLeft(); }, this.scrollSpeedInterval);
   	},
   	 
    /**
     * scrolls the gallery a fixed amount of pixels to the right
     * 
     * @method doScrollRight
     * @private
     */
   	doScrollRight: function() {
		window.clearTimeout(this.scroller);
   		var left = this.scrollElement.scrollLeft + this.scrollSpeedPixel;
		if (left > this.scrollElement.innerWidth - this.scrollElement.offsetWidth) {
			this.stopScroll();
			left = this.scrollElement.innerWidth - this.scrollElement.offsetWidth;
		}
        this.scrollElement.scrollLeft = left; 
		var self = this;
		self.scroller = window.setTimeout( function(){ self.doScrollRight(); }, this.scrollSpeedInterval);
   	}
};

// init
Event.observe(window, 'load', function(){ 
	arivis.website.gallery = new arivis.website.Gallery();
});