//starts the slideshow and nav controls for a given list item
function startCycle(slide, next, prev) {

    var slideShow = $('#' + slide);
    var prevId = '#' + prev;
    var nextId = '#' + next;
    var controlParent = $(prevId).parent();
    var navParent = $(prevId).parent().parent();

    //start cycle plugin
    slideShow.cycle({
        fx: 'fade',
        speed: 'fast',
        timeout: 0,
        next: nextId,
        prev: prevId
    });


    //hover controls show/hide
    slideShow.parent().hover(
      function () {
          controlParent.css('visibility', 'visible');
          navParent.children('.launch-site').css('visibility', 'visible');
      },
      function () {
          controlParent.css('visibility', 'hidden');
          navParent.children('.launch-site').css('visibility', 'hidden');
      }
    );
}




$(document).ready(function () {

    //handle paging of portfolio items if javascript enabled (fancy facebook style)

    var pager = $('#pager');
    var pagerLinks = $('ul li a', pager);
    var totalPages = pagerLinks.size();
    if (totalPages > 1) {

        //initialize the load next link
        var nextPage = 2;
        pager.addClass('ajax');
        pager.append('<a id="pager-next" href="next-items">Get More Portfolio Items</a>')
        pager.append('<img style="display:none" class="loader" id="next-loader" src="/content/images/ajax-loader.gif" alt="loading..."/>');
        var pagerButton = pager.children('#pager-next');
        var pagerLoader = pager.children('#next-loader');

        //set request to partial only to get just the pagelet
        pagerLinks.each(function () {
            $(this).attr('href', $(this).attr('href') + '&partial=true');
        });

        pagerButton.click(function (event) {

            event.preventDefault();

            //get the next paging list url in the hidden list
            var nextUrl = $(pagerLinks[nextPage - 1]).attr('href');

            //update loading ui
            pagerButton.hide();
            pagerLoader.show();

            //make ajax call to get next items
            $.get(nextUrl, function (data) {

                //parse the dom of the returned data to extract the list
                var listContainer = $($(data), 'ul.portfolio-list');
                $('li', listContainer).addClass('added');
                var lastItemBeforeAdd = $('ul.portfolio-list li:last');

                //append the list items to the main list and start the slideshow for each item
                var added = $('ul.portfolio-list').append(listContainer.children('li'));
                $(added).children('.added').each(function () {

                    var lastItemSlide = $('.screens-wrapper', $(this));
                    var lastItemNav = $('.screens-nav', $(this));
                    startCycle($('.image-wrapper', lastItemSlide).attr('id'), $('.next', lastItemNav).attr('id'), $('.previous', lastItemNav).attr('id'));
                    $(this).removeClass('added');

                });

                //restore the UI and scroll
                pagerLoader.hide();
                pagerButton.show();

                $('html,body').animate({ scrollTop: lastItemBeforeAdd.offset().top }, 500);



                //increment page
                nextPage++;

                //hide if no more pages
                if (nextPage > totalPages) pager.remove();

            });
        });
    }
});