/**
 * Project loader plugin
 *
 * @author Fortunato Geelhoed <fortunato@crudigital.com.au>
 */
(function($) {
    $.fn.loadprojects = function(options) {

        /**
         * Widget container element
         */
        var element = $(this);

        /**
         * Keeps track of rows that are already loaded
         */
        var loadIndex = 0;

        /**
         * Array that functions as register of rows that have been loaded
         */
        var loaded = new Array();
        
        /**
         * Plugin defaults
         */
        var defaults = {
            rowHeight: 253,
            columns: 3,
            debug: false,
            offsetTop: 101,
            data: {},
            rows: $('div.project-frame', element),
            projects: $('ul.img-list li', element)
        };
        options = $.extend(defaults, options);

        var initialize = function() {
            if ($.meta) { // support MetaData plugin
                options = $.extend({}, options, this.data());
            }
            options.rows.each(function(idx) {
                loaded[idx] = false;
            });
            /**
             * Load 2/3 rows by default depending on window height
             */
            loadRow2(0);
            loadRow2(1);
            loadIndex = 1;
            if ($(window).height() > 706) {
                loadRow2(2);
                loadIndex = 2;
            }
            $(window).scroll(function () {
              if ((loadIndex+1) < options.rows.length) {
                    // detect position of last row that was loaded (bottom)
                    offsetTop = $(options.rows[0]).position().top + ( (loadIndex+1) * options.rowHeight ) + 10;
                    if (offsetTop <= ($(window).scrollTop() + $(window).height()) ) {
                        // check if another row is available which is not yet loaded
                        loadRow2(loadIndex+1);
                        //loadRow(loadIndex+1);
                    }
                }
            });
        }
        var loadRow2 = function(idx) {
            $(options.rows[idx]).slideDown('slow', function() {
                var imgs = [];
                $('ul.img-list li', this).each(function(idx2) {
                    projectIdx = (idx*3)+idx2;
                    //imgs = options.data[idx].image;
                    $(this).append('<div class="preloader"></div>');
                    $('div.preloader', $(this)).fadeIn('700');
                    
                    imgs.push(options.data[projectIdx].image);
                });
                var project = this;
                $.imgpreload(imgs, {
                    //base:'images/colors/',
                    //ext:'.jpg'
                    all: function() {
                        row = $('ul.img-list', project);
                        row.css({'display': 'none'});
                        $('ul.img-list li', project).each(function(idx2) {
                            projectIdx = (idx*3)+idx2;
                            $(this).html('<a href="'+options.data[projectIdx].url+'" class="img-holder"><img src="'+options.data[projectIdx].image+'" alt="" width="325" height="159" /><span class="shadow">&nbsp;</span><span class="arrow">&nbsp;</span></a><strong class="project-title"><a href="'+options.data[projectIdx].url+'">'+options.data[projectIdx].title+'</a></strong><em class="location">'+options.data[projectIdx].location+'</em>');
                            $('div.preloader', $(this)).remove();
                        });
                        row.delay(500).fadeIn(800);

                        $('a.img-holder', row).mouseenter(function() {
                            $('span.shadow', this).css({'opacity': 0.4});
                            $('span.shadow', this).fadeIn();
                            $('span.arrow', this).fadeIn();
                            $(this).mouseleave(function() {
                                $('span.arrow', this).fadeOut();
                                $('span.shadow', this).fadeOut();
                            });
                        });
                    }
                });
            });
            loadIndex++;
            loaded[idx] = true;
        }

        /* var loadRow = function(idx) {
            $(options.rows[idx]).slideDown('slow', function() {
                $('ul.img-list li', this).each(function(idx2) {
                    loadProject(this, (idx*3)+idx2);
                });
            });
            loadIndex++;
            loaded[idx] = true;
        } */
        
        var loadProject = function(node, idx)
        {
            // we start with a preloading animation
            $(node).append('<div class="preloader"></div>');
            $('div.preloader', node).fadeIn('700');
            $('<img />')
                .attr('src', options.data[idx].image)
                .load(function() {
                    $(node).append('<a href="'+options.data[idx].url+'" class="img-holder"><img src="'+options.data[idx].image+'" alt="" width="325" height="159" /><span class="shadow">&nbsp;</span><span class="arrow">&nbsp;</span></a><strong class="project-title"><a href="'+options.data[idx].url+'">'+options.data[idx].title+'</a></strong><em class="location">'+options.data[idx].location+'</em>');
                    $('div.preloader', node).remove();
            });
        }

        initialize();

        return this;
    }
})(jQuery);