jQuery(document).ready(function() {

    jQuery('#mycarousel').jcarousel({
        vertical: true,
        scroll: 5
    });

    jQuery('#mycarousel1').jcarousel({
        scroll: 1,
        itemLoadCallback: mycarousel_itemLoadCallback,
        initCallback: mycaorusel_initCallback
    });

});

function getCarouselHTML(data) {   
    var row = '<div class="liSliderReference"><div class="divReferencaInfo"><p class="pURLReference"><a href="';
    row += data.WebUrl;
    row += '" title="';
    row += data.Name;
    row += '">';
    row += data.WebUrl;
    row += '</a></p><h2>';
    row += data.Name;
    row += '</h2><div class="divReferencaInfoOpis"><p>';
    row += data.Description;
    row += '</p></div></div><img src="';
    row += data.PictureUrl;
    row += '" width="887" height="275" alt="';
    row += data.Name;
    row += '"/></div>';

    return row;

}

function mycarousel_itemLoadCallback(carousel, state) {
    if (carousel.has(carousel.first, carousel.last)) {
        return;
    }
    
    var chunkSize = 5;

    $('#ReferencaLoad').addClass('prikaziLoader');

    var parameters = '{\'priority\': \'' + carousel.last + '\', \'chunkSize\': \'' + chunkSize + '\'}';
    setCarouselSize(carousel);
    getData(parameters, 'GetReferences', carousel);

    $('#ReferencaLoad').removeClass('prikaziLoader');
         
}

function getData(parameters, command, carousel) {
    var pagePath = '/hr/index.aspx/' + command;

      $.ajax({
          type: "POST",
          url: pagePath,
          data: parameters,
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function(msg) {
              itemAddCallback(msg.d, carousel);
          },
          error: function(response) {
              $('body', document).html(response.responseText);
          }

      });
}

function setCarouselSize(carousel) {
    var pagePath = '/hr/index.aspx/' + 'GetReferenceCount';

    $.ajax({
        type: "POST",
        url: pagePath,
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            carousel.size(parseInt(msg.d));
        },
        error: function(response) {
            $('body', document).html(response.responseText);
        }

    });
}

function itemAddCallback(msg, carousel) {
    var i = 0;

    for (var post in msg) {
        var row = getCarouselHTML(msg[post]);
        carousel.add(carousel.last + i, row);
        i++;
    }

    jQuery(".liSliderReference").hover(
        function() {
            jQuery('div.divReferencaInfoOpis:first', this).show("normal");
        },
        function() {
            jQuery('div.divReferencaInfoOpis:first', this).slideUp("fast");
        }
     );
}

function mycaorusel_initCallback(carousel) {
    $('#ulKategorijeWeb a').bind('click', function() {
        carousel.scroll(1);
        $('#ulKategorijeWeb a').addClass('aSelektiran');
        $('#ulKategorijeGrafika a').removeClass('aSelektiran');
    });

    $('#ulKategorijeGrafika a').bind('click', function() {
        carousel.scroll(31);
        $('#ulKategorijeGrafika a').addClass('aSelektiran');
        $('#ulKategorijeWeb a').removeClass('aSelektiran');
    });

}