var ImagesController = new Controller('ImagesController', {
  // attrs
  backgroundImageUrl: null,
  backgroundImageRepeat : false,
  currentPage: 1,
  imagePickerShowing: false,
  newImageShowing: true,
  images : [],
  
  // actions
  goForward: function(el){
    this.attr('currentPage', this.currentPage + 1);
    this.loadImages();
  },
  goBackward: function(el){
     this.attr('currentPage', Math.max(1, this.currentPage - 1));
     this.loadImages();
  },
  showImagePicker: function(el){
    this.imagePicker.css({
      'left' : this.imageInput.offset().left,
      'top'  : this.imageInput.offset().top + 30
    });
    ColorsController.attr('colorPickerShowing', false);
    this.attr('imagePickerShowing', true);
  },
  hideImagePicker: function(el){
    this.attr('imagePickerShowing', false);
  },
  setCurrentImage: function(el){
    console.log(el)
    this.attr('backgroundImageUrl', el.attr('src'));
  },
  loadImages: function(){
    var controller = this;
    $.getJSON('http://www.colourlovers.com/api/patterns/top?format=json&numResults=12&jsonCallback=?', {
      resultOffset : this.currentPage * 12
    }, function(data){
      controller.attr('images',data)
    });
  },
  
  // value transformers
  Transforms : {
    imageGrid : function(data){
      var container = $('<div>');
      $.each(data, function(){
        $('<img>').attr({
         'src' : this.imageUrl
        }).css('cursor','pointer').actions({
          'click' : 'ImagesController.setCurrentImage'
        }).appendTo(container);
      });
      return container.contents();
    },
    imageRepeat : function(url){
      return { 'background' : 'url(' + url + ') repeat' };
    }
  }
});

var ColorsController = new Controller('ColorsController',{
  wells : [],
  colorsHaveChanged : false,
  colorPickerShowing : false,
  colorPickerLocation: {'left' : 0, 'top' : 0},
  
  // actions
  wellFocused : function(el){
    ImagesController.attr('imagePickerShowing', false);
    this.currentWell = el;
    this.attr('colorPickerLocation', {
      'left' : el.offset().left,
      'top'  : el.offset().top + 30
    });
    this.attr('colorPickerShowing', true);
    var controller = this // need access to this controller inside farbtastic callback.
    this.colorWheel.linkTo(function(color){
      controller.currentWell.val(color);
      controller.currentWell.css({
        backgroundColor: color,
        color: controller.colorWheel.hsl[2]  > 0.5 ? "#000": "#fff"
      });
      var dataSlotName = 'update_items_linked_to_' + controller.currentWell.attr('id')
      // ideal, but messy:
      // controller.attr(dataSlotName, color);
      // less ideal, but easy:
      controller[dataSlotName](color);      
    });
  },
  hideColorPicker : function(el){
    this.attr('colorPickerShowing', false);
  },
  update_items_linked_to_profile_text_color : function(color){
    $('#home').css('color',color);
    // links that need to look like text
    $("#home #me_name, #home .stats_count, #home li.active a, #home a.definition").css('color', color);
  },
  update_items_linked_to_profile_link_color  : function(color){
    $("#home a, #home a strong").css('color', color);
    // reset the :nots back to text color. LAME.
    $("#home #me_name, #home .stats_count, #home li.active a, #home a.definition").css('color', this.profile_text_color.val());
  },
  update_items_linked_to_profile_sidebar_fill_color  : function(color){
    $("#side_base").css("background-color", color);
    var highlight = function(dark){
      var colors = Color.aryFromHex(dark)
      var color  = '#'
      for (var i=0; i < colors.length; i++) {
        color = color + (Math.min(255, parseInt(colors[i], 16) + 24)).toString(16)
      };      
      return color;
    }(color);
    $('p.promotion, li.active a').css("background-color", highlight);
  },
  update_items_linked_to_profile_sidebar_border_color : function(color){
    $("#side_base").css("border-color", color);
    $(".stats td+td, #tabMenu li, #side div.section-header h3.faq-header").css("border-color", color);
  },
  update_items_linked_to_profile_background_color : function(color){
    $('#home').css('background-color', color);
  }
});

$(document).ready(function() {    
  // attatchment
  new AjaxUpload($('#add'), {
    action : '/images',
    name   : 'image[uploaded_data]',
    responseType: 'json',
    onComplete : function(file, response){
      ImagesController.attr('newImageShowing', false);
      ImagesController.attr('existingImageShowing', true);
      ImagesController.attr('backgroundImageUrl', response.image.public_filename);
    }
  });
  
  // page control view
  $('#home').outlet(ImagesController, 'canvas').connect('css', 'ImagesController.backgroundImageUrl', ImagesController.Transforms.imageRepeat);
  
  
  // colors control views
  $("#picker").outlet(ColorsController, 'colorPicker').connect('toggle', 'ColorsController.colorPickerShowing').connect('css','ColorsController.colorPickerLocation');
  $("#picker .close").actions({
    'click' : 'ColorsController.hideColorPicker'
  });
  
  ColorsController.colorWheel = $.farbtastic('#wheel');
  
  // color well views
  $('.color.well input').outlet(ColorsController, 'wells').each(function(){
    $(this).outlet(ColorsController, $(this).attr('id')).actions({
      'focus' : 'ColorsController.wellFocused'
    }).blur(function(){
      var val =  $(this).val();
      if(val.charAt(0) !== '#' ) { val = '#' + val;}
      $(this).val(val.toUpperCase());
    });
    
    // initializes wells with correct coloring and hide the color wheel afterwards    
    $(this).focus();
    ColorsController.colorWheel.setColor($(this).val());
    ColorsController.attr('colorPickerShowing', false);
  });
  
  // views on the page who need to update when color wells update
  
  // image preview control views
  $('#image-picker').outlet(ImagesController, 'imagePicker').connect('toggle', 'ImagesController.imagePickerShowing');
  $('#image-picker .close').actions({
    'click' : 'ImagesController.hideImagePicker'
  });
  
  $("#image-picker #new .remote").outlet(ImagesController, 'remoteImages').connect('html', 'ImagesController.images', ImagesController.Transforms.imageGrid);
  
  $('#profile_image').outlet(ImagesController, 'imageInput').blur(function(){
    $(this).val('');
  }).keyup(function(){
    $(this).val('');
  }).actions({
    'focus' : 'ImagesController.showImagePicker'
  }).connect('css', 'ImagesController.backgroundImageUrl', ImagesController.Transforms.imageRepeat);
  
  $('.navigation img.forward').outlet(ImagesController, 'forwardButton').actions({
    'click' : 'ImagesController.goForward'
  });
  
  $('.navigation img.back').outlet(ImagesController, 'backButton').actions({
    'click' : 'ImagesController.goBackward'
  });
  
  // render statues
  $('#timeline').hide();
  $.ajax({
    dataType: 'json',
    url: '/preview',
    
    success: function(data){
      // replace default data with actual timeline json
      if(data){
         window.timeline = data
       }
       // render from json
       $('#timeline').autoRender(window.timeline).show();

       // pretty dates
       var dates = $('.published').each(function(){
         $(this).html(new Date($(this).html()).time_ago_in_words());
       });

       // turn plain text urls into <a>
       $('.text.entry-content').each(function(){
         $(this).html($(this).html().replace(/(https?:\/\/[\w\d\.\/]+\b)/g, "<a href='$1'>$1</a>"));
         $(this).html($(this).html().replace(/@(\b[\w\d]+\b)/g, "<a href='http://www.twitter.com/$1'>@$1</a>"));
       })
    }
  });
  
  // remote images
  ImagesController.loadImages();
});