var instructionsOpen = false;
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
	
	$(function() {
		
		$( ".draggable_set div" )
		.draggable({ cursor: "move", opacity: 0.7, stack: ".draggable_set div", revert:true })	
		.touch({
		    animate: false,
		    sticky: false,
		    dragx: true,
		    dragy: true,
		    rotate: false,
		    resort: true,
		    scale: false
		});
		
		$( ".draggable_set div" ).hover( function(){$(this).fadeTo('fast', 0.7);},  function(){$(this).fadeTo('fast', 1);} );
		
				
		$( "#droppable" ).droppable({
			over: function( event, ui ) {
				$(this).fadeTo('fast', 0.7);
			},
			out: function( event, ui ) {
				$(this).fadeTo('fast', 1);
			},
			drop: function( event, ui ) {
					
				showDiv(ui.draggable.attr("id"));
				
			}
		});
		
		function showDiv ( id ) {
			var divToShow = '#' + id + '_content'
			$( divToShow ).fadeTo('fast', 1);
			$(this).removeClass( "hide" );
			
		}
		
		function hideDiv ( id ) {
	
			var divToHide = '#' + id;
			$( divToHide ).fadeTo('fast', 0, hideDivCallback);
		}
		
		function hideDivCallback() {
			$(this).addClass( "hide" );
			$(this).removeAttr("style");
			
		}
		
		$( "#button" ).click(function() {
			showInstructions();
			return false;
		});
				
		
		function hideTheDiv() {
			var divToHide = $( this ).parent().attr("id")
			hideDiv(divToHide);
			return false;
		}
		
		$( "#close1_button" ).click( hideTheDiv );
		$( "#close2_button" ).click( hideTheDiv );
		$( "#close3_button" ).click( hideTheDiv );
		$( "#close4_button" ).click( hideTheDiv );
		$( "#close5_button" ).click( hideTheDiv );
		$( "#close6_button" ).click( hideTheDiv );
		$( "#close7_button" ).click( hideTheDiv );
		$( "#close8_button" ).click( hideTheDiv );
		
		
		// run the currently selected effect
		function showInstructions() {
		
			// get effect type
			var selectedEffect = "slide";
			
			// most effect types need no options passed by default
			var options = { direction: "up" };
			// some effects have required parameters
			if ( selectedEffect === "scale" ) {
				options = { percent: 0 };
			} else if ( selectedEffect === "size" ) {
				options = { to: { width: 200, height: 60 } };
			}
			
			// toggle the effect
			$( "#instruction" ).toggle( selectedEffect, options, 500);
			
			if (instructionsOpen == false) {
				$( "#button div" ).removeClass( "help" );
				$( "#button div" ).addClass( "help_close" );
			} else {
				$( "#button div" ).removeClass( "help_close" );
				$( "#button div" ).addClass( "help" );
			}
			
			// wait to set control of instructions
			
			$( "#instruction" ).click(function() {
				showInstructions();
				return false;
			});
			
			instructionsOpen = !instructionsOpen;
		};
		
				
		// callback function to bring a hidden box back
		function intro() {
			// fade in
			setTimeout(function() {
				$( "#instruction" ).removeAttr( "style" ).hide().fadeIn();
			}, 500 );
			instructionsOpen = true;
			// hide after a pause
			setTimeout( showInstructions, 5000 );
			
		};
		
		
		// run the instruction intro
		if( $(window).width() >= 1024 && !isiPad ) {
  		intro();
		}

    if( isiPad ) {
      $("#toggler").css("display", "none");
      $("#button").css("display", "none");
		  $("#dolphins_are").css("display", "none");
		  $("#dolphins_arent").css("display", "block");
    }
		
	});