var Home = new Class({
	options:{
		container:null,
		homeText:null
	},
	initialize:function(options){
		this.setOptions(options)
		
		$('ajaxLoader').setStyle('display','block')
		
		this.image = $(this.options.container).getElement('img')
		
		this.homeImageFx = new Fx.Styles($(this.options.container),{duration:1000})
		this.elements = new Fx.Elements([this.image,$(this.options.homeText)],{duration:500})
		
		this.imagePreLoading()
		
	},
	imagePreLoading:function(){
		var homeImage = new Asset.image(this.image.getProperty('src'),{
			onload:function(){
				$('ajaxLoader').setStyle('display','none')
				this.showImage()
			}.bind(this)
		})
	},
	showImage:function(){
		var elts = this.elements
		this.homeImageFx.start({
			opacity:1,
			width:333
		}).chain(function(){
			elts.start({
				'0':{
					'opacity':[0,1]
				},
				'1':{
					'opacity':[0,1]
				}
			})
		})
	}
})

Home.implement(new Options,new Events)


var Map = new Class({
	options:{
		map:null,
		response:null,
		url:null
	},
	initialize:function(options){
		this.setOptions(options)
		
		this.areas = $(this.options.map).getElements("area")
		this.response = $(this.options.response)
		
		this.setMapFx()
		
	},
	setMapFx:function(){
		var url = this.options.url
		var res = this.response
		this.areas.each(function(item){
			item.addEvent('click',function(){
				new Ajax(url,{
					method:'post',
					data:'location='+item.id,
					onSuccess:function(response){
						res.setHTML(response)
					}
				}).request()				
			})
		})
	}
})

Map.implement(new Options,new Events)


var Gallery = new Class({
	options:{
		gallery:null, // thumbnails gallery
		fullSizeImage:null, // 
		loader:null,
		imageCollection:null,
		imagePath:null
	},
	initialize:function(options){
		this.setOptions(options)
		
		// variables
		this.imagesCollection = new Array()
		this.imagesSizes = new Array()
		this.sizeboxSize = $('sizeBox').getSize().size.x			
		this.fullSizeImageSize = 10
		
		this.currentScrollPosition = 0
		this.visibleGalleryHeight = 0
		this.realGalleryHeight = 0
		
		this.loadImageElts = new Fx.Elements([this.options.fullSizeImage,$('sizeBox'),$('koshkamashka'),$('logo'),$('footer')],{duration:900})
		
		this.rightArrow = $('rightArrow')
		this.leftArrow = $('leftArrow')
		this.galleryScroll = new Fx.Scroll(this.options.gallery.getParent(),{duration:500})
		
		// set gallery collections
		this.buildImagesColection()
		
		// set thumbnails gallery
		this.buildThumbnailsGallery()
		
		// set scroll function
		this.setScrollValues()
		this.setScroll()
	},
	loadingStatus:function(status){
		this.options.loader.setStyle("display",status)		
	},
	isLoading:function(){
		return (this.options.loader.getStyle("display") == "block")
	},
	setScrollValues:function(){
		var nbOfThumbnailsGroup = (parseInt(this.imagesCollection.length)/2).round(0)
		
		this.visibleGalleryHeight = (194*2)+10+10
		this.realGalleryHeight = (nbOfThumbnailsGroup*(this.visibleGalleryHeight+10))-10
	},
	buildImagesColection:function(){
		this.options.imageCollection.each(function(item,index){
			this.imagesCollection[index]=this.options.imagePath+"/mini/"+item[0]
			this.imagesSizes[index]=item[1]
		}.bind(this))
	},
	buildThumbnailsGallery:function(){
		// thumbnails size
		var width = 130
		var height = 194
		
		this.loadingStatus("block")
		
		// create a new image and inject it in the gallery
		new Asset.images(this.imagesCollection,{
			onProgress:function(index){
				var img = new Element("img",{
					'src':this.imagesCollection[index],
					'alt':"thumbnail gallery "+index,
					'width':width,
					'height':height,
					'events':{
						'click':function(){
							if(!this.isLoading()){
								this.loadingStatus("block")
								this.fullSizeGalleryVisibility(1).chain(function(){
									this.options.fullSizeImage.empty()
									this.showImage(this.imagesCollection[index].replace("mini","full"),this.imagesSizes[index])
								}.bind(this))
							}
						}.bind(this)
					}
				}).injectInside(this.options.gallery)
			}.bind(this),
			onComplete:function(){
				// Load the first full-size image
				this.showImage(this.imagesCollection[0].replace("mini","full"),this.imagesSizes[0])
				// $('sizeBox').effect('width').set(this.imagesSizes[0]+150+50+4)
			}.bind(this)
		})
	},
	showImage:function(path,width){		
		// full size image to load
		var img = new Element("img",{
			'src':path,
			'alt':"main image",
			'width':width,
			'height':500,
			'style':{
				'visibility':'hidden'
			}
		})

		// load the image
		var imgLoad = new Asset.image(path,{
			onload:function(){
				this.changeGlobalSize(width).chain(function(){
					this.fullSizeGalleryVisibility(0).chain(function(){
						this.loadingStatus("none")
					}.bind(this))
				}.bind(this))
			}.bind(this)
		}).injectInside(this.options.fullSizeImage)
	},
	fullSizeGalleryVisibility:function($i){
		var fx = this.options.fullSizeImage.getElement('img').effect('opacity').start(parseInt($i)%2,parseInt($i+1)%2,{duration:1000})
		return fx
	},
	changeGlobalSize:function(imgSize){
		var newSize = imgSize+150+50+4
		var kmSize = $('koshkamashka').getSize().size.x


		var fxElts = {
			'1':{
				'width':[this.sizeboxSize,newSize] // substract the left padding
			},
			'0':{
				'width':[this.fullSizeImageSize,imgSize]
			}
		}

				
		// if(kmSize<newSize+150){
		// 	fxElts['2'] = { 'width': kmSize+(newSize+150-kmSize+50)}
		// 	fxElts['3'] = { 'width': kmSize+(newSize+150-kmSize+50)}
		// 	fxElts['4'] = { 'width': kmSize+(newSize+150-kmSize+50)}
		// }else{
		// 	fxElts['2'] = { 'width': kmSize}
		// 	fxElts['3'] = { 'width': kmSize}
		// 	fxElts['4'] = { 'width': kmSize}			
		// }
		
		var fx = this.loadImageElts.start(fxElts)			
		this.sizeboxSize = newSize
		this.fullSizeImageSize = imgSize
		
		return fx
	},
	setScroll:function(){		
		this.rightArrow.addEvent('click',function(){
			if(this.currentScrollPosition<this.realGalleryHeight-this.visibleGalleryHeight-10){
				this.currentScrollPosition = this.currentScrollPosition+this.visibleGalleryHeight
				this.galleryScroll.scrollTo(0,this.currentScrollPosition)
			}
		}.bind(this))
		
		this.leftArrow.addEvent('click',function(){
			if(this.currentScrollPosition>0){
				this.currentScrollPosition = this.currentScrollPosition-this.visibleGalleryHeight
				this.galleryScroll.scrollTo(0,this.currentScrollPosition)
			}
		}.bind(this))
	}
})

Gallery.implement(new Options,new Events)