$(function() {
  var items = $('#listing>li')
  var cont = $('#container')
  var listing = $('#listing')
  var isScrolling = true

  items.addClass('item')
  items.each(function(i, e) {
              $(e).attr('data-idx', i)
              cont.append(e) 
             })

  function typeEffect(el, delay, cb) {
    var text = el.text()
    el.css('display', 'block')
    el.empty()
    var label = $('<span></span>')
    var cursor = $('<span class="cursor"></span>')
    var chars = ['|', '/', '-', '\\']

    el.append(label)
    el.append(cursor)

    ;(function type(label, text, i, cb) {
      label.append(text[0])
      cursor.text(chars[i%chars.length])
      if (text.length == 1) {
        cursor.fadeOut(function() {
          el.text(label.text()) 
          cursor.remove()
          label.remove()
          if (typeof(cb) === 'function')
            cb()
        })
        return
      }
      setTimeout(function() {
        type(label, text.substring(1), ++i, cb)
      }, delay) 
    })(label, text, 0, cb)
  }

  function fadeIn(el) {
    el.find('.sprite').fadeIn(3000)
    el.animate({marginTop: "0px", opacity: "1.0", height: "57px"},
               {duration: 500,
                complete: function() {
                  var item = $(this)
                  item.animate({width: "500px"},
                                  {complete: function() {
                                    $(this).find('.year').slideDown()
                                    typeEffect($(this).find('a'), 50)
                                    typeEffect($(this).find('.descr'), 10)
                                    var projectDescription = $(this).find('span')
                                    projectDescription.fadeIn(function() {
                                      fadeInList(item, item.find('li:first'), function() {
                                        //fadeOutList(item, item.find('li:last'), undefined, 1000)
                                      }, 500)
                                    }) 
                                  }})
                }})
  }

  function fadeInList(item, el, cb, speed) {
    if (speed === undefined)
      speed = 100
    el.fadeIn(speed, function() {
                var next = el.next('li')
                if (item.data().out !== true)
                  fadeInList(item, next, cb, speed)
                if (next.length == 0 && typeof(cb) === 'function')
                  cb()
              })
  }

  function fadeOutList(item, el, cb, speed) {
    if (speed === undefined)
      speed = 100
    el.fadeOut(speed, function() {
                var next = el.prev('li')
                if (!jQuery.hasData(item) || item.data().out === true)
                  fadeOutList(item, next, cb, speed)
                if (next.length == 0 && typeof(cb) === 'function')
                  cb()
              })
  }

  function layoutReady() {
    cont.remove()
    $('body').addClass('done')
    listing.addClass('done')
    items.find('li').hover(function(e) { listing.find('li:contains('+$(this).text()+')')
                                                     .toggleClass('hilight', true) },
                           function(e) { listing.find('li:contains('+$(this).text()+')')
                                                     .toggleClass('hilight', false) })

  }

  ;(function pan(el) {
    el.animate({marginLeft: "-310px"}, 
               {duration: 3000, 
                easing: 'linear',
                complete: function() {
                  var translated = cont.find('li:first')

                  cont.append(translated)

                  translated.css('margin-left', '0')

                  var next = cont.find('li:first')
                  if (next.length > 0)
                    pan(next)
                }}) 
  })(cont.find('li:first'))

  function moveItems() {
    items.stop()
    items.css('margin-left', '')
    ;(function move(i) {
      var el = $('li[data-idx="'+i+'"]')
      if (el.length == 0) {
        layoutReady()
        return
      }
      listing.append(el)
      fadeIn(el)
      setTimeout(function() {move(++i)}, 100)
    })(0)
  }

  $('body').click(function() {
    //isScrolling = false 
    cont.fadeOut(1000, moveItems)
    $('h2').animate({opacity: 0.2}, 
                    {duration: 1000, 
                    easing: 'linear',
                    complete: function() {
                    }})
    $('#click').fadeOut(function() {
      $(this).remove() 
    })
    $(this).removeClass('clickable')
    $(this).unbind('click')
  })

  typeEffect($('h1'), 100, function() {
    var block = $('<span class="pulse">_</span>')
    $('h1').append(block)
  })
  typeEffect($('h2'), 100, function() {
    cont.fadeIn(1000, function() {
      $('#click').show() 
    })
  })
})