$( "#date" ).datepicker();




/*

    Live validation

*/
addLiveValidation();
function addLiveValidation()
{
    if($('form').size() > 0)
    {
        var wait = 200;

        // Textfield
        var validateName = new LiveValidation( "name", { validMessage: " ", wait: wait } );
        validateName.add( Validate.Presence, { failureMessage: " " } ); // not empty ?

        // Age
        var validateAge = new LiveValidation( 'age', { validMessage: ' ', wait: wait } );
        validateAge.add( Validate.Numericality, { notANumberMessage: ' ' } );
        validateAge.add( Validate.Numericality, { minimum: 18, tooLowMessage: ' ' } );

        // Price
        var validatePrice = new LiveValidation( 'price', { validMessage: ' ', wait: wait } );
        validatePrice.add( Validate.Presence, { failureMessage: " " } ); // not empty ?
        validatePrice.add( Validate.Format, { pattern: /^\d+([.,]\d{2}|)$/ , failureMessage: ' ' } );

        // E-mail
        var validateEmail = new LiveValidation('email', { validMessage: " ", wait: wait } );
        validateEmail.add( Validate.Presence, { failureMessage: " " } ); // not empty ?
        validateEmail.add( Validate.Email, { failureMessage: " " } );

        // Date
        var validateDate = new LiveValidation('date', { validMessage: " ", wait: wait } );
        validateDate.add( Validate.Presence, { failureMessage: " " } ); // not empty ?
        validateDate.add( Validate.Format, { pattern: /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/ , failureMessage: ' ' } );

        // Work around for DatePicker with LiveValidation
        var $date = $('#date');

        // Only handle when clicked on the field
        var clickedDate = false;
        $date.click(function(){ clickedDate=true; });

        // On change
        $date.change(function()
        {
            if(clickedDate)
            {
                // Reset value after DatePicker dialog closes.
                clickedDate = false;
                $date.focus();
                var val = $date.val();
                $date.val(val);
                $date.blur();
            }
        });

        // Select
        var validatSelect = new LiveValidation( "select", { validMessage: " ", wait: wait } );
        validatSelect.add( Validate.Exclusion, { within: [ 'empty' ], partialMatch: true, failureMessage: ' ' } );
    }
}



/*
    ^\d : begin with digit
    \d+ : at least one digit
    ^\d+$ : begin with digit, at least on digit and end with digit


*/


/*

    Infinite list

*/

var $list = $("#list ul");
var pageCount = 0;
var num = 15;

// Load list first time
var numStart = Math.ceil($(window).height()/60);
getItemList(pageCount,numStart);

// Set on scroll
$holder = $('#list');
$itemList = $('#list ul');
$holder.scroll(function()
{
    // When user in at the bottom of the page
    if($holder.scrollTop() + $holder.height() == $itemList.height()) {

        // Load list
        getItemList( (pageCount*num) , num);
    }
});


// Retrieve List
function getItemList(start,num)
{
    // Make AJAX call
    $.ajax({
        url: "/poc/nl/dashboard/xhrGetList",
        type: "post",
        data: { start: start, num: num },
        xhrFields: {
            onprogress: function (e) {
                if (e.lengthComputable) {
                   // console.log(e.loaded / e.total * 100 + '%');
                }
            }
        },
        success: function(data){
            $list.append(data);


            // Custom scrollbar
            initScrollPane($('#list'));
        },
        error:function(){
            $list.append('Error Occurred while fetching data.');
        }
    });
    // Increment pageCount by one
    pageCount++;
}


/*

    Images upload

*/

// Drag and drop images
if (Modernizr.draganddrop)
{
    // Prevent default on document
    var doc = document.documentElement;
    doc.ondragover = function () { return false; };
    doc.ondrop = function () { return false; };

    // Prevent Default
    var dropzone = document.getElementById('drop_zone');
    if(dropzone)
    {
        dropzone.ondragover = function () { this.className = 'hover'; return false; };
        dropzone.ondragleave = function () { this.className = ''; return false; };
        dropzone.ondragend = function () { this.className = ''; return false; };
        dropzone.ondrop = function (event)
        {
            event.preventDefault && event.preventDefault();
            this.className = '';

            // now do something with:
            var files = event.dataTransfer.files;
            upload(files);

            return false;
        };
    }
}
else
{
    console.log('drag&drop not supported! :(');
}

// Activate the file pop-up by clicking on the button
$('#upload_images').click(function()
{
    document.getElementById('image_files').click();
});

// When file chosen,
$('body').on("change", "#image_files", function()
{
    var files = this.files;
    upload(files);
});

// Upload files
function upload(files)
{
    // Put files in a FormData object
    var formData = new FormData();
    for (var i = 0; i < files.length; i++)
    {
        formData.append('file'+i, files[i]);
    }

    // Post a new XHR request
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/poc/nl/upload');
    xhr.onload = function ()
    {
        if (xhr.status === 200 && xhr.readyState == 4)
        {
            console.log('all done: ' + xhr.status);
            $('#progress').css({ width: '100%' });
            setTimeout(function(){ $('#progress').css({ width: '0' }); },500 );
        }
        else
        {
            console.log('Something went terribly wrong...');
        }
    };

    // Keep track of the progress
    xhr.upload.onprogress = function (event)
    {
        if (event.lengthComputable)
        {
            var complete = (event.loaded / event.total * 100 | 0);
            $('#progress').css({ width: complete+'%' });
        }
    };

    // Send FormData
    xhr.send(formData);
}


initScrollPane($('#content'));


function initScrollPane($obj)
{
    $obj.jScrollPane({
        horizontalGutter:5,
        verticalGutter:5,
        'showArrows': false
    });
    $('.jspDrag',$obj).hide();
    $obj.hover(
        function()
        {
            $('.jspDrag',this).stop(true, true).fadeIn('slow');
        },
        function()
        {
            $('.jspDrag',this).stop(true, true).fadeOut('slow');
        }
    );

    var api = $obj.data('jsp');
    api.reinitialise();

    var throttleTimeout;
    $(window).bind(
        'resize',
        function()
        {
            // IE fires multiple resize events while you are dragging the browser window which
            // causes it to crash if you try to update the scrollpane on every one. So we need
            // to throttle it to fire a maximum of once every 50 milliseconds...
            if (!throttleTimeout) {
                throttleTimeout = setTimeout(
                    function()
                    {
                        api.reinitialise();
                        throttleTimeout = null;
                    },
                    20
                );
            }
        }
    );
}