var Moofbox = new Class({	
	
	Implements: [Options, Events],
	
    initialize: function(options){
		this.setOptions(options);
		if (Browser.Engine.trident && Browser.Engine.version == 4){	 new Element('link',{	'rel': 'stylesheet', 'media': 'screen', 'type': 'text/css', 'href': 'css/pngFix.css'}).inject(document.head);}		
		if (!$('fancy_wrap')) {	this.injectMoofBox();}
    },

    vars: {
    	//globals vars
	    imgTypes : ['png', 'jpg', 'jpeg', 'gif'],
	   	loadingTimer: 0,
	    loadingFrame: 1,
	    loadedItems: [],
	    overlayIsActive: false,
	    show: false
    },
    
    options: {
    	//onShow: $empty,
    	item: {
	        hideOnContentClick:	false,
			zoomSpeedIn:		500,
			zoomSpeedOut:		500,
			maxFrameWidth:		600,
			maxFrameHeight:		400,
			overlayShow:		false,
			overlayOpacity:		0.5,
			event:				'click',
			itemLoadCallback:	null,
			allowResize:		false,
			collection:			false,
			preload:			false,
			hideElements:		null
    	}
    },
    
    allowResize: function(el, position){
    	if(this.vars.loadedItems[position].options.allowResize){
	    	el.makeResizable({handle: $('fancy_resize_handle').setStyle('display','block')});
    	}else{
    		$('fancy_resize_handle').setStyle('display','none');
    	}
    },
    
	preloadMulti: function(imgArray){
    	this.vars.loadedItems =
		new Asset.images( imgArray, {
	    	onProgress: function(i){
				//new print('iterator: '+i);
				this.setProperty('id', 'fancy_img');
	    	},		    	
	    	onComplete: function(){
	    		//new print('alle afbeeldingen geladen');
	    	}	    	
		});
	},
	preload: function(src){
		this.log('preload');
		return new Asset.image(src, {id: 'fancy_img'});
	},
	
	loadIframe: function(src){
		this.log('loadIframe');
		return new Element('iframe',{
		    'src': 			src,
		    'id':			'fancy_frame',
		    'hspace':		'0',
		    'frameborder': 	'0',
		    'name':			'fancy_iframe'
		});
	},
	
	close: function(position){
		this.log('MoofBox.close');
		this.log(position);
		var item = this.vars.loadedItems[position] || null;
		
		if(item.iframe){$('fancy_content').empty();}
		
		$('fancy_bg').setStyle('display', 'none');
		$('fancy_content').fade('out');
		$('fancy_close').setStyle('display', 'none');
		$('fancy_loading').setStyle('display', 'none');
		if($('fancy_title')){ $('fancy_title').setStyle('display', 'none').getElement('div').empty();}
	
		var hideFancyOuter = new Fx.Morph($('fancy_outer'), {
			duration: item.options.zoomSpeedOut, 
			transition: Fx.Transitions.Quad.easeInOut
		});			 
		hideFancyOuter.start({
			'opacity':	0,
		    'height': 	item.oldStyle.height,
		    'width': 	item.oldStyle.width,
		    'left':		(item.oldStyle.left - 18),
			'top':		(item.oldStyle.top - 18)
			
		});		
		hideFancyOuter.addEvent('complete', function(){
			
			if($('fancy_overlay')){					
				new Fx.Morph($('fancy_overlay'), {
					duration: 	10,
					transition: Fx.Transitions.Quad.easeInOut
				}).start({
					opacity:	0
				}).addEvent('complete', function(){
					$('fancy_overlay').dispose();
					this.vars.overlayIsActive = false;
				}.bind(this));					
			}
			
			if (item.options.hideElements)
				$$(item.options.hideElements).removeClass('hideElements');
			
			$("fancy_content").empty();
			$('fancy_outer').setStyle('display', 'none');
			this.vars.show = false;
		}.bind(this));				
	},
	
	showloading: function(){		
		clearInterval(this.vars.loadingTimer);
		$("fancy_loading").setStyles({
			display: 'block',
		    left: 	((window.getSize().x - 40) / 2),
		    top: 	((window.getSize().y - 40) / 2)
		});		
		this.vars.loadingTimer = setInterval(function(){
			if ($('fancy_loading').getStyle('display') == 'none' ){
				clearInterval(this.vars.loadingTimer);
				return;
			}
			var waarde = this.vars.loadingFrame;
			$('fancy_loading').getElement('div').setStyle('top',(waarde * -40));					
			this.vars.loadingFrame = (waarde + 1) % 12;
		}.bind(this), 66);
	},	
	
	getWindowSize: function(arg){
		var size = window.getSize();
		return (arg === 'x') ? size.x : size.y;
	},
	getScrollSize: function(arg){
		var size = window.getScrollSize();
		return (arg === 'x') ? size.x : size.y;
	},
	
	getMaxSize: function(ob){
		var r = Math.min(Math.min(window.getSize().x - 50,ob.width) / ob.width, Math.min(window.getSize().y - 100,ob.height) / ob.height);
		return {width: Math.round(r * ob.width), height: Math.round(r * ob.height)};
	},
	
	showOverlay: function(){	
		this.vars.overlayIsActive = true;
		new Element('div',{
		    id: 'fancy_overlay',
		    styles: {
		        opacity: 0,
		        width:	 window.getScrollSize().x,
		        height:  window.getScrollSize().y
		    }		   
		}).inject($('fancy_wrap'), 'top');		
		var overlayAnimation = new Fx.Morph($('fancy_overlay'),{
			duration: 	100,
			transition: Fx.Transitions.Quad.easeInOut
		}).start({
			opacity:	[0,this.options.overlayOpacity]
		});
		return overlayAnimation;
	},
	
	addItems : function(ob){
		var anchors = 	(ob.container) ? ob.container.getElements('a') : $$('.'+ ob.classname),
			arraySize = this.vars.loadedItems.length,
			isImg = 	new RegExp('\.' + this.vars.imgTypes.join('|') + '$', 'i'),
			options = 	$merge(this.options.item, (ob.options || {}) );
		
		anchors.each(function(currentItem, index){			
			var clicker = currentItem.getFirst('img') || currentItem, //gets the thumbnail wich will act as button for the MoofBox, or else defaults to the containing anchor.
				itemObject = {
					info: currentItem.getProperties('title', 'href', 'rel'),
			    	oldStyle: clicker.getCoordinates()
				};
			
			if (itemObject.info.href.match(isImg)){
				itemObject = $merge(itemObject,{		
					image: 		(options.preload === true) ? this.preload(itemObject.info.href) : true,
					//image: 		this.preload(itemObject.info.href),
					options: 	options
				});
			}else{
				itemObject = $merge(itemObject,{					
					//iframe:		(options.preload === true) ? this.loadIframe(itemObject.info.href) : itemObject.info.href,
					iframe:		this.loadIframe(itemObject.info.href),
					options: 	$merge(options, {hideOnContentClick: false})
				});				
			}
			
			// add the new item to the Array
			this.vars.loadedItems[index += arraySize] = itemObject;			
			
			clicker.addEvent(options.event, function(event){ event.stop(); this.show(index); }.bind(this));			
		},this);
	},
	
	show : function(position) {
		var item = this.vars.loadedItems[position];
		moof = this;
		
		//moof.log($$(item.options.hideElements));
		if (item.options.hideElements)
			$$(item.options.hideElements).addClass('hideElements');
		
		//this.log(item);
		//this.log(this.vars.loadedItems);		
		if(item.image === true){
			//alert('late preload');
			this.log('late preload');
			this.log(this.vars.loadedItems[position]);
			
			this.showloading();
			
			image = new Asset.image(item.info.href, {
				id: 'fancy_img',
				
				onload: function(i)	{
					$('fancy_loading').setStyle('display', 'none');
					
					moof.log(moof.vars.loadedItems[position]);
					
					//function showItem() will only run if one of these are true
					if(item.options.overlayShow === false || moof.vars.overlayIsActive === true){
						moof.showItem(position);
					}else if(item.options.overlayShow === true){
						moof.showOverlay().addEvent('complete', function(){	moof.showItem(position); }.bind(moof));
					}
				}
			});
			
			this.vars.loadedItems[position] = $merge(this.vars.loadedItems[position], {
				image: image
			});
		}
		else
		{
			//function showItem() will only run if one of these are true
			if(item.options.overlayShow === false || this.vars.overlayIsActive === true){
				this.showItem(position);
			}else if(item.options.overlayShow === true){
				this.showOverlay().addEvent('complete', function(){	this.showItem(position); }.bind(this));
			}
		}
	},
	
	showItem: function(position){
		var item = this.vars.loadedItems[position];
		this.log(item);
		var collection = this.isCollection(position);
		var indexOfNew = collection.indexOf(position);
		try{
			console.log("collection = %o currentPosition = %i collection.length = %i",collection,indexOfNew,collection.length-1);
			console.log("currentPosition = %i",collection[indexOfNew]);
		}catch(e){}
		if (indexOfNew != 0) {
			var newPositionLeft = collection[indexOfNew-1];
			try{console.log("newPositionLeft = %i",newPositionLeft);}catch(e){}
			$('fancy_left').setStyle('display','block').removeEvents(item.options.event).addEvent(item.options.event, function(event){
				event.stop(); this.show(newPositionLeft); 
			}.bind(this));	
		}else{
			$('fancy_left').setStyle('display','none').removeEvents(item.options.event);
		}
		if (indexOfNew != (collection.length - 1)) {
			var newPositionRight = collection[indexOfNew+1];
			try{console.log("newPositionRight = %i",newPositionRight);}catch(e){}
			$('fancy_right').setStyle('display','block').removeEvents(item.options.event).addEvent(item.options.event, function(event){
				event.stop(); this.show(newPositionRight); 
			}.bind(this));		
		}else{
			$('fancy_right').setStyle('display','none').removeEvents(item.options.event);
		}
		
		if (item.image){
			this.log(item.image.getProperty('width'));
			
			var size = this.getMaxSize({
				width:	item.image.getProperty('width').toInt(),
				height:	item.image.getProperty('height').toInt()
			});
			$('fancy_content').fade('hide').empty().grab( 
				new Element('div', {id: 'fancy_div'}).grab(item.image)
			);
		}
		else if(item.iframe){
			var size = {
				width:	item.options.maxFrameWidth,
				height:	item.options.maxFrameHeight 
			};
			$('fancy_content').fade('hide');
		}		
		if(this.vars.show === false){
			$('fancy_outer').setStyles({
				height: item.oldStyle.height,
				width:	item.oldStyle.width,
				top:	item.oldStyle.top,
				left:	item.oldStyle.left
			});
		}	
		var animation = {
			opacity: 	1,
		    height: 	size.height,
		    width: 		size.width,
			top:		window.getScroll().y + (Math.round((window.getSize().y - size.height)/2) - 40),
			left:		window.getScroll().x + (Math.round((window.getSize().x - size.width)/ 2) - 20)
		};
		//this.log(animation);
		
		var oldStyle = $('fancy_outer').getStyles('height','width','top','left');
		/*this.log('van:');
		this.log(oldStyle);
		this.log('naar:');
		this.log(animation);*/
		
		//closebuttons
		var closeButtons = [$('fancy_close'),$('fancy_content'),$('fancy_overlay'),$('fancy_loading')];
		if(!$('fancy_overlay')){ closeButtons.erase($('fancy_overlay')); }
		closeButtons.each(function(item, index){item.removeEvents();}, this);
		if(item.options.overlayShow === false){	closeButtons.erase($('fancy_overlay'));	}
		if(item.options.hideOnContentClick === false){ closeButtons.erase($('fancy_content')); }
		closeButtons.each(function(item){item.addEvent('click', function(event){ event.stop(); this.close(position); }.bind(this));}, this);

		$('fancy_outer').setStyle('display', 'block');			
		var showing = new Fx.Morph($('fancy_outer'), {
			duration: 	item.options.zoomSpeedIn,
			transition: Fx.Transitions.Quad.easeInOut
		});
		showing.start(animation);
		showing.addEvent('complete', function(){
			$('fancy_close').setStyle('display', 'block');
			//allow resizing of the box? 
			this.allowResize($('fancy_outer'),position);			
			if (item.iframe){					
				this.showloading();// #loading
				$('fancy_bg').setStyle('display', 'block');
				item.iframe.setStyle('display', 'block').addEvent('load', function(){
					$('fancy_loading').setStyle('display', 'none');
				});
				$('fancy_content').empty().grab(item.iframe).fade('in');
			}else{
				$('fancy_bg').setStyle('display', 'block');
				$('fancy_content').fade('in');
			}
			if(item.info.title){					
				$('fancy_title').getElement('div').empty().appendText(item.info.title);
				$('fancy_title').setStyle('display', 'block');
			}
			this.vars.show = true;
		}.bind(this));		
	},	
	
	calcVerhouding: function (el,mouse){
	    var asr = (el.width/el.height), x = Math.max(mouse.x,mouse.y);
		return {width:((asr*x)/item.width),height:((asr*x)/item.height)};
	},
    
    setDefault: function(options){
       
    },

    isCollection: function(position){
    	var item = this.vars.loadedItems[position];
    	if(String.type(item.info.rel) && item.options.collection){
	    	return this.vars.loadedItems.map(function(currentItem, index){
				if(currentItem.options.collection){	
					if(currentItem.info.rel == this){return index;}
				}
			},item.info.rel).clean();
    	}
    	return [position];
    },
    
    injectMoofBox: function(){
    	var emptydiv = 	new Element('div'),	tr = new Element('tr');
		var fancy_loading = new Element('div', {id:'fancy_loading'}).grab(emptydiv.clone());
		var fancy_bgChild = new Element('div', {'class': 'fancy_bg'}),
			fancy_bg_n  = fancy_bgChild.clone().addClass('fancy_bg_n'),	fancy_bg_ne = fancy_bgChild.clone().addClass('fancy_bg_ne'),
			fancy_bg_e  = fancy_bgChild.clone().addClass('fancy_bg_e'),	fancy_bg_se = fancy_bgChild.clone().addClass('fancy_bg_se'),
			fancy_bg_s  = fancy_bgChild.clone().addClass('fancy_bg_s'),	fancy_bg_sw = fancy_bgChild.clone().addClass('fancy_bg_sw'),
			fancy_bg_w  = fancy_bgChild.clone().addClass('fancy_bg_w'),	fancy_bg_nw = fancy_bgChild.clone().addClass('fancy_bg_nw');
		var fancy_bg 	= 		new Element('div', {id: 'fancy_bg'}).adopt(	[fancy_bg_n, fancy_bg_ne, fancy_bg_e, fancy_bg_se, fancy_bg_s, fancy_bg_sw, fancy_bg_w, fancy_bg_nw]);
		var	fancy_resize_handle = 	new Element('div', {id:'fancy_resize_handle'});
		var	fancy_left = 		new Element('a', {id:'fancy_left', href:'javascript:void(0);'}),	fancy_right = new Element('a', {id:'fancy_right', href:'javascript:void(0);'});		
		var	fancy_nav = 		new Element('div',{id:'fancy_nav'}).adopt( [fancy_left, fancy_right]);
		var fancy_close = 		new Element('div', {id:'fancy_close'}),
			fancy_content = 	new Element('div', {id:'fancy_content'});
		var fancy_title_left = 	new Element('td', {id:'fancy_title_left'}),	fancy_title_main = 	new Element('td', {id:'fancy_title_main'}).grab(emptydiv.clone()), fancy_title_right = new Element('td', {id:'fancy_title_right'});			
		var fancy_title_tr = tr.clone().adopt( [fancy_title_left, fancy_title_main, fancy_title_right]);
		var fancy_title_table = new Element('table', {cellspacing:'0', cellpaddng:'0', border:'0'}).grab(fancy_title_tr);			
		var fancy_title = 		new Element('div', {id:'fancy_title'}).grab(fancy_title_table);
		var fancy_inner = 		new Element('div', {id:'fancy_inner'}).adopt( [fancy_bg, fancy_resize_handle, fancy_nav, fancy_close, fancy_content, fancy_title]);
		var fancy_outer = 		new Element('div', {id:'fancy_outer'}).grab(fancy_inner);		
		var fancy_wrap = 		new Element('div', {id:'fancy_wrap'}).adopt( [fancy_loading,fancy_outer]);
		fancy_wrap.inject(document.body, 'bottom');
    },
    
    log: function(tolog){
    		//new Print(tolog);
    	try{
			console.log(tolog);
		}catch(e){}
    }    
});