(function($){

  $.fn.daypart = function(options){

    var defaults = {
      'daypartid':1,
      'timeofdayid':0
    };
    var opts = $.extend(defaults, options);

    // text, url, photo

    return this.each(function(options){
      
      var element = $(this);
      var items = [];
      var page_index = 0;
      var div = $('<div>').addClass('items');
      var view = $('<div>').addClass('items-view');
      var item_index = 0;
      var item_width = 180;
      var item_count = 3;
      var animations = [];
      
      var data = {};
      data.cmd = 'GetDayPart';
      
      var cmd_json = {};
      cmd_json.daypartid = opts.daypartid;
      cmd_json.timeofdayid = opts.timeofdayid;
    	data.cmd_json = JSON.stringify(cmd_json);
  
      data.dtm = new Date();

      var service_url = 'default.ashx';

	    var url = service_url + '?cmd=' + data.cmd + '&cmd_json=' + data.cmd_json;
	    trace(url);
	    //window.location.href = url;
      //alert(url);

      $.getJSON(service_url, data, function(data){
        items = data.items;
        
       trace('items.length:'+items.length);
      for(var i=0;i<item_count;i++){
        if(items.length > i){
          item_index = i;
          var item = items[item_index];
          var a = $('<div>').data('item', item).data('title', item.caption).append($('<img>').attr('src', 'images/day-part/'+ item.folder + '/' +item.photo));
          a.bind('mouseenter', function(event){
           var table = $('<table>').addClass('hover').attr('border', 0).attr('cellpadding', 0). attr('cellspacing', 0).attr('width', '100%').attr('height', '100%').append($('<tr>').append($('<td>').css('height', '17px'))).append($('<tr>').append($('<td>').attr('height', '40px').css('padding-left', '12px').css('padding-right', '24px').html( $('<span>').html( $(this).data('title'))) )).append($('<tr>').append($('<td>').css('height', '7px')));
           $(this).append(table);
          }).bind('mouseleave', function(event){
            $(this).find('.hover').remove();
          }).bind('click', function(event){
             var item = $(this).data('item');
             document.location.href = item.url;
          });
          div.append($('<div>').addClass('item').attr('item_index', item_index).css('left', i*item_width).append(a)); 
        }
      }

        var left_arrow = $('<div>').addClass('left-arrow').html(' ').bind('click', function(event){
          
          for(var z=0;z<animations.length;z++) if(animations[z] == true) return;
          
         item_index = parseInt(element.find('.items .item:first').attr('item_index'));
        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];
          var a = $('<div>').data('item', item).data('title', item.caption).append($('<img>').attr('src', 'images/day-part/'+ item.folder + '/' + item.photo)); 
          a.bind('mouseenter', function(event){
             var table = $('<table>').addClass('hover').attr('border', 0).attr('cellpadding', 0). attr('cellspacing', 0).attr('width', '100%').attr('height', '100%').append($('<tr>').append($('<td>').css('height', '17px'))).append($('<tr>').append($('<td>').attr('height', '40px').css('padding-left', '12px').css('padding-right', '24px').html( $('<span>').html( $(this).data('title'))) )).append($('<tr>').append($('<td>').css('height', '7px')));
             $(this).append(table);
          }).bind('mouseleave', function(event){
            $(this).find('.hover').remove();
          }).bind('click', function(event){
            var item = $(this).data('item');
            document.location.href = item.url;
          });
          element.find('.items').prepend($('<div>').addClass('item').attr('item_index', item_index).css('left', -((i+1)*item_width)).html(a)); 
         }
        animations = [];
        $(this).parent().find('.item').each(function(i, o){
          animations[i] = true;
          $(this).animate({'left':'+='+(item_width*item_count)}, 'slow', function(){
            if(i >= item_count) $(this).remove(); 
            animations[i] = false;
          });
        });
      });

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

          for(var z=0;z<animations.length;z++) if(animations[z] == true) return;

          item_index = parseInt(element.find('.items .item:last').attr('item_index'));
        trace('item_index:'+item_index);
                     
           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];
            var a = $('<div>').data('item', item).data('title', item.caption).append($('<img>').attr('src', 'images/day-part/'+ item.folder + '/' +item.photo)); 
            a.bind('mouseenter', function(event){
             var table = $('<table>').addClass('hover').attr('border', 0).attr('cellpadding', 0). attr('cellspacing', 0).attr('width', '100%').attr('height', '100%').append($('<tr>').append($('<td>').css('height', '17px'))).append($('<tr>').append($('<td>').attr('height', '40px').css('padding-left', '12px').css('padding-right', '24px').html( $('<span>').html( $(this).data('title'))) )).append($('<tr>').append($('<td>').css('height', '7px')));
             $(this).append(table);
            }).bind('mouseleave', function(event){
              $(this).find('.hover').remove();
            }).bind('click', function(event){
              var item = $(this).data('item');
              document.location.href = item.url;
            });
            element.find('.items').append($('<div>').addClass('item').attr('item_index', item_index).css('left', (i*item_width)+(item_width * item_count)).html(a)); 
           }
          animations = [];
          $(this).parent().find('.item').each(function(i, o){
            animations[i] = true;
            $(this).animate({'left':'-='+(item_width*item_count)}, 'slow', function(){
            if(i < item_count) $(this).remove(); 
              animations[i] = false;
            });
          });
      });

      element.empty();
      element.append(view.append(div));
      if(items.length > 3){
        element.append(left_arrow);
        element.append(right_arrow);
      }      
      //div.scrollLeft(10);

        
      });

    });
    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);