/**
 * @param string slideId : "id" param of main container <div id="slider-1" class="slideshow">
 * @param string slideWidth : Width of main container <div id="slider-1" class="slideshow">
 * @param string slideHeight : Height of main container <div id="slider-1" class="slideshow">
 * @param string|boolean autoplay : If slideshow will start automatically
 * @param integer autoplayInterval : Milliseconds between each slide when autoplay is true
 * @param integer autoplayDelay : Milliseconds before starting autoplay
 * @param string|boolean autoplayShowControls : Show or hide start|stop links
 * @param string leftControlImage : Image for left button
 * @param string rightControlImage : Image for right button
 */
var ocSlider = function (params) {
	// IMPORTANT!!! set this variable in order to refer to "this" inside all callback functions
	var myself = this;

	(params.currentPosition != undefined) ? this.currentPosition =  params.currentPosition : this.currentPosition = 0;

	this.slideId 		= params.slideId;
	this.slideWidth 	= params.slideWidth;
	this.slideHeight 	= params.slideHeight;
	this.autoplay 		= params.autoplay;

	(params.autoplayDelay != undefined) ? this.autoplayDelay =  params.autoplayDelay : this.autoplayDelay = 0;
	(params.autoplayInterval != undefined) ? this.autoplayInterval =  params.autoplayInterval : this.autoplayInterval = 3000;
	(params.autoplayShowControls != undefined) ? this.autoplayShowControls =  params.autoplayShowControls : thisautoplayShowControls = false;

	(params.leftControlImage != undefined) ? this.leftControlImage =  params.leftControlImage : this.leftControlImage = "img/control_left.jpg";
	(params.rightControlImage != undefined) ? this.rightControlImage =  params.rightControlImage : this.rightControlImage = "img/control_right.jpg";

	this.intervalId = 0; //internal variable for interval

	selector = '#' + this.slideId;
	$(selector).css( {
			'border': '0px solid black',
			'width' : this.slideWidth,
			'height': this.slideHeight,
			'backgroundColor': '#cc0505'
			});


	selector = '#' + this.slideId + ' #slidesContainer';
	$(selector).css( {
			'overflow': 'hidden',
			'width' : this.slideWidth,
			'height': this.slideHeight
			});


	selector = '#' + this.slideId + ' .slide';
	this.slides = $(selector);
	this.numberOfSlides = this.slides.length;

	this.slides
		.wrapAll('<div id="slideInner"></div>')
		// Float left to display horizontally, readjust .slides width
		.css({
	    	'float' : 'left',
			'width' : this.slideWidth,
			'height': this.slideHeight
		});

	selector = '#' + this.slideId + ' #slideInner';
	$(selector).css('width', this.slideWidth * this.numberOfSlides);
	$(selector).css('marginLeft',  this.slideWidth*(-this.currentPosition) );

	selector = '#' + this.slideId;
	$(selector)
	    .append('<span class="control" id="leftControl">Move left</span>')
	    .append('<span class="control" id="rightControl">Move right</span>');


	selector = '#' + this.slideId + ' #leftControl';
	$(selector).css('background-image', 'url('+this.leftControlImage+')');
	selector = '#' + this.slideId + ' #rightControl';
	$(selector).css('background-image', 'url('+this.rightControlImage+')');

	this.manageControls = function( position ) {
	    // Hide left arrow if position is first slide
	    selector = '#' + this.slideId + ' #leftControl';
	    if( position==0 ){ $(selector).hide() }
	    else{ $(selector).show() }

	    // Hide right arrow if position is last slide
	    selector = '#' + this.slideId + ' #rightControl';
	    if( position == this.numberOfSlides-1){ $(selector).hide() }
	    else{ $(selector).show() }
	};


	this.rotate = function (){
		if ( this.currentPosition == this.numberOfSlides-1) {
			this.currentPosition = 0;
			// Hide / show controls
			this.manageControls(this.currentPosition);
			// go back to first slide

			selector = '#' + this.slideId + ' #slideInner';
			$(selector).fadeTo('slow', 0, function() {
				$(selector).css('marginLeft',  myself.slideWidth*(-myself.currentPosition) );
				$(selector).fadeTo('slow',1);
			});

		}else{
			this.showNext('forward');
		}
	}

	this.showNext = function (direction) {
		// Determine new position
		this.currentPosition = (direction=='forward')? this.currentPosition+1 : this.currentPosition-1;

		// Hide / show controls
		this.manageControls( this.currentPosition );

		// Move slideInner using margin-left
		selector = '#' + this.slideId + ' #slideInner';
		$(selector).animate({
			'marginLeft' : this.slideWidth*(-this.currentPosition)
		});
	}

	this.manageControls( this.currentPosition );

	selector = '#' + this.slideId + ' .control';
	$(selector).bind('click', function(){
		($(this).attr('id')=='rightControl')? direction='forward' : direction='backward';
		myself.showNext(direction);
	});



	this.stop = function() {
		clearInterval( this.intervalId );
	}

	this.start = function() {
		this.intervalId = setInterval( function(){myself.rotate();}, this.autoplayInterval);
	}

	if ( this.autoplayShowControls ) {
		selector = '#' + this.slideId;
		$(selector)
			.append('<span class="playcontrol" id="startControl">Start</span>')
			.append('<span class="playcontrol" id="stopControl">Stop</span>');

		playcontrol = '#' + this.slideId + ' #startControl';
		$(playcontrol).bind('click', function() { myself.start() });

		playcontrol = '#' + this.slideId + ' #stopControl';
		$(playcontrol).bind('click', function() { myself.stop() });
	}

	if ( this.autoplay ) {
		if ( this.autoplayDelay != 0 ) {
			setTimeout( function(){myself.start();}, this.autoplayDelay);
		} else {
			this.start();
		}
	}


}