var GallerySlider = new Class({

	options:{
		iFxDuration : 1000,
		iStartingImage: 0,
		onSlideComplete: Class,
		iImageWidthCorrection: 0,
		iImageLeftMaxCorrection: 1
	},
	initialize: function(sImageWrapper, sImages, sNext, sPrev, aOptions) {
		var options, aOptions, iFxDuration, iStartingImage;
		var elImageWrapper, iImageWrapperWidth, elNext, elPrev, iImageWidthCorrection, iImageLeftMaxCorrection;
		var arrImages = new Array();
		var elImage, iImageWidth, sImageUrl, iArrIndex;
		var iLeftStartingPos, iLeftMaxPos, iRightMaxPos, fxSlide;

		if(!$("landing-wrapper")) {
			if($("landing-wrapper") != null) $("bgimagewrapper").setStyle("opacity", 0.5);
		}

		this.setOptions(this.options, aOptions);

		/*getting options to set them, less typing in the end, its pretty-er to make a getOptions() */
		this.iFxDuration = this.options.iFxDuration;
		this.iStartingImage = this.options.iStartingImage.toInt();
		this.iImageWidthCorrection = this.options.iImageWidthCorrection.toInt();
		this.iImageLeftMaxCorrection = (this.options.iImageLeftMaxCorrection.toInt == 0) ? 1 : this.options.iImageLeftMaxCorrection.toInt();

		this.elImageWrapper = $(sImageWrapper);
		this.arrImages = $$('.'+sImages);
		
		this.elNext = $(sNext);
		this.elPrev = $(sPrev);
		if(this.arrImages.length <= 1){
			this.elNext.setStyle('display','none');
			this.elPrev.setStyle('display','none');
		}

		//getting stuff from the image (div.image-solo)
		this.elImage = this.arrImages[this.iStartingImage];
		this.iImageWidth = this.elImage.getSize()['size']['x'] + this.iImageWidthCorrection; //dynamic should loop over each image
		this.sImageUrl = this.elImage.getProperty('href');
		this.iArrIndex = (this.getHash()) ? this.getHash() : this.iStartingImage;
		this.iImageWrapperWidth = (this.arrImages.length * this.iImageWidth);

		//Just some global stuff
		this.iLeftStarting = -(this.iArrIndex * this.iImageWidth); //starting posX of elImageWrapper
		this.iLeftMinPos = 0;
		this.iLeftMaxPos = this.iImageWrapperWidth - (this.iImageWidth * this.iImageLeftMaxCorrection);

		this.fxSlide = new Fx.Styles(this.elImageWrapper, {duration:this.iFxDuration, transition:Fx.Transitions.Sine.easeInOut, wait:true});
		
		//Go Go Functions!
		this.setImageWrapperWidth(this.iImageWrapperWidth);		
		this.addButtonEvents();		
		/* credit stuff */
		this.setPhotoCredits();

		//starting slide
		this.slideImage();
	},
	setPhotoCredits: function(){
		var elCreditWrapper = $("credit-wrapper");
		$$("#credit-wrapper", "#credit-hitarea").setStyle("width", this.iImageWrapperWidth);
	},
	setImageWrapperWidth: function(iWidth){
		this.elImageWrapper.setStyle('width', iWidth);
	},
	slideImage: function(sDirection){
	
		if(sDirection == "next") {
			if(this.iLeftStarting != -this.iLeftMaxPos) { 
				this.iLeftStarting -= this.iImageWidth; this.iArrIndex++;
			} else { 
				this.iLeftStarting = this.iLeftMinPos; this.iArrIndex = 0;
			}
		} else if(sDirection == "prev"){
			if(this.iLeftStarting != this.iLeftMinPos) { 
				this.iLeftStarting += this.iImageWidth; this.iArrIndex--;
			} else { 
				this.iLeftStarting = -this.iLeftMaxPos; this.iArrIndex = 0;
			}
		} else {
			this.iLeftStarting = this.iArrIndex * -this.iImageWidth;
		}
		//this.setHash('');
		this.fxSlide.stop().start({'left' : this.iLeftStarting});
		
		var elHitArea = $("credit-hitarea");
		if($defined(elHitArea)){
			var fxTmp = new Fx.Styles($("credit-wrapper"), {duration:400, transition:Fx.Transitions.Sine.easeInOut, wait:true});

			var cCredit = new Chain();
			cCredit.chain(function(){ elHitArea.fireEvent("mouseenter", fxTmp); });
			cCredit.chain(function(){ elHitArea.fireEvent("mouseleave", fxTmp, 1250); });

			cCredit.callChain.delay(500, cCredit);
			cCredit.callChain(cCredit);
		}
	
	},
	addButtonEvents: function(){
		this.elNext.addEvent("click", this.next.bindWithEvent(this));
		this.elPrev.addEvent("click", this.previous.bindWithEvent(this));
		document["addEvent"]("keydown", this.keyDown.bindWithEvent(this));
	},
	next: function(){
		this.slideImage('next');
	},
	previous: function(){
		this.slideImage('prev');
	},
	keyDown : function (event) {
		switch(event.code) {
			case 37:	// Left arrow
			case 80:	// 'p'
				this.previous();
				break;	
			case 39:	// Right arrow
			case 78:	// 'n'
				this.next();
		}
		// Prevent default keyboard action (like navigating inside the page)
		return false;
	},
	getHash: function() {
		var href = window.location.href;
		var pos = href.indexOf('#').toInt();
		var returnValue = null;
		if(pos > 0){
			pos += 1;
			returnValue = ( href.substr(pos.toInt()) != "" ) ? href.substr(pos.toInt()) : this.iStartingImage;
		}
		return returnValue;
	},
	setHash: function(hashValue){		
		window.location.href = window.location.href.split('#')[0] + "#" + hashValue;
	},
	setNavigation: function(){
		
		/*if(this.iArrIndex == 0) {
			iPrev = this.arrImages.length - 1;
			iNext = this.iArrIndex.toInt() + 1;
		} 
		else if (this.iArrIndex == (this.arrImages.length - 1)) {
			iPrev = this.iArrIndex - 1;
			iNext = 0;
		} else {
			
			iPrev = this.iArrIndex - 1;
			iNext = this.iArrIndex + 1;
		}
		alert(this.iArrIndex + 'prev: ' + iPrev + ' next: ' + iNext);*/
		
		//this.elPrev.setProperty("href", "#"+iPrev);
		//this.elNext.setProperty("href", "#"+iNext);
	}

});

GallerySlider.implement(new Events);
GallerySlider.implement(new Options);