<html>
<head>
<title>atividade instrucional 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.9.custom.min.js"></script>
<link href="blocos.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--

#Table_01 {	
	position:absolute;
	left:0px;
	margin-left:auto;
	margin-right:auto;
	width:820px;
	height:636px;
	z-index:-100;
}

#blocos-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:820px;
	height:143px;
}

#blocos-02 {
	position:absolute;
	left:0px;
	top:143px;
	width:17px;
	height:493px;
}

#blocos-03 {
	position:absolute;
	left:17px;
	top:143px;
	width:175px;
	height:58px;
}

#blocos-04 {
	position:absolute;
	left:192px;
	top:143px;
	width:179px;
	height:493px;
}

#mapa1-05 {
	position:absolute;
	left:371px;
	top:143px;
	width:175px;
	height:58px;
}

#blocos-06 {
	position:absolute;
	left:546px;
	top:143px;
	width:274px;
	height:493px;
}

#blocos-07 {
	position:absolute;
	left:17px;
	top:201px;
	width:175px;
	height:52px;
}

#blocos-08 {
	position:absolute;
	left:371px;
	top:201px;
	width:175px;
	height:52px;
}

#mapa1-06 {
	position:absolute;
	left:17px;
	top:253px;
	width:175px;
	height:58px;
}

#blocos-10 {
	position:absolute;
	left:371px;
	top:253px;
	width:175px;
	height:58px;
}

#blocos-11 {
	position:absolute;
	left:17px;
	top:311px;
	width:175px;
	height:325px;
}

#blocos-12 {
	position:absolute;
	left:371px;
	top:311px;
	width:175px;
	height:52px;
}

#blocos-13 {
	position:absolute;
	left:371px;
	top:363px;
	width:175px;
	height:58px;
}

#blocos-14 {
	position:absolute;
	left:371px;
	top:421px;
	width:175px;
	height:49px;
}

#mapa1-15 {
	position:absolute;
	left:371px;
	top:470px;
	width:175px;
	height:58px;
}

#blocos-16 {
	position:absolute;
	left:371px;
	top:528px;
	width:175px;
	height:50px;
}

#blocos-17 {
	position:absolute;
	left:371px;
	top:578px;
	width:175px;
	height:58px;
}

-->
</style>
<script type="text/javascript">

    $(document).ready(function() {

        $(".item").draggable({
            revert: true            
        });

        $("#cart_items1").droppable({
			axis: "x",
			accept: "#i1",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
                var html = '<div class="item icart">'+item+'</div>';
                $("#cart_items1").append(html);
				remove("#item_container #"+itemid);
            }
        });

        $("#cart_items2").droppable({
            axis: "x",
			accept: "#i2",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
				var html = '<div class="item icart">'+item+'</div>';
                $("#cart_items2").append(html);
				remove("#item_container #"+itemid);
			}
        }); 
		
        $("#cart_items3").droppable({
            axis: "x",
			accept: "#i3",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
                var html = '<div class="item icart">'+item+'</div>';
                $("#cart_items3").append(html);
				remove("#item_container #"+itemid);
 	           }
        }); 

        $("#cart_items4").droppable({
            axis: "x",
			accept: "#i4",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
                var html = '<div class="item icart">'+item+'</div>';
                $("#cart_items4").append(html);
				remove("#item_container #"+itemid);
 	           }
        }); 

        $("#cart_items5").droppable({
            axis: "x",
			accept: "#i5",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
                var html = '<div class="item icart">'+item+'</div>';
                $("#cart_items5").append(html);
				remove("#item_container #"+itemid);
 	           }
        });

        $("#cart_items6").droppable({
            axis: "x",
			accept: "#i6",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
                var html = '<div class="item icart">'+item+'</div>';
                $("#cart_items6").append(html);
				remove("#item_container #"+itemid);
 	           }
        }); 
		
        $("#cart_items7").droppable({
            axis: "x",
			accept: "#i7",
            drop: function(event, ui) {
                var item = ui.draggable.html();
                var itemid = ui.draggable.attr("id");
                var html = '<div class="item icart">'+item+'</div>';
                $("#cart_items7").append(html);
				remove("#item_container #"+itemid);
 	           }
        }); 

	   var y_fixo = $("#item_container").offset().top;
	   
	   $(window).scroll(function () {
			$("#item_container").animate({
				top: y_fixo+$(document).scrollTop()+"px"
				},{duration:500,queue:false}
			);
		});


    });

	$(function() {
		init();
	});

	/* drag and drop para tablets*/
	function touchHandler(event){

		var touches = event.changedTouches, first = touches[0],	type = "";

		switch(event.type){

			case "touchstart": type = "mousedown"; break;
			case "touchmove":  type="mousemove"; break;
			case "touchend":   type="mouseup"; break;
			default: return;
		}
		
		var simulatedEvent = document.createEvent("MouseEvent");

		simulatedEvent.initMouseEvent(type, true, true, window, 1,
									  first.screenX, first.screenY,
									  first.clientX, first.clientY, false,
									   false, false, false, 0/*left*/, null);
																						
		first.target.dispatchEvent(simulatedEvent);
		event.preventDefault();
	}
																						
	function init(){
		
		if (document.addEventListener){
			document.addEventListener("touchstart", touchHandler, true);
			document.addEventListener("touchmove", touchHandler, true);
			document.addEventListener("touchend", touchHandler, true);
			document.addEventListener("touchcancel", touchHandler, true);
		}
		else if (document.attachEvent){
  			document.attachEvent('ontouchstart', touchHandler);
			document.attachEvent("ontouchmove", touchHandler, true);
			document.attachEvent("ontouchend", touchHandler, true);
			document.attachEvent("ontouchcancel", touchHandler, true);
		}
	}
	/* fim do drag and drop paraq tablets*/


    function remove(el) {
        $(el).hide();
        $(el).effect("explode", {pieces: 4}, 1000);
        $(el).fadeOut('1000');
		setTimeout(function() {
           //$(el).remove();
		    $(el).removeAttr("id");
			checkItems();
        }, 1100);
    }
	
	function checkItems(){
		//if($("#item_container").html()=="")alert("VAZIO");
		if($("#item_container").html().indexOf("id")==-1) {
			$("#item_container").html("<div class=\"item\"><a href='blocos.html' target='_parent'><img src=\"img/reiniciar.jpg\" border=\"0\" /></a></div>");
		}

	}

</script>
</head>
<body>
<!-- ImageReady Slices (mapa1.psd) -->
<div id="Table_01">
	<div id="blocos-01">
		<img src="images/blocos_01.jpg" width="820" height="143" alt="">
	</div>
	<div id="blocos-02">
		<img src="images/blocos_02.jpg" width="17" height="493" alt="">
	</div>
	<div id="blocos-03">
      <div id="cart_items1" class="back"></div>
	</div>
	<div id="blocos-04">
		<img src="images/blocos_04.jpg" width="179" height="493" alt="">
	</div>
	<div id="mapa1-05">
	    <div id="cart_items3" class="back"></div>
    </div>
	<div id="blocos-06">
		<img src="images/blocos_06.jpg" width="274" height="493" alt="">
	</div>
	<div id="blocos-07">
		<img src="images/blocos_07.jpg" width="175" height="52" alt="">
	</div>
	<div id="blocos-08">
		<img src="images/blocos_08.jpg" width="175" height="52" alt="">
	</div>
	<div id="mapa1-06">
    	<div id="cart_items2" class="back"></div>
    </div>
	<div id="blocos-10">
    	<div id="cart_items4" class="back"></div>
    </div>
	<div id="blocos-11">
		<img src="images/blocos_11.jpg" width="175" height="325" alt="">
	</div>
	<div id="blocos-12">
		<img src="images/blocos_12.jpg" width="175" height="52" alt="">
	</div>
	<div id="blocos-13">
    	<div id="cart_items5" class="back"></div>
    </div>
	<div id="blocos-14">
		<img src="images/blocos_14.jpg" width="175" height="49" alt="">
	</div>
	<div id="mapa1-15">
	  <div id="cart_items6" class="back"></div>
    </div>
	<div id="blocos-16">
		<img src="images/blocos_16.jpg" width="175" height="50" alt="">
	</div>
	<div id="blocos-17">
		<div id="cart_items7" class="back"></div>
	</div>
</div>
<!-- End ImageReady Slices -->
      <div id="item_container">
          <div class="item" id="i3"><img src="img/foto3.jpg"/></div>
          <div class="item" id="i1"><img src="img/foto1.jpg"/></div>
          <div class="item" id="i5"><img src="img/foto5.jpg"/></div>
          <div class="item" id="i7"><img src="img/foto7.jpg"/></div>
          <div class="item" id="i2"><img src="img/foto2.jpg"/></div>
          <div class="item" id="i6"><img src="img/foto6.jpg"/></div>
          <div class="item" id="i4"><img src="img/foto4.jpg"/></div>
      </div>
</body>
</html>