(function($){

  $.fn.carousel = function(options){

    var defaults = {
      'items':[],
      'item_width':193,
      'item_count':4
    };
    var opts = $.extend(defaults, options);

    // text, url, photo

    return this.each(function(options){
      
      var element = $(this);
      var items = opts.items;
      var page_index = 0;
      var div = $('<div>').addClass('items');
      var view = $('<div>').addClass('items-view');
      var item_index = 0;
      var item_width = opts.item_width;
      var item_count = opts.item_count;
      var animated = false;
      
      //alert(item_width);
        
      trace('carousel.items.length:'+items.length);
      for(var i=0;i<item_count;i++){
        if(items.length > i){
          item_index = i;
          var item = items[item_index];
          item.photo = item.category_id + '.png';
          item.url = 'category.aspx?categoryid=' + item.category_id;
          item.caption = item.name;
          var a = $('<a>').attr('href', item.url).data('title', item.caption).append($('<img>').attr('src', 'images/carousel-view/'+item.photo));
          a.bind('mouseenter', function(event){
            //var div = $('<div>').addClass('hover').html($(this).data('title'));
            //$(this).append(div);
          }).bind('mouseleave', function(event){
            //$(this).find('.hover').remove();
          });
          div.append($('<div>').addClass('item').attr('item_index', item_index).css('width', item_width+'px').css('left', i*item_width).append(a)); 
        }
      }

        var left_arrow = $('<div>').addClass('left-arrow').html(' ').bind('click', function(event){
          if(animated) return;
          
          var arrow_element = $(this);
          //arrow_element.addClass('hover');
         item_index = parseInt(element.find('.items .item:first').attr('item_index'));

         var item_count_valid = 0;
         for(var i=0;i<item_count;i++){
          item_index = item_index - 1;
          var item;
          trace(item_index);
          
          if(item_index < 0){
           item = {'upc':'blank', 'name':''};
           //$(this).hide();
           break;
          }else if(item_index == 0){
            item= items[item_index];
            item_count_valid++;
           //$(this).hide();
          }else{
            item = items[item_index];
            item_count_valid++;
          }

//         trace('item_index:'+item_index);
//         for(var i=0;i<item_count;i++){
//          item_index = item_index - 1;
//          if(item_index < 0) item_index = items.length - 1;
//          var item = items[item_index];
          item.photo = item.category_id + '.png';
          item.url = 'category.aspx?categoryid=' + item.category_id;
          item.caption = item.name;
          var a = $('<a>').attr('href', item.url).data('title', item.caption).append($('<img>').attr('src', 'images/carousel-view/'+item.photo)); 
          a.bind('mouseenter', function(event){
            //var div = $('<div>').addClass('hover').html($(this).data('title'));
            //$(this).append(div);
          }).bind('mouseleave', function(event){
            //$(this).find('.hover').remove();
          });
          var left = -((i+1)*item_width);
          var delta_left = (item_count * item_width) - 672;
          left = left - delta_left;
          trace('left:'+left);
          
          element.find('.items').prepend($('<div>').addClass('item').attr('item_index', item_index).css('width', item_width+'px').css('left', left).html(a)); 
         }
          $(this).parent().find('.item').each(function(i, o){
            var w = item_width*item_count_valid;
            var wt = items.length * item_width;
            var wd = wt - 672;
            wd += 5;
            trace('dims:' + w + ':' + wt + ':' + wd);
            animated = true;
            $(this).animate({'left':'+='+ wd}, 'slow', function(){
              if(i >= item_count) $(this).remove(); 
              arrow_element.hide();
              arrow_element.parent().find('.right-arrow').show();
              animated = false;
            });
          });
      }).bind('mouseenter', function(event){
          $(this).addClass('hover');
       }).bind('mouseleave', function(event){
        $(this).removeClass('hover');
      });


      var right_arrow = $('<div>').addClass('right-arrow').html(' ').bind('click', function(event){
          if(animated) return;

          var arrow_element = $(this);
          //arrow_element.addClass('hover');
          item_index = parseInt(element.find('.items .item:last').attr('item_index'));
          trace('item_index:'+item_index);

           var item_count_valid = 0;
           for(var i=0;i<item_count;i++){
            item_index = item_index + 1;
            var item;
            
            if(item_index > items.length - 1){
             item = {'upc':'blank', 'name':''};
             //$(this).hide();
              break;
            }else{
              item = items[item_index];
              item_count_valid++;
            }

                     
         //  for(var i=0;i<item_count;i++){
         //   item_index = item_index + 1;
         //   if(item_index > items.length - 1) item_index = 0;
         //   var item = items[item_index];



            item.photo = item.category_id + '.png';
            item.url = 'category.aspx?categoryid=' + item.category_id;
            item.caption = item.name;
            var a = $('<a>').attr('href', item.url).data('title', item.caption).append($('<img>').attr('src', 'images/carousel-view/'+item.photo)); 

            a.bind('mouseenter', function(event){
              //var div = $('<div>').addClass('hover').html($(this).data('title'));
              //$(this).append(div);
            }).bind('mouseleave', function(event){
              //$(this).find('.hover').remove();
            });

            element.find('.items').append($('<div>').addClass('item').attr('item_index', item_index).css('width', item_width+'px').css('left', (i*item_width)+(item_width * item_count)).html(a)); 
           }
          $(this).parent().find('.item').each(function(i, o){
            var w = item_width*item_count_valid;
            var wt = items.length * item_width;
            var wd = wt - 672;
            wd += 5;
            trace('dims:' + w + ':' + wt + ':' + wd);
            animated = true;
            $(this).animate({'left':'-='+(wd)}, 'slow', function(){
              if(i < item_count_valid) $(this).remove(); 
              arrow_element.hide();
              arrow_element.parent().find('.left-arrow').show();
              animated = false;
            });
          });
      }).bind('mouseenter', function(event){
        $(this).addClass('hover');
      }).bind('mouseleave', function(event){
        $(this).removeClass('hover');
      });

      element.empty();
      element.append(view.append(div));
      if(true){
      //if(items.length > item_count){
        element.append(left_arrow);
        element.append(right_arrow);
        //left_arrow.trigger('click');
      }      
        

    });
    function xalert(o){
     var s = '';
      for(var p in o){
       s += p + ':' + o[p] + '\n';
      }
      alert(s);
    }
    function trace(s){
      if(window.console) window.console.log(s);
    }
    
    
  };


})(jQuery);