/**
 * @author nikola
 */
(function($){
    $.fn.multiBox = function(options){
        var buttons = $(this).find('.tabs a');
        $($(this).find('.tabs a')).click(function(){
            $(buttons).blur().removeClass('active');
            $(this).addClass('active');
            $.fn.getTheData(this, $(this).parents('.content'));
        });
    };

    $.fn.getTheData = function(obj,holder){
        // $(holder).css('background', 'red')
        var data = $(obj).metadata();
        $(holder).find('.multiBox').hide();
        $(holder).find('p.loading').show();
        $(holder).find('.mb' + data.html).remove();
        $.fn.multiBox.createHtml.listHolder(data.html, holder);
        $.getJSON(data.servlet,data.params , function(json){
            
            $(holder).find('p.loading').hide();
            paginate(data.html, json.itemList, 5, holder);
            $('#multiBox .listHolder').jcarousel({
                scroll : 2,
                visible: 2
            });
        });
        holder.find('.mb'+data.html).show();

    };

    function paginate(klik, data, howMany, holder){
        var psize = howMany;
        var size = $(data).size();
        for (var i = 0; i < size; i = i + psize) {
            var endVal;
            if (i + psize < size) {
                endVal = i + psize;
            }
            else
                endVal = size;
            holder.find('div.mb' + klik + ' ul.listHolder').createAppend('li', {}, ['ul', {
                className: 'holder' + klik + i + ' fix'
            }, '']);
            for (var j = i; j < endVal; j++) {
                $.fn.multiBox.createHtml[klik].call(this, data[j], klik, i, holder);
            }
        }
    };

    $.fn.multiBox.createHtml = {
        listHolder: function(klik, holder){
            $(holder).createAppend('div', {
                className: 'multiBox mb'+klik
            }, ['ul', {
                className: 'listHolder jcarousel-skin-multibox'
            }, '']);
        },
        members: function (obj, klik, id, holder){
            holder.find('.holder' + klik + id).createAppend(
                'li',{
                    className: 'fix'
                }, [
                'div', {
                    className: 'itemPicture'
                }, ['a', {
                    href: obj.hrefValue
                }, ['img', {
                    className: 'slideAvatar',
                    alt: obj.name,
                    src: obj.imgValue
                }, '']],'div',{
                    className: 'itemHolder'
                },['h3',{},['a',{
                    href: obj.hrefValue
                },obj.name]]]);
        },
        photo: function (obj, klik, id, holder){
            holder.find('.holder' + klik + id).createAppend('li', {
                className: 'fix'
            }, ['div',{
                className: 'itemPicture'
            },['a',{
                href: obj.hrefValue,
                className: 'itemPic'
            },['img',{
                src: obj.imgValue,
                alt: obj.caption
            },'']],'div',{
                className: 'itemHolder'
            },['span',{
                className: 'date'
            },obj.date,'h3',{},['a', {
                href: obj.userHrefValue
            },obj.userFullName],'p',{
                className: ''
            },obj.caption]]);
        },
        video: function (obj, klik, id, holder){
            holder.find('.holder' + klik + id).createAppend('li', {
                className: 'fix'
            }, ['div',{
                className: 'itemPicture'
            },['a',{ 
                href: obj.hrefValue,

                className: 'itemPic'
            },['img',{
                src: obj.imgValue
            },'']],'div',{
                className: 'itemHolder'
            },['span',{
                className: 'date'
            },obj.date,'h3',{},['a', {
                href: obj.userHrefValue
            },obj.userFullName],'p',{
                className: ''
            },obj.caption]]);
        },
        comments: function (obj, klik, id, holder){
            holder.find('.holder' + klik + id).createAppend(
                'li',{
                    className: 'fix'
                },['div', {
                    className: 'itemPicture'
                },[
                'a', {
                    href: obj.hrefValue
                }, [
                'img', {
                    src: obj.imgValue
                },''
                ]
                ],'div',{
                    className: 'itemHolder'
                },[
                'span', {
                    className: 'date'
                }, obj.date + ' ' + obj.time,
                'h3', {}, [
                'a', {
                    href: obj.hrefValue
                }, obj.subject
                ]
                ]]
                );
        }
        ,
        forum: function (obj, klik, id, holder){
            holder.find('.holder' + klik + id).createAppend(
                'li',{
                    className: 'fix'
                },['div', {
                    className: 'itemPicture'
                },[
                'a', {
                    href: obj.hrefValue
                }, [
                'img', {
                    src: obj.imgValue
                },''
                ]
                ],'div',{
                    className: 'itemHolder'
                },[
                'span', {
                    className: 'date'
                }, obj.date + ' ' + obj.time,
                'h3', {}, [
                'a', {
                    href: obj.postHrefValue
                }, obj.subject
                ]
                ]]
                );
        },
        blog: function (obj, klik, id, holder){
            holder.find('.holder' + klik + id).createAppend(
                'li',{
                    className: 'fix'
                },['div', {
                    className: 'itemPicture'
                },[
                'a', {
                    href: obj.hrefValue
                }, [
                'img', {
                    src: obj.imgValue
                },''
                ]
                ],'div',{
                    className: 'itemHolder'
                },[
                'span', {
                    className: 'date'
                }, obj.releaseDate,
                'h3', {}, [
                'a', {
                    href: obj.hrefPost
                }, obj.subject
                ]
                ]]
                );
        }
    };

    
})(jQuery);