var Carousel = Class.create({
	initialize: function(options) {
		this.options = Object.extend({
			main_image: 'photoViewerMainImage',
			next_button: 'nextImage',
			previous_button: 'previousImage',
			start_lightbox: 'carousel_start_lightbox',
			start_slideshow: 'carousel_start_lightbox_show',
			image_title: 'carousel_title',
			visible:4,
			expand:false,
			scroll:1
		}, options || {});
		this.ScrollBlock = new gallery_carousel('carousel',{visible:this.options.visible,scroll:this.options.scroll,expand:this.options.expand});
		this.Photo_Array = this.ScrollBlock.ul.select('img');
		this.Main_Image = $(this.options.main_image);
		this.Main_Image_Size = this.Main_Image.readAttribute('size');
		this.Next = $(this.options.next_button);
		this.Previous = $(this.options.previous_button);
		this.image_title = $(this.options.image_title);
		this.ShowingImage = 0;
		this.setup();
		this.startObserving();
	},
	setup: function(){
		var j=0, i=0;
		this.ScrollBlock.ul.select('a').each(function(elem){
			if(j != 0){
				elem.addClassName('lightview');
				elem.writeAttribute('rel','gallery[mygallery]')
			}
			elem.addClassName('stop_view');
			j++;
		});
		this.Photo_Array.each(function(elem){
			elem.writeAttribute('image_number', i);
			i++;
		});
		if(this.image_title != undefined || this.image_title != null)
			this.image_title.update(this.Photo_Array[0].readAttribute('title'));
		this.SetActiveImage(this.Photo_Array[0]);
		this.Buttons();
	},
	startObserving: function(){
		this.ScrollBlock.ul.select('a').each(function(elem){
			elem.observe('click',this.ImageSwap.bind(this));
		}.bind(this));
		if(this.Next != undefined && this.Previous != undefined){
			this.Next.observe('click',this.NextImage.bind(this));
			this.Previous.observe('click',this.PreviousImage.bind(this));
		}
		if($(this.options.start_lightbox) != undefined)
			$(this.options.start_lightbox).observe('click',this.StartLightbox.bind(this));
		if($(this.options.start_slideshow) != undefined)
			$(this.options.start_slideshow).observe('click',this.StartLightboxSlideshow.bind(this));
	},
	ImageSwap: function(e){
		Event.stop(e);
		this.StopLightBox();
		var el = Event.element(e);
		this.Main_Image.src = this.GetNewImage(el);
		this.ShowingImage = parseInt(el.readAttribute('image_number'));
		this.CleanImages();
		this.SetActiveImage(el);
		this.Buttons();
	},
	GetNewImage: function(el){
		if(this.image_title != undefined || this.image_title != null)
			this.image_title.update(el.readAttribute('title'));
		return el.src.replace(el.readAttribute('size'),this.Main_Image_Size);
	},
	CleanImages: function(){
		this.Photo_Array.each(function(elem){
			elem.removeClassName('selected_image');
		});
	},
	SetActiveImage: function(img){
		img.addClassName('selected_image');
	},
	NextImage: function(e){
		Event.stop(e);
		if(this.ScrollBlock.running || this.ShowingImage >= (this.ScrollBlock.itemLength - 1)){
			this.Buttons();
			return;
		}else{
			this.ShowingImage++;
			this.Main_Image.src = this.GetNewImage(this.Photo_Array[this.ShowingImage]);
			this.CleanImages();
			this.SetActiveImage(this.Photo_Array[this.ShowingImage]);
			this.ScrollBlock.getImageAt(this.ShowingImage);
			this.Buttons();
		}
		return;
	},
	PreviousImage: function(e){
		Event.stop(e);
		if(this.ScrollBlock.running || this.ShowingImage <= 0){
			this.Buttons();
			return;
		}else{
			this.ShowingImage--;
			this.Main_Image.src = this.GetNewImage(this.Photo_Array[this.ShowingImage]);
			this.CleanImages();
			this.SetActiveImage(this.Photo_Array[this.ShowingImage]);
			this.ScrollBlock.getImageAt(this.ShowingImage);
			this.Buttons();
		}
		return;
	},
	Buttons: function(){
		if(this.ShowingImage == 0){
			this.Next.removeClassName('next-previous-off');
			this.Previous.addClassName('next-previous-off');
		}else if(this.ShowingImage >= this.ScrollBlock.itemLength - 1){
			this.Next.addClassName('next-previous-off');
			this.Previous.removeClassName('next-previous-off');
		}else{
			this.Next.removeClassName('next-previous-off');
			this.Previous.removeClassName('next-previous-off');
		}
	},
	StopLightBox: function(){
		if(Lightview != undefined)
			Lightview.hide();
		return;
	},
	StartLightbox: function(e){
		if(Lightview != undefined){
			if(Lightview.sliding == true)
				Lightview.stopSlideshow();
			Lightview.show(this.Main_Image.up());
		}
		Event.stop(e);
	},
	StartLightboxSlideshow: function(e){
		if(Lightview != undefined){
			Lightview.show(this.Main_Image.up());
			Lightview.startSlideshow();
		}
		Event.stop(e);
	}
});
//scrollbar portion
/* js created structure
	<div class="jcarousel-container jcarousel-container-horizontal">
		<div class="jcarousel-prev jcarousel-prev-horizontal"></div>
		<div class="jcarousel-next jcarousel-next-horizontal"></div>
		<div class="jcarousel-clip jcarousel-clip-horizontal">
			<ul id="you name this" class="jcarousel-list jcarousel-list-horizontal"> 
				<li class="jcarousel-item jcarousel-item-horizontal" index="1"><img /></li>
				<li class="jcarousel-item jcarousel-item-horizontal" index="2"><img /></li>
			</ul>
		</div>
	</div>
	<div class="jcarousel-expand jcarousel-expand-closed"></div>
*/
var gallery_carousel = Class.create({
	initialize: function(element,options) {
		this.options = Object.extend({
			auto: false,
			speed: 2000,
			vertical: false,
			visible: 4,
			skin_class: 'jcarousel',
			start: 0,
			expand:false,
			scroll: 1,
			beforeStart: Prototype.emptyFunction,
			afterEnd: Prototype.emptyFunction
		}, options || {});
		this.running = false;
		this.nextButton = null;
		this.prevButton = null;
		this.animCss = this.options.vertical ? "top" : "left";
		this.direction = this.options.vertical ? "vertical" : "horizontal";
		this.sizeCss = this.options.vertical ? "height" : "width";
        this.div = $(element);
		this.ul = this.div;
		this.tLi = this.div.select("li");
		this.tl = this.tLi.length;
		this.v = this.options.visible;
        this.li = this.div.select("li");
		this.itemLength = this.li.length;
		this.curr = this.options.start;
		this.div.wrap('div', {'class': this.options.skin_class+'-skin'});
		this.div.wrap('div', {'class': this.options.skin_class+'-container '+this.options.skin_class+'-container-' + this.direction});
		this.div.wrap('div', {'class': this.options.skin_class+'-clip '+this.options.skin_class+'-clip-' + this.direction});
		this.div.addClassName(this.options.skin_class+'-list '+this.options.skin_class+'-list-' + this.direction);
		this.div.up(1).insert({'top': '<div class="'+this.options.skin_class+'-prev '+this.options.skin_class+'-prev-' + this.direction + '"></div><div class="'+this.options.skin_class+'-next '+this.options.skin_class+'-next-' + this.direction + '"></div>'});
		if(this.options.expand)
			this.div.up(1).insert({'after': '<div class="'+this.options.skin_class+'-expand '+this.options.skin_class+'-expand-closed"></div>'});
		this.li.each(function(el){el.addClassName(this.options.skin_class+'-item');}.bind(this));
		this.div.setStyle({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});
		this.btnPrev = this.div.up(1).select('.'+this.options.skin_class+'-prev')[0];
		this.btnNext = this.div.up(1).select('.'+this.options.skin_class+'-next')[0];
		this.liSize = this.options.vertical ? this.height(this.li) : this.width(this.li);
        this.ulSize = this.liSize * this.itemLength;                  						
        this.divSize = this.liSize * this.v;                           						
        this.ul.setStyle({width:this.ulSize+"px"}); 
		if(this.btnPrev)
            this.btnPrev.observe('click', this.previous.bind(this));
        if(this.btnNext)
           this.btnNext.observe('click', this.next.bind(this));
        if(this.options.auto)
			this.setTimer();
		if(this.options.expand)
			$$('.'+this.options.skin_class+'-expand')[0].observe('click',this.expandThumbs.bind(this));
        this.vis();
		this.setButtons();
	},
	width: function(el){
		return el[0].getWidth() + this.css(el[0], 'marginLeft') + this.css(el[0], 'marginRight');
	},
	height: function(el){
		return el[0].getHeight() + this.css(el[0], 'marginTop') + this.css(el[0], 'marginBottom');
	},
	previous: function(e){
		this.go(this.curr-this.options.scroll);
	},
	next: function(e){
		this.go(this.curr+this.options.scroll);
	},
	css: function(el, prop) {
		return parseInt($(el).getStyle(prop)) || 0;
	},
	vis: function(){
		return this.li.slice(this.curr).slice(0,this.v);
	},
	setTimer: function(){
        if(this.options.auto)
			this.timer = setTimeout(this.next.bind(this),this.options.speed);
		return;
	},
	getImageAt: function(pos){
		this.go(pos);
	},
	clearTimer: function(){
		clearTimeout(this.timer);
		return;
	},
	go: function(to){
        if(this.options.auto)
			this.clearTimer();
		if(!this.running) {
			if(this.options.beforeStart){
				this.options.beforeStart(this, this.vis());
			}
			if(to < 0 || to > this.itemLength - this.v){
				return;
			}else{
				this.curr = to;
			} 
			this.running = true;
			new Effect.Move(this.ul, {
				x: -(this.curr * this.liSize),
				mode:'absolute',
				afterFinish: function(){
					this.options.afterEnd(this, this.vis());
					this.running = false;
					this.setTimer();
				}.bind(this)
			});
			this.setButtons();
		}
        return;
	},
	expandThumbs: function(e){
		var el = Event.element(e);
		if(el.hasClassName(this.options.skin_class+'-expand-closed')){
			el.removeClassName(this.options.skin_class+'-expand-closed');
			this.btnPrev.hide();
			this.btnNext.hide();
			this.div.up().addClassName(this.options.skin_class+'-expand-style')
		}else{
			el.addClassName(this.options.skin_class+'-expand-closed');
			this.btnPrev.show();
			this.btnNext.show();
			this.div.up().removeClassName(this.options.skin_class+'-expand-style')
		}
	},
	setButtons: function(){
		this.btnPrev.removeClassName(this.options.skin_class+'-prev-disabled-' + this.direction);
		this.btnNext.removeClassName(this.options.skin_class+'-next-disabled-' + this.direction);
		if(this.curr-this.options.scroll<0 && this.btnPrev)
			this.btnPrev.addClassName(this.options.skin_class+'-prev-disabled-' + this.direction);
		if(this.curr+this.options.scroll > this.itemLength-this.v && this.btnNext)
			this.btnNext.addClassName(this.options.skin_class+'-next-disabled-' + this.direction);
	}
});