$(document).ready(function(){

    // do something when you click a slider control button
    $('.slider-control').click(function(){

        // get the active clicked slider control button
        var active_button = $(this);


        // figure out the number of the selected image and the image itself
        var nr = active_button.attr('data-nr');
        var image = $('.slider img').eq(nr);


        // hide all images and show the selected image
        $('.slider img').hide();
        image.fadeIn();


        // activate the selected button: remove the active class from all the buttons and put it on the selected button
        $('.slider-control').removeClass('active');
        active_button.addClass('active');
    });





    // do something when you click a sort-by button
    $('.sort a').click(function(){

        // get the active clicked sort-by button
        var active_button = $(this);


        // get the ajax url
        var ajax_url = active_button.attr('data-url');


        // activate the sort-by button: remove the active class from all the buttons and put it on the selected button
        $('.sort a').removeClass('active');
        active_button.addClass('active');


        // show the ajax loader and hide the ajax container box
        $('#ajax-container-loader').show();
        $('#ajax-container-box').hide();


        // load the ajax url page into the ajax container box
        $('#ajax-container-box').load(ajax_url, function(){
            setTimeout(function(){
                $('#ajax-container-loader').hide();
                $('#ajax-container-box').show();
            }, 500);       // 1000 mili sec = 1 sec
        });
    });


    // auto load the webdesign page
    $('.sort a:first').trigger('click');




    // hide labels in contact form
    $('.contact input, .contact textarea').focus(function(){
        $(this).val('');
    });
});