var clsScreenPictures = Class.create()
	clsScreenPictures.prototype = {
		initialize: function(){
			this.m_oPicturePanel 						= $('PicturePanel')
			this.m_iPictureInfoPanelHeight				= 0;
		}, 
		init: function(){
			this.m_iWidth								= 0
			this.m_iHeight								= 0
			this.m_iMaxPictureWidth						= 0
			this.m_iMaxPictureHeight					= 0
			this.m_bUrlDimensionSuffx					= false
			this.m_iTotal								= 0
			this.pictures								= new Array()
			this.m_bDebug								= false
			this.m_iPreloadAround						= 2
			
			this.addNavFunctions($('PictureImgPanelLeft'), 'left')
			this.addNavFunctions($('PictureImgPanelRight'), 'right')
			
			iControlPercentage							= 45
			$('PictureImgPanelLeft').style.width		= iControlPercentage+'%'
			$('PictureImgPanelRight').style.width		= iControlPercentage+'%'

			var self  = this
			this.m_oPicturePanel.onclick 			= function(ev){
				var ev = ev || window.event
				origEl = ev.target || ev.srcElement
				if(origEl.id == 'PicturePanel'){
					try{
						self.onPicturePanelClick(ev)
					}catch(e){}
				}
			}

			this.reset()
		},
		reset: function(){
			this.m_iNext									= null
			this.i											= null
			this.m_iPrevious		 						= null
			this.m_bBusy									= false
			//$('PictureImgPanelLeftImg').style.visibility	= 'hidden'
			//$('PictureImgPanelRightImg').style.visibility	= 'hidden'
			this.m_oLoadingImg.style.visibility				= 'hidden'
			this.m_aArrowStatus								= new Array();
			this.m_aArrowStatus['left']						= 'hidden'
			this.m_aArrowStatus['right']					= 'hidden'
			//displayMessage('self.m_bBusy 					= false')
			this.resetPictures()
		},
		reload: function(){
			var i = this.i
			this.reset();
			if(typeof(i) == 'number')
				this.pictures[i].show()
		},
		cancel: function(){
			this.pictures[this.i].cancel()
			this.loading(false)
		},
		resetPictures: function(){
			for(var i = 0;i < this.m_iTotal;i++){
				this.pictures[i].reset()
				this.pictures[i].setSize(this.m_iWidth, this.m_iHeight)
			}
		},
		getLoadImage: function(key){
			if(typeof(this.m_aPreloadImages[key]) != 'image'){
				this.m_aPreloadImages[key] 			= new Image()
				this.m_aPreloadImages[key].src 		= this.m_sImagePath+'pic'+key+'.gif'
			}
			return this.m_aPreloadImages[key]
		},
		setLoadingImage: function(sImgId, src){
			if(typeof(sImgId) == 'string' && typeof(src) == 'string' && src != ''){
				this.m_oLoadingImg 				= $(sImgId)
				this.m_oLoadingImage 			= new Image()
				this.m_oLoadingImage.src		= src
			}
		},
		setNotLoadingImage: function(sImgId, src){
			if(typeof(sImgId) == 'string' && typeof(src) == 'string' && src != ''){
				this.m_oLoadingImg 				= $(sImgId)
				this.m_oNotLoadingImage 		= new Image()
				this.m_oNotLoadingImage.src		= src
			}
		},
		loading: function(set){
			if(set){
				if(typeof(this.m_oLoadingImage) == 'object'){
					this.m_oLoadingImg.style.visibility = 'visible'
					this.m_oLoadingImg.src = this.m_oLoadingImage.src
				}
			}else{
				if(typeof(this.m_oNotLoadingImage) == 'object'){
					this.m_oLoadingImg.style.visibility = 'visible'
					this.m_oLoadingImg.src = this.m_oNotLoadingImage.src
				}else
					this.m_oLoadingImg.style.visibility = 'hidden'
			}
		},
		addPicture: function(i, src, description){
			this.pictures[i] 				= new clsPicture(src, description)
			this.pictures[i].setSuffixEnabled(true)
			this.pictures[i].setSize(this.m_iWidth, this.m_iHeight)
			this.pictures[i].setMarginSides(16)
			this.pictures[i].setMarginTop(16)
			this.pictures[i].setMarginBottom(16)
			this.pictures[i].setImagePath(this.m_sImagePath)
			
			var self = this
			this.pictures[i].onpreloading	= function(){
				self.loading(true)
				try{
					self.onImageLoading(i)
				}catch(e){if(this.m_bDebug || g_bDebug)displayError(e)}
			}
			
			this.pictures[i].onpreloaded	= function(){
				self.loading(false)
			}

			this.pictures[i].onloading		= function(){
				self.loading(true)
				self.m_bBusy 					= true
				//displayMessage('self.m_bBusy 					= true')
				try{
					self.onImageLoading(i)
				}catch(e){/*if(this.m_bDebug || g_bDebug)displayError(e)*/}
			}
			
			/*this.pictures[i].onload			= function(){
				self.setPictureLoaded(i)
			}*/
			
			this.pictures[i].onvisible		= function(){
				self.loading(false)
				self.m_iPrevious				= self.i
				self.i							= i
				self.m_bBusy 					= false
				//displayMessage('self.m_bBusy 					= false')
				self.preloadAround(i)
				try{
					self.onImageVisible(i)
				}catch(e){if(this.m_bDebug || g_bDebug)displayError(e)}
				
			}

			if(typeof(this.onPictureClick) == 'function'){
				this.pictures[i].onclick			= function(){
					try{
						self.onPictureClick()
					}catch(e){if(this.m_bDebug || g_bDebug)displayError(e)}
				}
			}
			
			if(typeof(this.onFadeInSetup) == 'function'){
				this.pictures[i].onfadeinsetup			= function(){
					try{
						self.onFadeInSetup()
					}catch(e){if(this.m_bDebug || g_bDebug)displayError(e)}
				}
			}

			if(typeof(this.onFadeOutSetup) == 'function'){
				this.pictures[i].onfadeoutsetup			= function(){
					try{
						self.onFadeOutSetup()
					}catch(e){if(this.m_bDebug || g_bDebug)displayError(e)}
				}
			}

			this.m_iTotal 			= this.pictures.length
		},
		setPictureIds: function(i, iPicId, iSId, iSSId, iSSSId){
			this.pictures[i].setIds(iPicId, iSId, iSSId, iSSSId)
		}, 
		setPicture: function(i){
			if(this.m_bDebug || g_bDebug)displayMessage('clsScreenPictures:setPicture')
			if(!this.isBusy()){
				if(this.m_iPrevious == null){ // first picture loaded
					if(this.m_bDebug || g_bDebug)displayMessage('this.m_iPrevious == null')
					var self = this
					this.pictures[i].onload = function(){
						self.setPictureLoaded(i)
					}
					this.pictures[i].show()
				}else if(typeof(this.m_iPrevious) == 'number'){ // a picture is visible that needs to fadeout first
					if(this.m_bDebug || g_bDebug)displayMessage('typeof(this.m_iPrevious) == \'number\'')
					var self = this
					
					if(!this.pictures[i].isLoaded()){
						
						if(this.pictures[i].getStatus() == 'visible'){
							if(this.m_bDebug || g_bDebug)displayMessage('NOT this.pictures[i].isLoaded()')
							previousIndex = this.m_iPrevious
							self = this
							this.pictures[i].onload = function(){
								self.setPictureLoaded(i)
								self.pictures[previousIndex].onfadeout = function(){
									self.pictures[i].show()
									this.onfadeout 		= function(){}
								}
								self.pictures[previousIndex].fadeOut()
							}
							this.pictures[i].load(false)
						}else{
							this.pictures[i].load(true)
						}
					}else{
						if(this.m_bDebug || g_bDebug)displayMessage('this.pictures[i].isLoaded()')
						if(this.pictures[i].getStatus() == 'visible'){
							this.pictures[this.m_iPrevious].onfadeout = function(){
								self.pictures[i].onload = function(){
									self.setPictureLoaded(i)
								}
								self.pictures[i].show()
								this.onfadeout 		= function(){}
							}
							this.pictures[this.m_iPrevious].fadeOut()
						}else{
							this.pictures[i].show()
						}
					}
				}else
					throw new Error("can't picture.show")

			}else
				throw new Error('ScreenPictures is busy!')
		},
		fadeOutIfVisible: function(){
			if(this.pictures[this.i].getStatus() == 'visible')
				this.pictures[this.i].fadeOut()
		}, 
		setPictureLoaded: function(i){
			this.loading(false)
			try{
				this.onImageLoaded(i)
			}catch(e){/*if(this.m_bDebug || g_bDebug)displayError(e)*/}
			//this.setMarginTop(i)
		},
		setImagePath: function(p_sPath){
			this.m_sImagePath = p_sPath
		},
		isPictureNum: function(i){
			return i >= 0 && i < this.m_iTotal
		},
		preloadAround: function(i){
			var start = i
			var current = start
			//var msg = ''
			for(var i = 0;i < this.m_iPreloadAround;i++){
				var current = this.getNextPicNum(current)
				if(!(this.pictures[current].isLoaded() || this.pictures[current].isLoading())){
					this.pictures[current].preload();
					//msg += ' '+ current
				}
			}
			var current = start
			for(var i = 0;i < this.m_iPreloadAround;i++){
				var current = this.getPreviousPicNum(current)
				if(!(this.pictures[current].isLoaded() || this.pictures[current].isLoading())){
					this.pictures[current].preload();
					//msg += ' '+ current
				}
			}
			//alert(msg)
		}, 
		preloadPreviousPicture: function(){
			this.pictures[this.getPreviousPictureNum()].preload();
		},
		isPreviousPictureLoaded : function(){
			return this.pictures[this.getPreviousPictureNum()].isLoaded();
		},
		previousPicture: function(){
			this.setPicture(this.getNextPictureNum())
		},
		getPreviousPicNum: function(i){
			return i - 1 >= 0 ? i - 1 : this.m_iTotal - 1
		},
		getPreviousPictureNum: function(){
			return this.getPreviousPicNum(this.i)
		},
		preloadNextPicture: function(){
			this.pictures[this.getNextPictureNum()].preload();
		},
		isNextPictureLoaded : function(){
			return this.pictures[this.getNextPictureNum()].isLoaded();
		},
		nextPicture: function(){
			this.setPicture(this.getNextPictureNum())
		},
		getNextPictureNum: function(){
			return this.getNextPicNum(this.i)
		},
		getNextPicNum: function(i){
			return i + 1 < this.m_iTotal ? i + 1 : 0
		},
		getCurrent: function(){
			return this.i
		},
		getPrevious: function(){
			return this.m_iPrevious;
		},
		updateComments: function(p_iPicId, p_iCommentCount){
			g_oComments = new clsComments(p_iPicId, p_iCommentCount)
			g_oComments.updateCommentsLink()
		},
		resetIsSet: function(){ 
			for(var i = 0;i < this.m_iTotal;i++)
				this.images[i].set
		},
		enableURLDimensionSuffix: function(){
			this.m_bUrlDimensionSuffx	= true
		},
		/*getURLDimensionSuffix: function(){
			return '&w='+(this.m_iWidth - (2 * 32))+'&h='+this.m_iHeight - (this.m_iPictureInfoPanelHeight - (2 * 32))
		},
		*/
		isBusy: function(){
			return this.m_bBusy
		},
		setPictureInfoPanelHeight: function(p_iHeight){
			this.m_iPictureInfoPanelHeight = p_iHeight
		}, 
		fadeOutOnPicturePanelClick: function(p_bEnabled){
			this.m_bFadeOutOnPicturePanelClick = p_bEnabled
		}, 
		onPicturePanelClick: function(){
		}, 
		addNavFunctions: function(obj, direction){
			var self = this
			if(direction == 'left'){
				obj.onclick = function(){
					self.onPrevClick()
				}
			}else if(direction == 'right'){
				obj.onclick = function(){
					self.onNextClick()
				}
			}
		}, 
		/*addMouseSlideFunctions: function(obj, direction){
			var self = this
			if(direction == 'left'){
				obj.onclick = function(){
					self.onPrevClick()
				}
			}else if(direction == 'right'){
				obj.onclick = function(){
					self.onNextClick()
				}
			}
			obj.onmouseover = function(){
				self.mouseOverHandler(direction)
			}
			obj.onmouseout = function(){
				self.mouseOutHandler(direction)
			}
		}, 
		*/mouseOverHandler: function(direction){
			this.showArrow(direction)
			clearTimeout(this.m_oMouseSlideOutHandler)
		}, 
		mouseOutHandler: function(direction){
			this.hideArrow(direction)
		}, 
/*		showArrow: function(direction){
			clearTimeout(this.m_aArrowTimeout)
			if(this.m_aArrowStatus[direction] == 'hidden'){
				this.m_aArrowStatus[direction] = 'in'
				
				var panel = direction == 'left' ? $('PictureImgPanelLeftImg') : $('PictureImgPanelRightImg')
				panel.style.display = ''
*/				
				/*
				causes ie7 issues
				var self = this
				this.m_oEffect 			= new Spry.Effect.Fade(
					obj, 
					{
						finish: function(){
							self.m_aArrowStatus[direction] = 'visible'
						}, 
						duration: 250, 
						from: 0, 
						to: 100
					}
				)
				this.m_oEffect.start()
				*/
/*			}else if(this.m_aArrowStatus[direction] == 'out'){
				var self = this
				this.m_aArrowTimeout = setTimeout(function(){
					self.showArrow(direction)			
				}, 100)
			}
		}, 
*//*		hideArrow: function(direction){
			clearTimeout(this.m_aArrowTimeout)
			if(this.m_aArrowStatus[direction] == 'visible'){
				this.m_aArrowStatus[direction] = 'out'

				var panel = direction == 'left' ? $('PictureImgPanelLeftImg') : $('PictureImgPanelRightImg')
				panel.style.display = 'none'
*/				
				/*
				causes ie7 issues
				var self = this
				this.m_oEffect 			= new Spry.Effect.Fade(
					obj, 
					{
						finish: function(){
							self.m_aArrowStatus[direction] = 'hidden'
						}, 
						duration: 250, 
						from: 100, 
						to: 0
					}
				)
				this.m_oEffect.start()*/
/*			}else if(this.m_aArrowStatus[direction] == 'in'){
				var self = this
				this.m_aArrowTimeout = setTimeout(function(){
					self.hideArrow(direction)			
				}, 100)
			}
		}, 
*/		setSize: function(p_iWidth, p_iHeight){
			if(typeof(p_iWidth) == 'number' && typeof(p_iHeight) == 'number'){
				if(this.m_iWidth != p_iWidth || this.m_iHeight != p_iHeight){
					this.m_oPicturePanel.style.width 		= p_iWidth+'px'
					this.m_oPicturePanel.style.height 		= p_iHeight+'px'
					this.m_iWidth							= p_iWidth
					this.m_iHeight							= p_iHeight
					
					
					
					//this.resetPictures()
					
					//this.setPicture(this.i)
				}
				return true
			}else
				throw new Error("Size PicturePanel can't be set! Size: "+p_iWidth+"x"+p_iHeight+", types: "+typeof(p_iWidth)+" x "+typeof(p_iHeight));
		}
	}