fbPageOptions = {
    urlGraphics: './assets/templates/bodena_main/js/floatbox/graphics/',
    urlLanguages: './assets/templates/bodena_main/js/floatbox/languages/',
    language: 'de',
    resizeTool: 'both',
    liveImageResize: true
  };

function isImageOk(img) {
    if (img.complete == false)
	{
        return false;
    }
    if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0)
	{
        return false;
    }
    return true;
}


var PicBrowser = Class.create({
	intervalTime: 30,
	scrollPixels: 2,

	browser: null,
	buttonLeft: null,
	buttonRight: null,
	scrollPane: null,
	pictures: [],
	viewport: null,
	viewportRange: [],

	interval: null,
	autoscroll: false,

	picsLoaded: false,
	tryLoadPics: 20,
	tryInterval: 350,

	initialize: 	function(id)
					{
						this.browser = $(id);
						this.buttonLeft = this.browser.down('div.buttonLeft');
						this.buttonRight = this.browser.down('div.buttonRight');
						this.viewport = this.browser.down('div.pictures');
						this.scrollPane = this.browser.down('div.picturesInner');
						this.init();

					},
	init:			function()
					{

						if(!this.picsLoaded && this.tryLoadPics > 0)
						{
							this.doWaitForPics();
							if(!this.picsLoaded)
								this.tryLoadPics--;

							setTimeout(this.init.bind(this), this.tryInterval);
							return;
						}
						this.startAutoScroll();
						this.viewportRange = [this.viewport.cumulativeOffset().left, this.viewport.cumulativeOffset().left+this.viewport.getWidth()];
						this.scrollPane.select('div.galleryImage').each(function(objDiv, key)
														{
															this.pictures[key] = {
																obj: objDiv,
																x1:
																	parseInt(objDiv.cumulativeOffset().left-parseInt(objDiv.getStyle('margin-left'))),
																x2:
																	parseInt(objDiv.cumulativeOffset().left+objDiv.getWidth()+parseInt(objDiv.getStyle('margin-right')))
																};

														}.bind(this));
						this.scrollPane.style.marginLeft = 0;

						this.buttonLeft.observe('mouseover', this.doScrollLeft.bind(this));
						this.buttonLeft.observe('mouseout', this.stopScroll.bind(this));
						//this.buttonLeft.observe('click', this.startAutoScrollLeft.bind(this));

						this.buttonRight.observe('mouseover', this.doScrollRight.bind(this));
						this.buttonRight.observe('mouseout', this.stopScroll.bind(this));
						//this.buttonRight.observe('click', this.startAutoScrollRight.bind(this));

						this.scrollPane.observe('mouseout', this.stopScroll.bind(this));
						this.viewport.observe('mouseout', this.stopScroll.bind(this));
					},

	stopScroll:			function()
						{
							this.buttonRight.removeClassName('active');
							this.buttonLeft.removeClassName('active');
							clearInterval(this.interval);
						},
	startAutoScrollLeft:	function()
							{
								return this.startAutoScroll(true);
							},
	startAutoScrollRight:	function()
							{
								return this.startAutoScroll();
							},
	doWaitForPics: function()
					{
						this.picsLoaded = true;
						this.scrollPane.select('img').each(function(objImage)
															{
																if(!this.picsLoaded)
																	return;
																if(!isImageOk(objImage))
																	this.picsLoaded = false;
															}, this);
					},
	startAutoScroll:	function(dirLeft)
						{
							this.stopScroll();
							this.autoScroll = true;
							if(dirLeft)
							{
								return this._doScrollLeft();
							}
							return this._doScrollRight();
						},
	doScrollRight:		function()
						{
							this.autoScroll = false;
							return this._doScrollRight();
						},
	doScrollLeft:		function()
						{
							this.autoScroll = false;
							return this._doScrollLeft();
						},
	_doScrollRight:		function()
						{
							this.stopScroll();
							this.buttonRight.addClassName('active');
							this.interval = setInterval(this.__scrollRight.bind(this),this.intervalTime)
						},
	_doScrollLeft:		function()
						{
							this.stopScroll();
							this.buttonLeft.addClassName('active');
							this.interval = setInterval(this.__scrollLeft.bind(this),this.intervalTime)
						},
	__scrollLeft:		function()
						{
							var scrollPixels = this.scrollPixels
							var margLeft = parseInt(this.scrollPane.style.marginLeft);
							if(margLeft < 0)
							{
								if(margLeft+scrollPixels > 0)
									scrollPixels = -margLeft;

								this.scrollPane.style.marginLeft = (margLeft+scrollPixels)+'px';
							}
							else
							{
								this.stopScroll();
								if(this.autoScroll)
									setTimeout(this._doScrollRight.bind(this), 1000);
							}
						},
	__scrollRight:		function()
						{
							var lastPicX2 = this.pictures[this.pictures.length-1].x2;
							var lastPicX2Scroll = this._posToScroll(lastPicX2);

							var scrollPixels = this.scrollPixels
							var posEnd = -lastPicX2Scroll+this.viewport.getWidth()-20;
							var margLeft = parseInt(this.scrollPane.style.marginLeft);
							if(margLeft > posEnd)
							{
								if(margLeft-scrollPixels < posEnd)
									scrollPixels = margLeft-posEnd;

								this.scrollPane.style.marginLeft = (margLeft-scrollPixels)+'px';
							}
							else
							{
								this.stopScroll();
								if(this.autoScroll)
									setTimeout(this._doScrollLeft.bind(this), 1000);
							}
						},

	_posToScroll:		function(pos)
						{
							return pos-this.viewportRange[0];
						},
	_scrollToPos:		function(pos)
						{
							return pos+this.viewportRange[0];
						},
	_buildPositions:	function()
						{
							this.pictures.each(
								function(objImg,key)
								{
										objImg.title = key;
										this.picturesPositions[key] = objImg.cumulativeOffset().left-this.viewportRange[0];
								}.bind(this)
							);
						},
});
document.observe("dom:loaded", main);

function main()
{
	if($('picBrowser'))
	{
		var pb = new PicBrowser($('picBrowser'));
	}
}

function picBrowserLeftOver(event)
{

}
function picBrowserRightOver(event)
{
	new Effect.Move(scrollPane,{ x: 0, y: 20, mode: "relative", duration: 0.5, transition: Effect.Transitions.sinoidal});
}