var currentPosition;
var slideWidth;
var slideHeight;
var slides;
var numberOfSlides;

var slideForward = true;
var slideInterval;

$(document).ready(function () {
    currentPosition = 0;
    slideWidth = $('#slidesContainer').width();
    slideHeight = $('#slidesContainer').height();
    slides = $('.slide');
    numberOfSlides = slides.length;

    // Remove scrollbar in JS
    $('#slidesContainer').css('overflow', 'hidden');

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

    // Set #slideInner width equal to total width of all slides
    $('#slideInner').css('width', slideWidth * numberOfSlides);

    // Insert controls in the DOM
    $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');
    // alert($('#leftControl').height());
//    $('#leftControl').attr('style', 'top:' + ((slideHeight / 2) - ($('#leftControl').height() / 2)) + 'px;');
//    $('#rightControl').attr('style', 'top:' + ((slideHeight / 2) - ($('#rightControl').height() / 2)) + 'px;');
        $('#leftControl').attr('style', 'top:' + (slideHeight - ($('#leftControl').height() + 35)) + 'px;');
        $('#rightControl').attr('style', 'top:' + (slideHeight - ($('#rightControl').height() + 35)) + 'px;');


    // Hide left arrow control on first load
    manageControls(currentPosition);

    // Create event listeners for .controls clicks
    $('.control')
    .bind('click', function () {
        // Determine new position
        currentPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;

        slideAnimate(currentPosition);
    });


});

function slideAnimate(slidePosition) {
    manageControls(slidePosition);
    $('#slideInner').animate({
        'marginLeft': slideWidth * (-slidePosition)
    });
}

function manageControls(position) {
    // Hide left arrow if position is first slide
    if (position == 0) { $('#leftControl').fadeOut() } else { $('#leftControl').fadeIn() }
    // Hide right arrow if position is last slide
    if (position == numberOfSlides - 1) { $('#rightControl').fadeOut() } else { $('#rightControl').fadeIn() }
}

function changeSlides() {
    if (slideForward && currentPosition < numberOfSlides - 1) {
        currentPosition++;
        if (currentPosition == numberOfSlides - 1) {
            slideForward = false;
        }
        slideAnimate(currentPosition);
    } else if (!slideForward && currentPosition > 0) {
        currentPosition--;
        if (currentPosition == 0) {
            slideForward = true;
        }
        slideAnimate(currentPosition);
    }
}