/*jslint browser: true, devel: true*/
/*global $, jQuery*/

// Images Array
var images = ['images/img1.jpg', 'images/img2.jpg', 'images/img3.jpg', 'images/img4.jpg', 'images/img5.jpg', 'images/img6.jpg', 'images/img7.jpg', 'images/img8.jpg'];
var lastSelected = false;


function closeImage(image) {
    'use strict';
    image.animate({
        opacity: 0,
        width: 0,
        height: 0
    }, 1000, function () {
        $(this).remove();
    });

}

function showImage(image) {
    'use strict';
    image.animate({
        'max-width': '400px',
        'max-height': '400px',
        'margin-top': '0px',
        opacity: 1
    }, 1000);
}

function onThumbClick() {
    'use strict';

    // Get Instance of selected image
    var image = $(this).find('img');
    // Clone this instance amd add the thumbClone class to it
    var clone = image.clone().addClass('thumbClone');

    // Instance the image holder and add the thumb clone to it
    var imageHolder = $('#imageHolder');
    var currentImage = imageHolder.find('img');
    if (image.attr('id') != currentImage.attr('id')) {
        imageHolder.append(clone);
        showImage(clone);
        if (lastSelected != false)
            closeImage(lastSelected);
        lastSelected = clone;
    }
    $('.thumbnail').removeClass('selected');
    $(this).addClass('selected');
}

$(document).ready(function () {
    'use strict';

    // Show thumbnails to the screen
    images.forEach(function (singleImage) {
        // Inner scope vars
        var thumbnail = $('<div>'),
            image = $('<img>');

        // Set the image src
        image.attr('src', singleImage).attr('id', "img" + images.indexOf(singleImage));

        // Build the thumbnail using the chaning function of a jquery object
        thumbnail.addClass('thumbnail').append(image).appendTo('#thumbnails').css('opacity', 0.0).fadeTo(2000 + images.indexOf(singleImage) * 500, 0.5, function () {
            $(this).click(onThumbClick);
            $(this).css('cursor', 'pointer');
        });

    });

    // Fade in the message text
    $('#message').fadeTo(2000 + images.length * 500, 1.0);

});