$(document).ready(function() {
  var doMessage = function(id) {
    $(id).fadeIn();
    setTimeout(function() {
      $(id).fadeOut();
    }, 2000);
  };

  $('.dot1').data('location', 'dot1');
  $('.dot2').data('location', 'dot2');
  $('.dot3').data('location', 'dot3');

  $('.info').draggable({scroll: false});
  $('.button.one').click(function() { $('.super_secret').removeClass('spurr cam meatball').addClass('meatball'); });
  $('.button.two').click(function() { $('.super_secret').removeClass('spurr cam meatball').addClass('spurr'); });
  $('.button.three').click(function() { $('.super_secret').removeClass('spurr cam meatball').addClass('cam'); });
  $('.button.four').click(function() { $('.super_secret').removeClass('spurr cam meatball'); });

  $('.button').mouseenter(function() { $('body').append('<embed src="/static.mp3" autostart="true" hidden="true" loop="true">'); });
  $('.button').mouseleave(function() { $('embed').remove(); });
  
  var StateMachine = function() {
    this.currentState = this.initialState;
  };

	var position1 = function(elt) {
		return $(elt).data('location') == 'dot1';
	};
	var position2 = function(elt) {
		return $(elt).data('location') == 'dot2';
	};
	var position3 = function(elt) {
		return $(elt).data('location') == 'dot3';
	};
	
	var noPos = function(elt) {
		return $(elt).data('location') == null;
	};
	
	var threeInOne = function() {
		doMessage('#message8');
	};

	var twoInOne = function() {
		doMessage('#message7');
	};
	
	var correct = function() {
	};
  
	var position = function(elt) {
		return $(elt).data('location');
	}
	
	var iHateYou = function() {
		if (position1('.dot1') && position1('.dot2') && position1('.dot3')) {
		 threeInOne();
		} else if (position1('.dot1') && position1('.dot2') && position2('.dot3')) {
		 twoInOne();
		} else if (position1('.dot1') && position1('.dot2') && position3('.dot3')) {
		 twoInOne();
		} else if (position1('.dot1') && position2('.dot2') && position1('.dot3')) {
		 twoInOne();
		} else if (position1('.dot1') && position2('.dot2') && position2('.dot3')) {
		 twoInOne();
		} else if (position1('.dot1') && position2('.dot2') && position3('.dot3')) {
		  correct();
		} else if (position1('.dot1') && position3('.dot2') && position1('.dot3')) {
		 twoInOne();
		} else if (position1('.dot1') && position3('.dot2') && position2('.dot3')) {
		  correct();
		} else if (position1('.dot1') && position3('.dot2') && position3('.dot3')) {
		 twoInOne();
		} else if (position2('.dot1') && position1('.dot2') && position1('.dot3')) {
		 twoInOne();
		} else if (position2('.dot1') && position1('.dot2') && position2('.dot3')) {
		 twoInOne();
		} else if (position2('.dot1') && position1('.dot2') && position3('.dot3')) {
		  correct();
		} else if (position2('.dot1') && position2('.dot2') && position1('.dot3')) {
		 twoInOne();
		} else if (position2('.dot1') && position2('.dot2') && position2('.dot3')) {
		 threeInOne();
		} else if (position2('.dot1') && position2('.dot2') && position3('.dot3')) {
		 twoInOne();
		} else if (position2('.dot1') && position3('.dot2') && position1('.dot3')) {
		  correct();
		} else if (position2('.dot1') && position3('.dot2') && position2('.dot3')) {
		 twoInOne();
		} else if (position2('.dot1') && position3('.dot2') && position3('.dot3')) {
		 twoInOne();
		} else if (position3('.dot1') && position1('.dot2') && position1('.dot3')) {
		 twoInOne();
		} else if (position3('.dot1') && position1('.dot2') && position2('.dot3')) {
		  correct();
		} else if (position3('.dot1') && position1('.dot2') && position3('.dot3')) {
		 twoInOne();
		} else if (position3('.dot1') && position2('.dot2') && position1('.dot3')) {
		  correct();
		} else if (position3('.dot1') && position2('.dot2') && position2('.dot3')) {
		 twoInOne();
		} else if (position3('.dot1') && position2('.dot2') && position3('.dot3')) {
		 twoInOne();
		} else if (position3('.dot1') && position3('.dot2') && position1('.dot3')) {
		 twoInOne();
		} else if (position3('.dot1') && position3('.dot2') && position2('.dot3')) {
		 twoInOne();
		} else if (position3('.dot1') && position3('.dot2') && position3('.dot3')) {
		 threeInOne();
		} else if (noPos('.dot1') && noPos('.dot2')) {
		}	else if (noPos('.dot1') && noPos('.dot3')) {
		}	else if (noPos('.dot2') && noPos('.dot3')) {
		} else if (noPos('.dot1') && position('.dot2') == position('.dot3')) {
		 twoInOne();
		} else if (noPos('.dot2') && position('.dot1') == position('.dot3')) {
		 twoInOne();
		} else if (noPos('.dot3') && position('.dot1') == position('.dot2')) {
		 twoInOne();
		} else {
		}
	};
	
  StateMachine.prototype = {
    initialState: 'zero_down',

    handleEvent: function(e) {
      var which = e.which.substr(3,1);
      var transitionFunc = this.stateEventTable[this.currentState][e.type];
      if (!transitionFunc) {
        transitionFunc = this.badEvent;
      }
      var nextState = transitionFunc.call(this, which);
      if (!nextState) {
        nextState = this.currentState;
      }
      this.currentState = nextState;
    },
  
    dropped: {},
    
    stateEventTable: {
      zero_down: {
        drop: function(which) {
          this.dropped[which] = true;
          doMessage('#message1');
          return "one_down";
        }
      },
      one_down: {
        drop: function(which) {
          this.dropped[which] = true;
          doMessage('#message2');
          return "two_down";
        },

        putBack: function(which) {
          return "zero_down";
        }
      },
      two_down: {
        drop: function(which) {
          this.dropped[which] = true;
          doMessage('#message3');
          return "three_down";
        },

        putBack: function(which) {
          return "one_down";
        }
      },
      three_down: {
        putBack: function(which) {
          doMessage('#message4');
          delete this.dropped[which];
          return "finished_two_down";
        }
      },
      
      finished_two_down: {
        putBack: function(which) {
          doMessage('#message5');
          delete this.dropped[which];
          return "finished_one_down";
        },
        drop: function(which) {
          return "three_down";
        }
      },

      finished_one_down: {
        putBack: function(which) {
          doMessage('#message6');
          delete this.dropped[which];
          return "zero_down";
        },
        drop: function(which) {
          return "finished_two_down";
        }
      }
    }
  };
  
  var state = new StateMachine();
  
  var complete = false;
  var msg1 = false, msg2 = false, msg3 = false;
  var msg4 = false, msg5 = false, msg6 = false;
  
  var DotFallTime = 1500;
  var offset = 136;
  
  var makeClickable = function(item) {
    item.data('clicked', false);
    item.click(function() {
      state.handleEvent({type: 'drop', which: this.className});
			$(this).data('location', null);
      var self = this;
      $(this).animate({top: ($(window).height() - offset + $(window).scrollTop()) + 'px'}, DotFallTime, 'easeOutBounce', function() {
				$(self).addClass('dropped');
        $(self).unbind('click');
        $(document).scroll(function(e) {
          $('.dropped').css('top', ($(window).height() - offset + $(window).scrollTop()) + 'px');
        });
        $(window).resize(function(e) {
          $('.dropped').css('top', ($(window).height() - offset + $(window).scrollTop()) + 'px');
        });
        $(self).draggable({
          stop: function(event, ui) {
            $(self).animate({top: ($(window).height() - offset + $(window).scrollTop()) + 'px'}, DotFallTime, 'easeOutBounce');
          },
					scroll: false
        });
      });
    });
  };

  $('.dot').droppable({
    tolerance: 'touch',
    drop: function(event, ui) {
			$(ui.draggable).data('location', this.id);
      $(ui.draggable).draggable('destroy');
			$(ui.draggable).removeClass('dropped');
      var self = this;
      state.handleEvent({type: 'putBack', which: ui.draggable.attr('class')});
			iHateYou();
      
      setTimeout(function() { 
        makeClickable(ui.draggable);
        $(self).find('.rel').append(ui.draggable);
        $(ui.draggable).attr('style', '');
      }, 50);
    },
		accept: function(item) {
			return true;
		}
  });
    
  makeClickable($('.dot1, .dot2, .dot3'));
  
  var shower = function() {
    $('#faq ul, #faq h2').slideDown();
    $('#faq > a').unbind('click').click(hider);
    return false;
  };
  
  var hider = function() {
    $('#faq ul, #faq h2').slideUp();
    $('#faq > a').unbind('click').click(shower);
    return false;
  };
  
  $('#faq > a').click(shower);
});