/**
* Prototype/Scriptaculous Scrolling/Fading Image Gallery
*
* Version: 1.0
*
**/

var Gallery = Class.create({
	initialize: function(id, defaultImage,json) {
		this.gallery = $(id);
		current = 0;
		this.imageBlock = "";
		//this.json = json;
		totalPanes = 0;
		slideshowTimeout = "";
		this.paginationScrollPos = 0;
		this.newPaginationWidth = 0;
		//this.galleryDefaults = "";
		this.options = {
            imageNum: "imageNumber",
            imagePrev: "imagePrev",
            imageNext: "imageNext"
		}
		//alert(jsonURL);
		
		var imageBlock = "";
		var paginationBlock = "";
		
		//Build the initial view for the images and get gallery defaults
		json.images.each(function(s, imageCount) {
			totalPanes++;
			//Build image list
			//Check for alt text on image so you don't get 'undefined'
			imageAlt = (json.images[imageCount]['alt'] != "") ? json.images[imageCount]['alt'] : "";
						
			imageBlock+= '<div id="galleryImage'+imageCount+'">';
			imageBlock+= '<img src="'+json.images[imageCount]['src']+'" title="'+json.images[imageCount]['alt']+'" alt="'+json.images[imageCount]['alt']+'" />';

			imageBlock+= '</div>';
			//Build pagination list
			var paginationClass = "imageNumber";
			if(imageCount == 0) { paginationClass += ' selected' }
			paginationBlock += '<div class="paginationLink" id="link'+imageCount+'"><a href="javascript:void(0)" class="'+paginationClass+'" id="image'+imageCount+'"><img src="'+json.images[imageCount]['src'].replace('.jpg', '_thumb.jpg')+'" width="60" height="40" /></a></div>\n';

		});
	
		$('imageContainer').update(imageBlock);
		if($('galleryDescriptionCaption')) {
			$('galleryDescriptionCaption').innerHTML = json.images[0]['title'];
		}
		
		if(totalPanes > 1) {
			if($('gallery-navigation-scroller')) {
				$('gallery-navigation-scroller').update(paginationBlock);
			}
			this.slideShow(json);
		}
		
		this.galleryInitialise(json);
		
		
		
		if(totalPanes == 1) {
			$$('.loading').each(function(i) {
				i.hide();
			});
		}
	
	},
	galleryInitialise: function(json) {
		//Configure the containers for the gallery to be the correct width and height
		//$('bottomPanel').setStyle({'height': json.galleryDefaults['bottomPanelHeight']+'px'});
		$('imageContainer').setStyle({'width':(json.galleryDefaults['galleryWidth']*totalPanes)+json.galleryDefaults['galleryWidth']+'px'});
		$('galleryContainer').setStyle({'width':json.galleryDefaults['galleryWidth']+'px','height':json.galleryDefaults['galleryHeight']+'px'});
		$('imageOuterContainer').setStyle({'width':json.galleryDefaults['galleryWidth']+'px','height':json.galleryDefaults['galleryHeight']+'px'});
		//$('pagination').setStyle({'max-width':json.galleryDefaults['galleryWidth']+'px','width':json.galleryDefaults['galleryWidth']+'px'});
		
		//$('homeClick').setAttribute('href', json.images[0]['href']);
		
		//Get gallery info
		var clickHandler =  this.clickHandler.bindAsEventListener(this,json);
        this.gallery.observe('click', clickHandler);
		
		//Add galleryType specific style for positioning
		for(var i=0;i<totalPanes;i++) {
			Element.addClassName('galleryImage'+i,json.galleryDefaults['galleryType']+'Image');	
		}
				
		//Add extra styles needed for fading
		if(json.galleryDefaults['galleryType'] == "fade" && totalPanes > 0) {
			Element.removeClassName('galleryImage0','fadeImage');
			Element.addClassName('galleryImage0','fadeImage-initial');
			for(var fadeBuilder=1;fadeBuilder<totalPanes;fadeBuilder++) {
				$('galleryImage'+fadeBuilder).setStyle({display: 'none'});
			}
		}
		
		if($('gallery-navigation-scroller')) {
			newPaginationWidth = (json.galleryDefaults['paginationCount']*json.galleryDefaults['paginationButtonWidth']);
			$('galleryPaginationContainer').setStyle({'width': newPaginationWidth +'px'});
			var buttonWidth = json.galleryDefaults['paginationButtonWidth'];
			$('galleryPaginationScroller').select('div.paginationLink').each(function (w) { 
				w.setStyle({'width': buttonWidth+'px' }) ;
			});
			$('gallery-navigation-counter').innerHTML = "1/" + json.images.length;
		}
	},
	
	clickHandler: function(e,json) {
        var el = e.element().up(0);
		if(el.hasClassName(this.options.imageNum)) {
            this.endSlideShow();
			$$('.loading').each(function(i) {
				i.setAttribute('style', 'visibility: hidden;');
			 });
			this.changeImage(el,true,json);	
        } else if(el.hasClassName(this.options.imagePrev)) {
			this.endSlideShow();	
			this.prevImage(json);		
		} else if(el.hasClassName(this.options.imageNext)) {
			this.endSlideShow();	
			this.nextImage(json);
		}
    },
	
	changeImage: function(el,getAttr,json) {
		if(getAttr == true) {
			var elementId = el.getAttribute('id');
			var newcurrent = elementId.replace("image","");
		} else {
			var newcurrent = el;
		}
		
		var newImageId = newcurrent;
		var oldXPos = current;
		
		
		if(json.galleryDefaults['galleryType'] == "slide") {
			
			//if(newcurrent > current) {
					
				new Effect.Move("imageContainer", {
					x: -(newcurrent*json.galleryDefaults['galleryWidth']), 
					duration:json.galleryDefaults['changeSpeed'], 
					delay:0, 
					y: 0, 
					mode: 'absolute', 
					queue: 'front',
					transition: Effect.Transitions.sinoidal,
					beforeStart: function() {
						$('imageContainer').setStyle({'width':(((totalPanes+oldXPos)*json.galleryDefaults['galleryWidth'])+json.galleryDefaults['galleryWidth'])+'px'});
					},
					afterFinish: function() {			
						/*json.images.each(function(s, imageCount) {
							totalPanes++;
							//Build image list
							//Check for alt text on image so you don't get 'undefined'
							imageAlt = (json.images[imageCount]['alt'] != "") ? json.images[imageCount]['alt'] : "";
							imageBlock+= '<div id="galleryImage'+(totalPanes-1)+'" class="slideImage">';
							imageBlock+= '<img src="'+json.images[imageCount]['src']+'" title="'+json.images[imageCount]['alt']+'" alt="'+json.images[imageCount]['alt']+'" />';				
							imageBlock+= '</div>';
					});*/
					
					  
					}
							 
				});
			/*
			} else if(newcurrent < current) {
				console.log('end');
				new Effect.Move("imageContainer", {
					x: ((current-newcurrent)*json.galleryDefaults['galleryWidth']), 
					duration:json.galleryDefaults['changeSpeed'], 
					delay:0, 
					y: 0, 
					mode: 'relative', 
					queue: 'front',
					transition: Effect.Transitions.sinoidal
				
				});
			}/**/
		} else if(json.galleryDefaults['galleryType'] == "fade") {
			if(oldXPos != newImageId) {
				$('galleryImage'+newImageId).appear({ duration: json.galleryDefaults['changeSpeed'], queue: {scope: 'galleryScope' } });
				if($('image'+newImageId)) {
					$('image'+newImageId).addClassName('selected');
				} else {
					$('galleryImage'+newImageId).addClassName('selected');
				}
				$('galleryImage'+oldXPos).fade({ duration: json.galleryDefaults['changeSpeed'], queue: {scope: 'galleryScope'}});
				if($('image'+oldXPos)) {
					$('image'+oldXPos).removeClassName('selected');
				} else {
					$('galleryImage'+oldXPos).removeClassName('selected');
				}
				if($('galleryDescriptionCaption')) {
					$('galleryDescriptionCaption').innerHTML = json.images[newImageId]['title'];
					$('gallery-navigation-counter').innerHTML = (parseInt(newImageId)+1) +"/"+ json.images.length;
				}
			}
		}
		
		//Set new current value
		current = newcurrent;
	},
	
	prevImage: function(json) {
		if(current > 0 && totalPanes > 0) {
			this.changeImage(parseInt(current)-1,false,json);
		}
	},
	
	nextImage: function(json) {
		if(slideshowTimeout && current == (totalPanes-1)) {
			//current = 0;
			this.changeImage(0,false,json);
		} else {
			this.changeImage(parseInt(current)+1,false,json);
		}
	},	
	changePagination: function(elNum,oldelNum,getAttr,resetPagination,json) {},
	changeTitle: function(el,json) {},
	slideShow: function(json) {
		slideshowTimeout = setInterval(function(){gallery.nextImage(json);}, json.galleryDefaults['changeInterval']);	
		
	},
	
	endSlideShow: function() {
		clearInterval(slideshowTimeout);
	}
	
});


document.observe("dom:loaded", function() {
	try {
    	if(jsonObj) {
			
			gallery = new Gallery("galleryContainer", 1,jsonObj);
		}
	} catch(e) {
      variablename=[];
	}
});