// Constants
var stepSize = 122;
var frameDelay = 10;
var easeIn = 5;
var initDelay = 100;

// Class: videoCarousel
function videoCarousel(id) {
    this.id = id;
    this.render = renderVideoCarousel;
    this.addVideo = addVideo;
    this.videos = Array();
    this.postRender = postRenderVideoCarousel;
    this.position = 0;
    this.endPosition = 0;
    this.move = moveToPosition;
}

function addVideo(id, title, youtubeid, product) {
    this.videos.push(new videoCarouselProduct(id, title, youtubeid, product));
}

function renderVideoCarousel() {
    // write HTML in-place here
    
    document.write('<div id="'+ this.id +'">');
    document.write('<div id="'+ this.id +'_prev" class="previous_button disabled"></div>');
    document.write('<div class="container">');
    document.write('<ul id="'+ this.id +'_ul">');
    
    for(var x in this.videos) this.videos[x].render(x); 
    
    document.write('</ul>');
    document.write('</div>');
    document.write('<div id="'+ this.id +'_next" class="next_button"></div>');
    document.write('</div>');
    
    this.postRender();
}

function postRenderVideoCarousel() {
    this.prevButton = document.getElementById(this.id + '_prev');
    this.nextButton = document.getElementById(this.id + '_next');
    this.prevButton.carousel = this;
    this.nextButton.carousel = this;
    this.nextButton.onclick = moveNext;
    this.prevButton.onclick = movePrev;
    this.prevButton.type = 'previous';
    this.nextButton.type = 'next';
    this.prevButton.enable = enableButton;
    this.nextButton.enable = enableButton;
    this.prevButton.disable = disableButton;
    this.nextButton.disable = disableButton;
    this.prevButton.update = updateButton;
    this.nextButton.update = updateButton;
    this.nextButton.otherButton = this.prevButton;
    this.prevButton.otherButton = this.nextButton;
    this.nextButton.update();
    this.prevButton.update();
}



function moveToPosition(context) {
    var nextPosition = parseInt(((context.position * easeIn)  + context.endPosition) / (easeIn + 1));
    if (nextPosition < context.endPosition && nextPosition == context.position) nextPosition++;
    if (nextPosition > context.endPosition && nextPosition == context.position) nextPosition--;
    
    if (nextPosition == context.endPosition) {
        nextPosition = context.endPosition;
        window.clearInterval(context.moveInterval);
    }
    document.getElementById(context.id + '_ul').style.left = nextPosition + 'px';
    context.position = nextPosition
}


// Class: videoCarouselProduct
function videoCarouselProduct(id, title, youtubeid, product) {
    this.id = id;
    this.title = title;
    this.youtubeid = youtubeid;
    this.product = product;
    
    this.render = renderVideoCarouselProduct;
}

function renderVideoCarouselProduct(ord) {
    document.write('<li style="left:' + (ord * stepSize) + 'px">');
    document.write('<a href="/video.aspx?id='+ this.id +'&i='+ this.product +'"><img src="http://img.youtube.com/vi/'+ this.youtubeid +'/2.jpg" width="90" height="67" alt="' + this.title + '" /></a>');
    document.write('<h4><a href="/video.aspx?id='+ this.id +'&i='+ this.product +'">'+ this.title +'</a></h4>');
    document.write('</li>');
}

// Button methods
function disableButton() { this.className = this.type + '_button disabled'; }
function enableButton() { this.className = this.type + '_button'; }

function updateButton() {
    if (this.type == 'next') {
        // next button bound checks
        var scrollSize = -(this.carousel.videos.length * stepSize) + document.getElementById(this.carousel.id).offsetWidth;
        scrollSize = scrollSize + (scrollSize % stepSize) ;
        if (this.carousel.endPosition <= scrollSize) this.disable();
        else this.enable();
  
    } else {
        // previous button bound checks
        if (this.carousel.endPosition >= 0) this.disable();
        else this.enable();
    }
}

function moveNext() {
    var scrollSize = -(this.carousel.videos.length * stepSize) + document.getElementById(this.carousel.id).offsetWidth;
    scrollSize = scrollSize + (scrollSize % stepSize) - (stepSize);

    var originalEndPosition = this.carousel.endPosition;
    this.carousel.endPosition = this.carousel.endPosition - stepSize;
    if (this.carousel.endPosition <= scrollSize) { this.carousel.endPosition = originalEndPosition; }
    this.update();
    this.otherButton.update();
    window.clearTimeout(this.carousel.initDelayTimeout);
    window.clearInterval(this.carousel.moveInterval);
    var c = this.carousel;
    c.initDelayTimeout = window.setTimeout(function () {
        c.moveInterval = window.setInterval(function() { moveToPosition(c) } , frameDelay);
    }, initDelay);
}

function movePrev() {
    this.carousel.endPosition = this.carousel.endPosition + stepSize;
    if (this.carousel.endPosition > 0) { this.carousel.endPosition = 0; }
    
    this.update();
    this.otherButton.update();
    window.clearTimeout(this.carousel.initDelayTimeout);
    window.clearInterval(this.carousel.moveInterval);
    var c = this.carousel;
    c.initDelayTimeout = window.setTimeout(function () {
        c.moveInterval = window.setInterval(function() { moveToPosition(c) } , frameDelay)
    }, initDelay);
}