var clsPicture = Class.create()
	clsPicture.prototype = {
		initialize: function(src, description) {
			this.m_oPicture 			= new Image()
			this.m_oPictureImgPanel		= $('PictureImgPanel')
			//this.m_oPictureImgResult	= $('PictureImgResult')
			this.m_oPicturePanel		= $('PicturePanel')
			this.m_oPictureInfoPanel	= $('PictureInfoPanel')
			this.src					= src
			this.description			= description
			this.fadeInTimeout			= 250
			this.fadeOutTimeout			= 100
			this.m_bDebug				= false
			this.m_iMarginSides			= 0
			this.m_iMarginTop			= 0		
			this.m_iMarginBottom		= 0
			this.reset()
		}, 
		stop: function(){
			
		}, 
		cancel: function(){
			if(this.m_bDebug || g_bDebug)displayMessage('picture:cancel()')
			if(this.isSetting()){
				if(this.m_bDebug || g_bDebug)displayMessage('picture:isSetting()')
				this.image.src 				= null
				this.setNotSet()
				this.setNotSetting()
				this.m_bCanceled	= true
			}
		}, 
		reset: function(){
			if(this.m_bDebug || g_bDebug)displayMessage('picture:reset()')
			this.setNotSet()
			this.setNotSetting()
			this.loaded 					= false
			this.loading 					= false
			
			this.m_bSuffix					= true
			
			//this.m_oPictureImgResult.style.display 	= 'none'
			
			this.image 						= new Image()
			
			this.status 					= 'hidden'
		}, 
		reload: function(){
			if(this.status == 'visible' || this.status == 'fading-in'){
				if(this.status == 'fading-in')
					this.m_oEffect.cancel()
				
				this.onfadeout = function(){
					this.show()
					this.onfadeout = function(){}
				}
				this.fadeOut()
			}else
				this.status = 'hidden'
		}, 
		fadeIn: function(){
			if(this.m_bDebug || g_bDebug)displayMessage('fadeIn - status:'+this.status)
			if(!this.m_bCanceled){
				if(this.m_bDebug || g_bDebug)displayMessage('fadeIn - Picture NOT canceled')
				if(this.status == 'hidden' && this.isLoaded()){
					if(this.m_bDebug || g_bDebug)displayMessage('fadeOut:hidden && this.isLoaded()')
					this.setPicture()
	
				}else
					throw new Error("can't fadeIn")
			}else{
				this.m_bCanceled	= false
				if(this.m_bDebug || g_bDebug)displayMessage('fadeIn canceled - status:'+this.status)
			}
		}, 
		getStatus: function(){
			return this.status
		}, 
		onFadeInSetup: function(){
			this.status				= 'fading-in'
			if(typeof(this.onfadeinsetup) == 'function'){
				try{
					this.onfadeinsetup()
				}catch(e){if(this.m_bDebug || g_bDebug)displayError(e)}
			}
		}, 
		onFadeInFinished: function(){
			if(this.m_bDebug || g_bDebug)displayMessage('onFadeInFinished')
			this.status				= 'visible'
			if(typeof(this.onvisible) == 'function'){
				//try{
					this.onvisible()
				//}catch(e){if(this.m_bDebug || g_bDebug)displayError(e)}
			}
			if(this.m_bDebug || g_bDebug)displayMessage('------------------------')
		}, 
		fadeOut: function(){
			if(this.m_bDebug || g_bDebug)displayMessage('fadeOut - status:'+this.status)
			if(!this.m_bCanceled){
				if(this.m_bDebug || g_bDebug)displayMessage('fadeOut - Picture NOT canceled')
				if(this.status == 'visible'){
					if(this.m_bDebug || g_bDebug)displayMessage('fadeOut:visible')
		
					var self = this
					this.m_oEffect 			= new Spry.Effect.Fade(
						self.m_oPictureImgPanel, 
						{
							setup: function(){
								self.onFadeOutSetup()
							}, finish: function(){
								self.onFadeOutFinished()
								//self.m_oPicturePanel.style.zIndex = 0
							}, 
							duration: self.fadeOutTimeout, 
							from: 100, 
							to: 0
						}
					);
					this.m_oEffect.start()
					return true
				}//else alert("can't fadeOut")
			}else{
				this.m_bCanceled	= false
				if(this.m_bDebug || g_bDebug)displayMessage('fadeOut canceled - status:'+this.status)
			}
		}, 
		onFadeOutSetup: function(){
			this.status				= 'fading-out'
			if(typeof(this.onfadeoutsetup) == 'function'){
				try{
					this.onfadeoutsetup()
				}catch(e){if(this.m_bDebug || g_bDebug)displayError(e)}
			}
		}, 
		onFadeOutFinished: function(){
			if(this.m_bDebug || g_bDebug)displayMessage('onFadeOutFinished')
			this.status				= 'hidden'
			try{
				this.onfadeout()
			}catch(e){/*if(this.m_bDebug || g_bDebug)displayError(e)*/}
			if(this.m_bDebug || g_bDebug)displayMessage('------------------------')
		}, 
		preload: function(){
			if(this.m_bDebug || g_bDebug)displayMessage('preload('+this.src+')')
			if(!this.isLoaded()){
				this.setLoading()
				
				try{
					this.onpreloading()
				}catch(e){if(this.m_bDebug || g_bDebug)displayError(e)}
				
				var self 				= this
				this.image				= new Image();
				this.image.onload		= function(){
					self.setLoaded()
					self.onpreloaded()
				}

				this.setPictureSrc() // start loading
			}else
				throw new Error("Picture already loaded. ")
		}, 
		load: function(p_bFadeIn){
			this.setLoading()
			
			try{
				this.onloading()
			}catch(e){if(this.m_bDebug || g_bDebug)displayError(e)}
			
			this.setImageOnload(p_bFadeIn)

			this.setPictureSrc() // start loading
		}, 
		show: function(){			
			this.m_bCanceled	= false
			this.setSetting()
			if(this.isLoaded()){
				this.fadeIn()
			}else if(!this.isLoaded()){
				this.load(true)
			}/*else if(this.isLoading()){
				// onload overschrijven voor als die aan het preloaden is.
				this.load()
			}*/else
				throw new Error("Unknown Picture status. ")
		}, 
		setImageOnload: function(p_bFadeIn){
			var self 				= this
			this.image				= new Image();
			this.setSetting()
			this.image.onload		= function(){
				try{
					self.setLoaded()
					//self.onLoaded()
					if(p_bFadeIn){
						self.fadeIn()
					}
					self.onLoaded()
				}catch(e){if(this.m_bDebug || g_bDebug)displayError(e)}
			}
		}, 
		setImagePath: function(p_sPath){
			this.m_sImagePath = p_sPath
		},
		setSrc: function(src){
			this.src = src
		}, 
		setSuffixEnabled: function(p_bSuffix){
			this.m_bSuffix = p_bSuffix
		}, 
		getDescription: function(){
			return this.description ? this.description : ''
		}, 
		setDescription: function(p_sDescription){
			this.description = p_sDescription
		}, 
		getWidth: function(){
			return this.isLoaded() ? this.m_oPicture.width : false
		}, 
		getHeight: function(){
			return this.isLoaded() ? this.m_oPicture.height : false
		}, 
		setSetting: function (){
			if(this.m_bDebug || g_bDebug)displayMessage('picture:setSetting()')
			this.setting			= true
		}, 
		setNotSetting: function (){
			if(this.m_bDebug || g_bDebug)displayMessage('picture:setNotSetting()')
			this.setting			= false
		}, 
		setSet: function (){
			if(this.m_bDebug || g_bDebug)displayMessage('picture:setSet()')
			this.set			= true
		}, 
		setNotSet: function (){
			if(this.m_bDebug || g_bDebug)displayMessage('picture:setNotSet()')
			this.set			= false
		}, 
		setLoaded: function (){
			if(this.m_bDebug || g_bDebug)displayMessage('loaded('+this.src+')')
			this.loaded				= true
			this.loading 			= false
		}, 
		setPictureDescription: function(){
			this.m_oPictureInfoPanel.innerHTML		= /*this.getDescription()*/''
		}, 
		resetPictureDescription: function(){
			this.m_oPictureInfoPanel.innerHTML		= ''
		}, 
		setLoading: function (){
			this.loaded 			= false
			this.loading 			= true
		}, 
		isSet: function (){
			return this.set;
		}, 
		isSetting: function (){
			return this.setting;
		}, 
		isLoaded: function (){
			return this.loaded;
		}, 
		isVisible: function (){
			return this.status == 'visible' ? true : false
		}, 
		isFadingIn: function (){
			return this.status == 'fading-in' ? true : false
		}, 
		isLoading: function (){
			return this.loading;
		}, 
		isBusy: function(){
			return this.status == 'visible' || this.status == 'hidden' ? false : true
		}, 
		setPictureSrc: function(){
			if(this.m_bSuffix)
				this.image.src 			= this.src+'w/'+(this.m_iWidth - (2 * this.m_iMarginSides))+'/h/'+(this.m_iHeight - this.m_iMarginTop - this.m_iMarginBottom)
			else
				this.image.src 			= this.src
				
		}, 
		setSize: function(p_iWidth, p_iHeight){
			if(typeof(p_iWidth) == 'number' && typeof(p_iWidth) == 'number'){
				this.m_iWidth			= Math.floor(p_iWidth)
				this.m_iHeight			= Math.floor(p_iHeight)
			}else
				throw new Error("MaxWidth and MaxHeight must be integer. ")
		}, 
		setMarginSides: function(p_iMarginSides){
			if(typeof(p_iMarginSides) == 'number'){
				this.m_iMarginSides				= Math.floor(p_iMarginSides)
			}else
				throw new Error("MarginSides must be integers. ")
		}, 
		setMarginTop: function(p_iMarginTop){
			if(typeof(p_iMarginTop) == 'number'){
				this.m_iMarginTop				= p_iMarginTop
			}else
				throw new Error("MarginTop must be integers. ")
		}, 
		setMarginBottom: function(p_iMarginBottom){
			if(typeof(p_iMarginBottom) == 'number'){
				this.m_iMarginBottom			= Math.floor(p_iMarginBottom)
			}else
				throw new Error("MarginBottom must be integers. ")
		}, 
		applyMargin: function(){
			iMarginTop = Math.floor(((this.m_iHeight - this.m_iMarginBottom - this.m_iMarginTop - this.m_iPictureHeight) / 2) + this.m_iMarginTop)+'px'
			this.m_oPictureImgPanel.style.marginTop = iMarginTop
			//this.m_oPictureImgPanel.style.marginLeft = ((this.m_iWidth - this.image.width) / 2)+'px'
			//alert("(("+this.m_iWidth+" - "+this.m_oPicture.width+") / 2)")
		}, 
		setPicture: function(){
			if(this.m_bDebug || g_bDebug)displayMessage('clsPicture:setPicture')
			//removeResults('PictureImgResult')
			this.m_oPicture = new Image()
			//this.m_oPicture.id = 'PictureImgResult'
			
			var self = this
			this.m_oPicture.onload = function(){
			
				self.m_oEffect 			= new Spry.Effect.Fade(
					self.m_oPictureImgPanel, 
					{
						setup:function(){
							self.m_oPictureImgPanel.style.background = "url('"+self.m_oPicture.src+"') top no-repeat"
							//self.m_oPictureImgPanel.style.zIndex = 100000
							self.onFadeInSetup()
							//$('PictureImgPanelLeftImg').style.height 		=  self.m_oPicture.height+'px'
							//$('PictureImgPanelRightImg').style.height 		=  self.m_oPicture.height+'px'
							try{
								self.onFadeIn()
							}catch(e){}
						}, 
						finish:function(){
							self.onFadeInFinished()
						}, 
						duration:self.fadeInTimeout, 
						from: 0, 
						to: 100
					}
				);
				self.m_oEffect.start()
			}
			
			this.m_oPicture.width 					= this.image.width
			this.m_iPictureWidth 					= this.image.width
			this.m_oPicture.height 					= this.image.height
			this.m_iPictureHeight 					= this.image.height
			//this.m_oPicture.style.display			= "none"
			this.m_oPicture.src 					= this.image.src
			
			//this.m_oPictureImgResult.appendChild(this.m_oPicture)
			this.m_oPictureImgPanel.style.width		= (this.image.width)+'px'
			this.m_oPictureImgPanel.style.height	= (this.image.height + 20)+'px'
			this.m_oPictureInfoPanel.style.width	= (this.image.width - (3 * 20))+'px'
			this.setPictureDescription()
			this.applyMargin()
			this.setNotSet()
			this.setNotSetting()
			//this.onLoaded();

			//self = this
			/*this.m_oPicture.onclick = function(){
				//try{
					self.onclick()
				//}catch(e){}
			}
*/
		},
		onLoaded: function(){
			if(this.m_bDebug || g_bDebug)displayMessage('clsPicture:onLoaded')
			if(!this.m_bCanceled){
				if(typeof(this.onload) == 'function'){
					try{
						this.onload()
					}catch(e){if(this.m_bDebug || g_bDebug)displayError(e)}
				}
			}else{
				if(this.m_bDebug || g_bDebug)displayMessage('clsPicture:onLoaded:canceled')
				this.m_bCanceled = false
				this.status 				= 'hidden'
			}
		}
	}