(function(){

    jQuery.fn.extend({
      HCarousel: function(options) {
        var defaults = {
            nextSel : '.next_button',
            prevSel : '.previous_button',
            listContainer : '.container',
            list : '.container ul',
            spinner : '.container .spinner',
            filterSel : '',
            ajaxUrl : '',
            keyword_path:'',
            elSize : 75
        };

        var options = jQuery.extend(defaults, options);

        return this.each(function() {
            var container = jQuery(this),
                items = null,
                nextButton = jQuery(options.nextSel, container),
                prevButton = jQuery(options.prevSel, container),
                listContainer = jQuery(options.listContainer, container),
                listUL = jQuery(options.list, container),
                spinner = jQuery(options.spinner, container),
                maxLeft = 0,
                filterInp = null;
            if(options.filterSel!='' && options.filterSel!=null && jQuery(options.filterSel).length>0)
                filterInp = jQuery(options.filterSel);
            
            load();


            function getItemTotalWidth(it){
                var wid = 0;
                wid += it.width();
                wid += parseInt(it.css("padding-left"), 10) + parseInt(it.css("padding-right"), 10);
                wid += parseInt(it.css("margin-left"), 10) + parseInt(it.css("margin-right"), 10);
                wid += parseInt(it.css("borderLeftWidth"), 10) + parseInt(it.css("borderRightWidth"), 10);
                return wid;
            }

            function updateButtons(){
                if(listUL.position().left <= maxLeft)
                    nextButton.removeClass("disabled").addClass("disabled");
                else nextButton.removeClass("disabled");
                if(listUL.position().left == 0)
                    prevButton.removeClass("disabled").addClass("disabled");
                else prevButton.removeClass("disabled");
            }

            function load(aju) {
                spinner.show();
                listUL.html('');
                if(aju=="" || aju==undefined || aju==null) aju = options.ajaxUrl;
                jQuery.getJSON(aju, {elementSize:options.elSize, from:0, to:1000}, function(data){
                    spinner.hide();
                    listUL.html(data.html);
                    init();
                });
            }

            function init() {
                
                // adjust list width
                var totWid = 0;
                items = jQuery('li', listUL);
                items.each(function(idx, el){
                    var w = getItemTotalWidth(jQuery(el));
                    w = (w == 0)? defaults.elSize : w;
                    totWid += w;                                        
                });
                listUL.css({width:totWid+"px", left:'0px'});

                // get max left position
                maxLeft = 0;
                if(listUL.width() > listContainer.width())
                    maxLeft = -(listUL.width() - listContainer.width());

                nextButton.unbind('click').click(function(){
                    if(jQuery(this).hasClass("disabled")) return;
                    jQuery(this).addClass("disabled");
                    var curPos = listUL.position().left;
                    curPos -= listContainer.width();
                    curPos = Math.max(maxLeft, curPos);
                    listUL.animate({left:curPos+"px"}, 1000, "easeOutCubic", function(){
                        updateButtons();
                    });
                });

                prevButton.unbind('click').click(function(){
                    if(jQuery(this).hasClass("disabled")) return;
                    jQuery(this).addClass("disabled");
                    var curPos = listUL.position().left;
                    curPos += listContainer.width();
                    curPos = Math.min(0, curPos);
                    listUL.animate({left:curPos+"px"}, 1000, "easeOutCubic", function(){
                        updateButtons();
                    });
                });

                if(filterInp!=null){
                    filterInp.unbind("keyup").keyup(function(e){
                        if(e.keyCode==13){
                          var q = jQuery(this).val().replace(/(^\s+)|(\s+$)/g, "");
                          q = jQuery.trim(q);

                          var kw_path = '/keyword/'+q;
                          load(options.ajaxUrl+kw_path);

                        }

                    });

                }
                
                updateButtons();

            }
        });

    }

  });
})(jQuery);