/*
gbWindow v1.0 mit MooTools v1.2

von gb media (www.gb-media.biz) 2009
Vielen Dank an die MooTools Entwickler
*/

var gbWindow = new Class({
	Implements: Options,
	
    options: {
		handleclass			: '.gbwindow',
		imgAr				: [],
		preloadimgAr		: [],
		popup				: null,
		alpha				: 0.8,
		durationIn			: 'normal',
		transitionIn		: Fx.Transitions.Expo.easeIn,
		durationOut			: 'short',
		transitionOut		: Fx.Transitions.Expo.easeOut,
		closeImg			: '',
		closeTitle			: 'close',
		nextTitle			: 'Weiter',
		prevTitle			: 'Zur&uuml;ck'
	},
	initialize: function(options){
		this.setOptions(options);
		this.clickAction();
	},
	
	clickAction: function (){
		this.bound = {};
		var anchorAr = $$(this.options.handleclass);
		anchorAr.each(function (el, i){
			// imgAr
			el.store('href', el.href);
			el.store('title', el.title);
			el.store('rev', el.rev);
			el.store('i', i);
			this.options.imgAr.push (el);
			// preloadimgAr
			if (this.getFileType(el.retrieve('href')) != 'swf'){
				this.options.preloadimgAr.push (el);
			}
			// event
			this.bound.onClickEvent = this.onClickEvent.bindWithEvent(this, el);
			$(el).addEvent('click', this.bound.onClickEvent);
		}.bind(this));
		// preload
		this.preloadFile();
	},
	// thumb event
	onClickEvent: function (event, el){
		this.openFile(el);
		return false;
	},
	// open window
	openFile: function (el){
		// overlay
		if (!this.overlay || this.overlay.getStyle('opacity') == 0){
			this.overlay = new Element('div', {
				'id':'overlay',
				'opacity': this.options.alpha,
				'styles': {
					'position': 'absolute',
					'top': '0',
					'left': '0',
					'width': '100%',
					opacity: 0
			    }
			}).injectInside(document.body);
		}
		// filecontainer
		this.filecontainer = new Element('div', {
			'id': 'filecontainer',
			'styles': {
				'position': 'absolute',
				'left': '0',
				'width': '100%',
				'text-align': 'center',
				opacity: 0
		    }
		}).injectInside(document.body);
		
		// filecontainer
		this.outline = new Element('div', {
			'id': 'outline',
			'styles': {
				'margin': '0 auto'
		    }
		}).injectInside(this.filecontainer);
		
		// file img || swf
		if (this.getFileType(el.retrieve('href')) != 'swf'){
			file = new Element('img', {
			'id': 'file',
				'src': el.retrieve('href'),
				'styles': {
					
			    }
			}).injectInside(this.outline);
			bottomWidth = file.offsetWidth;
		}else {
			swfdimensionAr = el.retrieve('rev').split('x');
			file = new Swiff(el.retrieve('href'),{
				'id': 'file',
				'width': swfdimensionAr[0],
				'height': swfdimensionAr[1],
				'container': this.outline,
				'params':{
					wMode:'opaque',
					swLiveConnect:'false'
				}
			});
			bottomWidth = swfdimensionAr[0];
		}
		this.outline.setStyle('width', bottomWidth+'px');
		// bottom
		bottom = new Element('div', {
			'id': 'bottom',
			'styles': {
				'margin-top': '-4px'
		    }
		}).injectInside(this.outline);
		
		// close container
		closewindow = new Element('div', {
			'id': 'closewindow',
			'styles': {
				'float': 'right'
		    }
		}).injectInside(bottom);
		
		// close
		if (this.options.closeImg != ''){
			closefile = new Element('img', {
				'id': 'closefile',
				'src': this.options.closeImg,
				'alt': this.options.closeTitle,
				'title': this.options.closeTitle,
				'styles': {
			    }
			}).injectInside(closewindow);
		}else {
			closefile = new Element('a', {
				'id': 'closefile',
				'html': this.options.closeTitle,
				'title': this.options.closeTitle,
				'styles': {
			    }
			}).injectInside(closewindow);
		}
		closefile.addEvent('click', function (){
			this.fadeOut(this.overlay);
			this.fadeOut(this.filecontainer);
		}.bind(this));
		// action für mouseover
		cursorAr = [closefile];
		
		// pager
		if (this.options.imgAr.length > 1){
			// pager container
			pager = new Element('div', {
				'id': 'pager',
				'styles': {
			    }
			}).injectInside(closewindow);
			// prev
			pagerprev = new Element('a', {
				'id': 'pagerprev',
				'html': '&laquo;',
				'title': this.options.prevTitle,
				'styles': {
			    }
			}).injectInside(pager);
			pagerprev.addEvent('click', function (){
				i = el.retrieve('i')-1;
				if (i < 0){
					i = this.options.imgAr.length-1;
				}
				this.fadeOut(this.filecontainer, this.options.imgAr[i]);
			}.bind(this, el));
			// info
			pagerinfo = new Element('span', {
				'id': 'pagerinfo',
				'html': (el.retrieve('i')+1)+' / '+this.options.imgAr.length,
				'styles': {
			    }
			}).injectInside(pager);
			// next
			pagernext = new Element('a', {
				'id': 'pagernext',
				'html': '&raquo;',
				'title': this.options.nextTitle,
				'styles': {
			    }
			}).injectInside(pager);
			pagernext.addEvent('click', function (){
				i = el.retrieve('i')+1;
				if (i >= this.options.imgAr.length){
					i = 0;
				}
				this.fadeOut(this.filecontainer, this.options.imgAr[i]);
			}.bind(this, el));
			// action für mouseover
			cursorAr.push(pagerprev, pagernext);
		}
		// info
		info = new Element('div', {
			'id': 'info',
			'html': el.retrieve('title') || '&nbsp;',
			'styles': {
		    }
		}).injectInside(bottom);
		// clear float
		clearfloat = new Element('div', {
			'styles': {
				'clear': 'both'
		    }
		}).injectInside(bottom);
		
		// mouseover cursor
		cursorAr.each(function (el, i){
			el.addEvent('mouseover', function (){
				this.setStyles({
				    cursor: 'pointer'
				});
			});
		});
		
		// resize
		window.addEvent('resize',function(){
			if(this.overlay.getStyle('opacity') == 0){
				return;
			};
			winh = this.getWindowHeight();
			this.overlay.setStyles({
				'height':winh[0]+winh[1]
			});
		}.bind(this));
		
		// fade
		if(this.overlay.getStyle('opacity') == 0){
			this.fadeIn(this.overlay, this.options.alpha);
		};
		
		
		this.fadeIn(this.filecontainer, 1);
	},
	
	// preload file
	preloadFile: function () {
		myImage = new Asset.images(this.options.preloadimgAr, {
			onload: function () {
			},
			onProgress: function() {
			},
			onComplete: function(){
				// popup
				if (gbWindow.options.popup != null && gbWindow.options.popup < gbWindow.options.imgAr.length){
					gbWindow.openFile(gbWindow.options.imgAr[gbWindow.options.popup]);
				}
			}
	    });
	},
	
	// fadin
	fadeIn: function (el, opac){
		winh = this.getWindowHeight();
		this.overlay.setStyles({
			'height':winh[0]+winh[1]
		});
		ani = new Fx.Morph(el, {duration: this.options.durationIn, transition: this.options.transitionIn});
		ani.start({
			opacity: opac
		});
	},
	
	// fadeout
	fadeOut: function (el, i){
		ani = new Fx.Morph(el, {duration: this.options.durationOut, transition: this.options.transitionOut});
		ani.start({
			opacity: 0
		}).chain(function() {
			el.destroy();
			if (i){
				this.openFile (i);
			}
		}.bind(this, el, i));
	},
	
	// window height 4 resize
	getWindowHeight: function (){
		var scrollSize = window.getScrollSize().y;
		var scrollTop = window.getScroll().y;
		return [scrollSize, scrollTop];
	},
	
	// filetype
	getFileType: function (file){
		file = file.toString();
		filetype = file.substr((file.length-3));
		return filetype;
	}
});
gbWindow.implement(new Options);

window.addEvent('domready', function(){
	if (typeof options == 'undefined'){
		options = {}; 
	}
	
	gbWindow = new gbWindow(options);
});
