var ugcPhotoSlider = new Class({
	options: {
        arPhotos: null,
		slideContainer: null,
		slideContent:null,
		sliderBox: null,
		arLeftArrows: null,
		arRightArrows: null,
		picturesPerSlide: 1
    },

    initialize: function(options){
		this.setOptions(options);
		this.slideWidth = 210; /*this.options.slideContent.getStyle("width").substr(0, (this.options.slideContent.getStyle("width").length-2)).toInt();*/
		this.slideCount = Math.ceil(this.options.arPhotos.length/this.options.picturesPerSlide);
		this.slideShown = 1;
		this.slide_idx = 0;
		this.photos_idx = 0;
		this.slidesLoaded = 0;
		this.slides = [];
		this.sliderBoxSrc = this.options.slideContent.clone();

		var slide1 = this.newSlide();
		this.prepareSlide(slide1);
		$(this.options.slideContent).replaceWith(slide1);
		this.slides.push(slide1)
		
		var nextSlide = this.newSlide();
		this.prepareSlide(nextSlide);
		this.addSlide(nextSlide);
		
		this.initializeButtons();
	},

	initializeButtons: function() {
		$each(this.options.arLeftArrows, function(btn) {
			this.newButton(btn, 'left');
		}.bind(this));

		$each(this.options.arRightArrows, function(btn) {
			this.newButton(btn, 'right');
		}.bind(this));
		this.refreshButtons();
	},
	
	refreshButtons: function() {
		$each(this.options.arLeftArrows, function(btn) {
			if (this.slideShown <= this.slideCount && this.slideShown > 1) {
				var enable = true;
			} else {
				var enable = false;
			}
			this.toggleArrowBtn(btn, 'left', enable);
		}.bind(this));

		$each(this.options.arRightArrows, function(btn) {
			if (this.slideShown < this.slideCount && this.slideShown >= 1) {
				var enable = true;
			} else {
				var enable = false;
			}
			this.toggleArrowBtn(btn, 'right', enable);
		}.bind(this));
	},
	
	newButton: function(btn, direction, enabled) {
		var inst = this;
		btn.ugcSliderBtn = {'enabled': false};
		btn.addEvent('click', function() {
			if(direction == 'right') this.nextSlide();
			if(direction == 'left') this.previousSlide();
			this.refreshButtons();
		}.bind(this));
	},
	
	toggleArrowBtn: function(btn, direction, enable) {
		if(undefined == enable) {
			var enable = !btn.ugcSliderBtn.enabled;
		}
		
		var btn_enabled = false;
		var img_path = 'http://stmedia.startribune.com/designimages/';
		var img_filename = 'vikeSlider';
		if (direction == 'right') {
			img_filename = img_filename + 'Right';
		}
		
		if (direction == 'left') {
			img_filename = img_filename + 'Left';
		}

		if (enable && btn.ugcSliderBtn.enabled == false) {
			btn.setProperty('src', img_path+img_filename+'Off.gif');
			btn.setProperty('alt', 'off');
			btn.addEvents({
				'mouseover': function() {
					btn.setProperty('src', img_path + img_filename + 'Over.gif');
					btn.setProperty('alt', 'over');
				},
				'mouseout': function() {
					btn.setProperty('src', img_path + img_filename + 'Off.gif');
					btn.setProperty('alt', 'off');
				},
				'mousedown': function() {
					btn.setProperty('src', img_path + img_filename + 'Down.gif');
					btn.setProperty('alt', 'down');
				},
				'mouseup': function() {
					btn.setProperty('src', img_path + img_filename + 'Over.gif');
					btn.setProperty('alt', 'over');
				}				
			});
			btn.setStyle('cursor', 'pointer');
			btn.ugcSliderBtn.enabled = true;
		} else if(enable == false && btn.ugcSliderBtn.enabled) {
			btn.setProperty('src', img_path+img_filename+'Over.gif');
			btn.setProperty('alt', 'over');
			btn.removeEvents('mouseover');
			btn.removeEvents('mouseout');
			btn.removeEvents('mousedown');
			btn.removeEvents('mouseup');
			btn.setStyle('cursor', '');
			btn.ugcSliderBtn.enabled = false;
		}		
	},
	
	fxSlide: function(slide, direction, objInst) {
		var fx = new Fx.Styles(slide, {duration:500,wait:false});
		var left = slide.getStyle("margin-left").substr(0, (slide.getStyle("margin-left").length-2)).toInt();
		if(direction == 'left') {
			if ((left - objInst.slideWidth) == 0) {
				fx.start( {'margin-left':(left - objInst.slideWidth), 'opacity':1 } );
			} else {
				fx.start( {'margin-left':(left - objInst.slideWidth), 'opacity':0 } );
			}
		} else {
			if ((left + objInst.slideWidth) == 0) {
				fx.start({'margin-left': (left + objInst.slideWidth), 'opacity':1} );
			} else {
				fx.start({'margin-left': (left + objInst.slideWidth), 'opacity':0} );
			}
		}
		 
	},
	
	previousSlide: function() {
		if (this.slideShown <= this.slideCount && this.slideShown > 1) {
			this.slides[this.slide_idx].slideRight();
			this.slide_idx--;
			this.slideShown--;
			this.slides[this.slide_idx].slideRight();
		}
	},
	
	nextSlide: function() {
		if(this.slideShown < this.slideCount && this.slideShown >= 1) {
			this.slides[this.slide_idx].slideLeft();
			this.slide_idx++;
			this.slideShown++;
			this.slides[this.slide_idx].slideLeft();
			
			if (this.slide_idx == (this.slides.length-1)) {
				var nextSlide = this.newSlide();
				this.prepareSlide(nextSlide);
				this.addSlide(nextSlide);
			}
		}
	},
	
	
	prepareSlide: function(slide) {
		var photoBlocks = slide.getElements('.photoBlock');
		if (this.slidesLoaded < this.slideCount) {
			$each(photoBlocks, function(block){
				if (this.photos_idx < this.options.arPhotos.length) {
					var photo = this.options.arPhotos[this.photos_idx];
					
					if (photo.height > photo.width) {
						var url = 'http://ww2.startribune.com/imageresize/imgsize.php?img=' + photo.url + '&w=206';
					}
					else {
						var url = 'http://ww2.startribune.com/imageresize/imgsize.php?img=' + photo.url + '&h=190';
					}
					block.getElements('.ugcphoto').setStyle('background-image', 'url(' + url + ')');
					block.getElements('.ugcphoto').addEvent('click', function() { window.location = photo.link; });
					if (photo.description.length > 0) {
						var caption = photo.description;
						if (caption.length >= 95) {
							caption = caption.substr(0, 95);
							caption = caption.substr(0, caption.lastIndexOf(' ')) + ' ...';
						}
					}
					else {
						var caption = photo.title;
					}
					
					caption = caption + ' By <b>'+photo.username+'</b>';
					block.getElements('.photoDetail').setHTML(caption);

					this.photos_idx++;
				}
				else {
					block.setStyle('display', 'none');
				}
			}.bind(this));
			this.slidesLoaded++;
		}
	},
	
	newSlide: function() {
		
		var slide = this.sliderBoxSrc.clone();

		if(this.slides.length > 0) {
			var margin_left = this.slideWidth;
		} else {
			var margin_left = 0;
		}
		slide.removeAttribute('id');
		slide.setStyles({
			'position': 'absolute',
			'width': this.slideWidth,
			'margin-left': margin_left
		});
		slide.slideLeft = this.fxSlide.pass([slide, 'left', this]);
		slide.slideRight = this.fxSlide.pass([slide, 'right', this]);
		return slide;
	},
	
	addSlide: function(slide) {
		slide.inject(this.options.slideContainer);
		this.slides.push(slide);
	}
	
});
ugcPhotoSlider.implement(new Options);