﻿/**
* @ver 0.2
* @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 = "/Images/slider/arrow_left_CG_site.png";
    (params.rightControlImage != undefined) ? this.rightControlImage = params.rightControlImage : this.rightControlImage = "/Images/slider/arrow_right_CG_site.png";
    this.intervalId = 0; //internal variable for interval
    selector = '#' + this.slideId;
    $(selector).css({
        'width': this.slideWidth,
        'height': this.slideHeight
    });
    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 class="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 leftControl">Move left</span>')
.append('<span class="control 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('fast', 0, function () {
                $(selector).css('marginLeft', myself.slideWidth * (-myself.currentPosition));
                $(selector).fadeTo('fast', 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).hasClass('rightControl')) ? direction = 'forward' : direction = 'backward';
        myself.stop(); // if clicked a button then stop autoplay
        myself.showNext(direction);
    });
    this.stop = function () {
        clearInterval(this.intervalId);
        playerStatus('stopped');
    }
    this.start = function () {
        this.intervalId = setInterval(function () { myself.rotate(); }, this.autoplayInterval);
        playerStatus('running, interval = ' + this.autoplayInterval + 'msec');
    }
    if (this.autoplayShowControls) {
        selector = '#' + this.slideId;
        $(selector)
.append('<span class="playcontrol startControl">Start</span>')
.append('<span class="playcontrol 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) {
            playerStatus('waiting for delay to start (' + this.autoplayDelay + 'msec)');
            setTimeout(function () { myself.start(); }, this.autoplayDelay);
        } else {
            this.start();
        }
    }
}
