playlistCarousel = Class.create({});
Object.extend(playlistCarousel.prototype, {
	options: {
		showN: 3, // Default number of items in playlist to show before adding a scrollbar
		buttonHeight: 32
	},

	initialize: function(playlistItems, playlistContainer, options) {
		if(!options) options = {};
		Object.extend(this.options,options);

		this.options.dropdowns = $$(this.options.dropdowns);

		this.playlistContainer = playlistContainer;
		this.playlistContainerWidth = playlistContainer.getWidth();

		this.plis = playlistItems;
		this.plisN = this.plis.length;
		
		
		// If scroll bar is needed, build it
		if(this.plisN>this.options.showN) this.setStage();
	},

	setStage: function(){
		this.current = 0;

		this.plisHeight = this.plis[0].getHeight();
		this.playlistContainer.setStyle({
			'height': (this.plisHeight * this.options.showN) + this.options.buttonHeight + 'px',
			'overflow': 'hidden'
		});

		this.createButton();
		this.addSlide();
	},

	addSlide: function(){
		var touchStart = 0;
		this.playlistContainer.ontouchstart = function(e){
			if(e.touches.length == 1){ // Only deal with one finger
				var touch = e.touches[0]; // Get the information for finger #1
				touchStart = touch.screenY;
			}
		}.bind(this);

		this.playlistContainer.ontouchmove = function(e){
			if(e.touches.length == 1){ // Only deal with one finger
				e.preventDefault();
				var touch = e.touches[0]; // Get the information for finger #1

				var diff = (touchStart - touch.screenY) > 0 ? (touchStart - touch.screenY) : 0;
				diff = diff >= this.plisHeight ? this.plisHeight : diff;

				this.plis[this.current].setStyle({'margin-top': -diff + 'px'});
			}
		}.bind(this);

		this.playlistContainer.ontouchend = function(e){
			if(touchStart > 0){ // Only deal with one finger
				if(parseFloat(this.plis[this.current].getStyle('margin-top')) < 0) { this.go(1); }
				touchStart = 0;
			}
		}.bind(this);
	},

	createButton: function(){
		this.buttoncontainer = new Element('div', {
			'id': 'more-trailers-please'
		});
		this.button = new Element('div').update(new Element('img', {
			'src': '/trailers/global/images/more-trailers-please.png'
		}));
		this.buttoncontainer.insert(this.button);
		
		this.backgroundColor = this.playlistContainer.up().getStyle('background-color');
		this.backgroundColor = this.backgroundColor.split(',');
		this.backgroundColor = this.backgroundColor[0] + ',' + this.backgroundColor[1] + ',' + this.backgroundColor[2] + ',1)';
		
		this.buttoncontainer.setStyle({
			'height': (this.options.buttonHeight + 7) + 'px',
			'width': (this.playlistContainerWidth - (5 * 2)) + 'px'
		});
		
		this.button.setStyle({
			'height': this.options.buttonHeight + 'px',
			'line-height': (this.options.buttonHeight - 3) + 'px',
			'background-color': this.backgroundColor
		});
		
		this.button.observe('click', function(e){ this.go(1); }.bind(this));
		
		this.playlistContainer.insert({top:this.buttoncontainer});
	},
	
	go: function(n){
		var goTo = this.current + n;
		goTo = (goTo >= 0) ? goTo : this.plisN - 1;
		goTo = (goTo <= this.plisN - 1) ? goTo : 0;
		
		var currentMT = this.plis[this.current].getStyle('margin-top');
		
		this.clone = new Element('li',{
			'class': 'trailer clone',
			'style': 'margin-top: '+currentMT
		}).update(this.plis[this.current].innerHTML);

		new Effect.Morph(this.clone, {
			'style': 'margin-top:' + (-this.plisHeight) + 'px',
			'duration': .3,
			'afterFinish': function(){
				if(this.clone !== undefined) this.clone.remove();
				delete this.clone;
			}.bind(this)
		});

		this.playlistContainer.insert({ bottom: this.plis[this.current] });
		this.playlistContainer.insert({ top: this.clone });
		this.plis[this.current].setStyle({'margin-top': 0});
		
		this.current = goTo;
	}
});