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

    var currentPosition = 0;
    var nameId = '#' + name + ' '
    var slides = $(nameId + '.slide');
    var numberOfSlides = slides.length;
    var correction = 6;
    var baseHeight = parseInt(slideWidth * ratio);
    //var baseHeightController = baseHeight;
    var marginTopController = 0;
    //if (baseHeightController > 160) { baseHeightController = 160; marginTopController = baseHeight / 2 - 80; }

    // Remove scrollbar in JS
    $(nameId + '.slidesContainer').css({
        'overflow': 'hidden',
        'width': ((slideWidth + correction) * numSlides) + "px"
    });

    // 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,
	        'height': baseHeight
	    });

    if (name == "ShopsGallery") {
	    $(nameId + '.slide .img').css({
	        'max-width': slideWidth,
            'max-height': baseHeight,
	    });
	    $(nameId + '.slide').css({
	        'text-align': 'center'
	    });
    } else {
        $(nameId + '.slide .img').css({
            'width': slideWidth,
            'height': baseHeight
        });
    }

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

    // Insert controls in the DOM
        $(nameId + '.slidebox .controls')
            .prepend('<div class="control" id="rightControl">></div>')
            .prepend('<div class="control" id="leftControl"><</div>');

    // 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;

            // Hide / show controls
            manageControls(currentPosition);
            // Move slideInner using margin-left
            $(nameId + '.slideInner').animate({
                'marginLeft': (slideWidth + correction) * (-currentPosition)
            });
        });
//        .css({
//            'height': baseHeightController,
//            'margin-top': marginTopController
//        });
//    $(nameId + '.control img').css({
//        'height': baseHeightController,
//        'width': 'auto'
//    });

    // manageControls: Hides and Shows controls depending on currentPosition
    function manageControls(position) {
        // Hide left arrow if position is first slide
        if (position == 0) { $(nameId + '#leftControl').hide() } else { $(nameId + '#leftControl').show() }
        // 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() } }

        $(nameId + '.position').html(position + 1);
        $(nameId + '.numberOfSlides').html(numberOfSlides);
    }

};