$.fn.spin = function(append) {
  if (append)
    $(this).append('<img src="/images/spinner.gif"/>')
  else
    $(this).after('<img src="/images/spinner.gif"/>')
}

var Portfolio = {
  subnav : [],
  subnavLinks : [],
  viewer : null,
  arrows : [],
  portfolio : null,
  current_position : null,
    
  setup : function() {
    this.subnav = $('.portfolio.subnav')
    this.subnavLinks = $(this.subnav).find('li a')
    this.viewer = $('#portfolio_viewer')
    this.setupBehavior()
  },
  
  setupBehavior : function() {
    this.portfolio = $('#portfolio_container #portfolio')
    this.current_position = parseFloat(this.portfolio.css('left'))
    this.arrows = $('#arrow_left a, #arrow_right a')
    
    this.setupThumbs()
    this.setupSubnavLinks()
    this.setupArrows()
  },
    
  setupSubnavLinks : function() {
    this.subnavLinks.click(function(e) {
      e.preventDefault()
      Portfolio.viewer.fadeOut('slow')
      var link = $(this)
      
      $.get(link.attr('href') + '.js', function(data) {
        Portfolio.subnavLinks.removeClass('selected')
        link.addClass('selected')
        Portfolio.viewer.html(data)
        Portfolio.viewer.fadeIn('slow')
        Portfolio.setupBehavior()
      })
    })
  },
  
  setupThumbs : function() {
    this.setupThumbActions()
    $('#thumbs_container').hover(function() {
  	  $(this).children('*').fadeIn(300)
  	}, function() {
  	  $(this).children('*').fadeOut(300)
  	});
  },
  
  setupThumbActions : function() {
    $('#thumbs_container a').click(function(event) {
      event.preventDefault()
      Portfolio.moveTo(parseFloat(this.className.split('pos=')[1].split(' ')[0]))
    })
  },
  
  setupArrows : function() {
    this.arrows.click(function(event) {
      event.preventDefault()
      var move_to = (this.id == 'next_img') ? ((Portfolio.current_position - 20) - 700) : ((Portfolio.current_position + 20) + 700)
      Portfolio.moveTo(move_to)
    })
  },
  
  resetArrows : function(left) {
    if (left == 0) {
      $(Portfolio.arrows[0]).hide()
      $(Portfolio.arrows[1]).show()
    } else if ((Math.abs(left) + 720) == parseFloat(Portfolio.portfolio.css('width'))) {
      $(Portfolio.arrows[0]).show()
      $(Portfolio.arrows[1]).hide()
    } else {
      $(Portfolio.arrows).show()
    }
  },
  
  moveTo : function(pixels) {
    this.resetArrows(pixels)
    this.current_position = pixels
    this.portfolio.animate({ left: pixels })
  }
}

var Site = {
  admin: function() {
    return $('body').hasClass('site_admin')
  },
  
  fadeNotifications: function() {
    setTimeout(function() {
      $('div.notification').animate({
        opacity: 0,
        marginTop: '-20px'
      }, 2000)
    }, 800)
  },
  
  resetSections: function() {
  	  $('.subwrapper')
  	    .children('h2')
  	      .removeClass('selected')
  	    .end()
  	    .children('.content')
  	      .slideUp('slow')
  },

  center: function() {
  	var windowHeight = $(window).height()
  	var top = ((windowHeight - 600) / 2)
  	top = (top <= 20) ? (20) : (top)

  	$('#outer_wrapper').css({
  		position: 'relative',
  		margin: '0 auto',
  		top: top
  	})
  }
}

var Flowers = {
  elems: [],
  
  setup: function() {
    this.elems = $('.flowers')
    this.elems.css('opacity', 0)
    this.fadeIn()
  },
  
  fadeIn: function() {
    this.elems.fadeTo(1200, 1)
  },
  
  fadeOut: function() {
    this.elems.fadeTo(1200, .4)
  }
}

var Navigation = {
  links: [],
  header: null,
  
  setup: function() {
    this.links = $('.subwrapper h2 a')
    this.header = $('h1.header a')
    this.setupLinks()
    this.setupHeader()
  },
    
  setupLinks: function() {
    this.links.click(function(event) {
      event.preventDefault()
  		Site.resetSections()
  		Flowers.fadeOut()
  		$(this).parent().addClass('selected').end()
  		.parents('.subwrapper').children('.content').slideDown('slow')
    })
  },
  setupHeader: function() {
    this.header.click(function(event) {
      event.preventDefault()
  		Site.resetSections()
      Flowers.fadeIn()
    })
  }
}

var Admin = {
  piece_images: [],
  toggle_images_links: [],
  portfolio_title_field: [],
  
  setup: function() {
    this.piece_images = $('.piece .images')
    this.toggle_images_links = $('.toggle_images_link')
    
    this.hidePieceImages()
    this.toggleImagesLinks()
    // this.updatePortfolioTitle()
  },
  
  hidePieceImages: function() {
    this.piece_images.hide()
  },
  
  toggleImagesLinks: function() {
    this.toggle_images_links.toggle(function(e) {
	    e.preventDefault()
	    $(this).parents('.piece').children('.images').slideDown('slow')
	    $(this).html('Hide')
	  }, function(e) {
	    e.preventDefault()
	    $(this).parents('.piece').children('.images').slideUp('slow')
	    $(this).html('Show')
	  })
  },
  
  updatePortfolioTitle: function() {
    this.portfolio_title_field.keyup(function(e) {
      $('.port_nav li.selected a').text($(this).val())
    })
  }
}


$(function() {
  if (Site.admin()) {
    Admin.setup()
    
    $('.add_image_link').click(function(event) {
      event.preventDefault()
      var elem = $(this)
      
      $.get(elem.attr('href'), function(data) {
        var form_element = $('<div class="new_image">' + data + '</div>')
        var target_parent = (elem.parents('.action').size() > 0) ? (elem.parents('.action')) : (elem)
        var target = (target_parent.next('ol.images').size() > 0) ? (target_parent.next('ol.images')) : (target_parent.parent().append('<ol class="images"></ol>'))
        
        if (target_parent.parents('.piece').size > 0) {
          target_parent.parents('.piece').append(form_element)  
        } else {
          target_parent.parent().append(form_element)
        };
        
        
        var form = $('.new_image form')
        // form.ajaxForm({
        //   success: function(data) {
        //     form.parent().remove()
        //   }
        // })
        form.children().children('.cancel').click(function(e) {
          e.preventDefault()
          form.parent().remove()
        })
      })
    })
    
  } else {
  	Site.center()
  	$(window).resize(function() { Site.center() })
  }
  Site.fadeNotifications()
  Flowers.setup()
  Portfolio.setup()
  Navigation.setup()
  $('#password').focus()
	
  // Ajaxify forms:  
	$.ajaxSetup({ beforeSend: function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")} })
})