var slidebox = function (slideWidth, numSlides, name) {

    var currentPosition = 0;
    var nameId = '#' + name + ' '
    var slides = $(nameId + '.slide');
    var numberOfSlides = slides.length;
    var correction = 6;
    var baseHeight = parseInt(slideWidth * 3 / 4);
    if (baseHeight > 100) { baseHeight = 100; }
    var controlImgHeight = baseHeight;
    
    // Remove scrollbar in JS
    $(nameId + '.slidesContainer').css({
        'overflow': 'hidden',
        'width': ((slideWidth + correction) * numSlides) + "px",
        'margin': '0 auto'
    });

    // Wrap all .slides with .slideInner div
    slides
        .wrapAll('<div class="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	    .css({
	        'float': 'left',
	        'width': slideWidth
	    });
    $(nameId + '.slide img').css({ 'width': slideWidth, 'height': baseHeight });

    // Set .slideInner width equal to total width of all slides
    $(nameId + '.slideInner').css({ 'width': slideWidth * (numberOfSlides + 1), 'height': baseHeight });

    // Insert controls in the DOM
    $(nameId + '.slidebox')
        .prepend('<span class="control" id="leftControl"><img src="img/control_left.jpg" alt="" /></span>')
        .prepend('<span class="control" id="rightControl"><img src="img/control_right.jpg" alt="" /></span>');

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

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

            if (currentPosition >= 0) {
              // Hide / show controls
              manageControls(currentPosition);
              // Move slideInner using margin-left
              $(nameId + '.slideInner').animate({
                  'marginLeft': (slideWidth + correction) * (-currentPosition)
              });
            } else {
              currentPosition = currentPosition + 1;
            }
        })
        .css({
            'height': baseHeight,
        });
    $(nameId + '.control img').css({
        'height': controlImgHeight
    });

    // manageControls: Hides and Shows controls depending on currentPosition
    function manageControls(position) {
        // Hide right arrow if position is last slide
        if (position == (numberOfSlides - numSlides)) { $(nameId + '#rightControl').hide() } else { if (numberOfSlides > numSlides) { $(nameId + '#rightControl').show() } else { $(nameId + '#rightControl').hide() } }
    }

};