$(document).ready(function() {    
    var thumbWidth = 680;
    var thumb;
    var numberOfThumbs;
    var controls;    
    
    $('div.thumbnails-collection').each(function(i) {
        var currentCollection = $(this);
        // Remove scrollbar in JS
        currentCollection.css('overflow', 'hidden');
        
        currentCollection.children('div.thumb')
        .wrapAll('<div class="thumbInner"></div>')
        // Float left to display horizontally, readjust .slides width
	    .css({
	        'float': 'left',
	        'width': thumbWidth
	    });
	    
	    numberOfThumbs = currentCollection.find('div.thumb').length;	    	    
	    
        // Set #slideInner width equal to total width of all slides
        currentCollection.children('div.thumbInner').css('width', thumbWidth * numberOfThumbs);
        
        // Insert controls in the DOM
        currentCollection.parent()
        .prepend('<span class="tabControl leftControl png" id="leftControl">Clicking moves left</span>')
        .append('<span class="tabControl rightControl png" id="rightControl">Clicking moves right</span>');        
        
        /*if (numberOfThumbs == 1)
        {
            currentCollection.parent().children('span.tabControl').addClass('inactive');
        }*/
        
        currentCollection.parent().children('span.tabControl').each(function(i) {
            bindClickAction($(this));
        });
        
        manageControls(currentCollection.parent(), 0);
    });
    
    // Create event listeners for .controls clicks
    function bindClickAction(jQueryControl) {
        jQueryControl.bind('click', function() {
            // Determine new position
            var currentPosition = parseInt($(this).parent().children('div.thumbnails-collection').children('input').val());

            currentPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
            $(this).parent().children('div.thumbnails-collection').children('input').val(currentPosition);
            
            // Hide / show controls
            manageControls($(this).parent(), currentPosition);
            
            // Move slideInner using margin-left
            $(this).parent().children('div.thumbnails-collection').children('div.thumbInner').animate({
                'marginLeft': thumbWidth * (-currentPosition)
            }, 1000);
        });
    }    
    
    // Hide left arrow control on first load
    //manageControls(currentPosition, true);

    // manageControls: Hides and Shows controls depending on currentPosition
    function manageControls(group, position) {
        // Hide left arrow if position is first slide
        if (position == 0) {
            //Inactivate
            //$('#leftControl').hide()
            var lc1 = group.children('span.leftControl');
            lc1.addClass("inactive");
            lc1.unbind("click");
        }
        else {
            // Activate
            //$('#leftControl').show(); 
            var lc2 = group.children('span.leftControl');
            lc2.removeClass("inactive");
            lc2.unbind("click");
            bindClickAction(lc2);
        }
        // Hide right arrow if position is last slide
        if (position == (group.children('div.thumbnails-collection').children('div.thumbInner').children('div.thumb').length - 1)) {
            //Inactivate
            var rc1 = group.children('span.rightControl');
            rc1.addClass("inactive");
            rc1.unbind("click");
        }
        else {
            //Activate
            var rc2 = group.children('span.rightControl');
            rc2.removeClass("inactive");
            rc2.unbind("click");
            bindClickAction(rc2);
        }
    }    
});