<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TABELA_ATIVIDADE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript">

    $(document).ready(function() {

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

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

            }
        });

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

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

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

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

            }
        });

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

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

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

    });
	
    function remove(el) {
        $(el).hide();
        $(el).parent().parent().effect("highlight", {color: "#ff0000"}, 1000);
        $(el).parent().parent().fadeOut('1000');
        setTimeout(function() {
            $(el).parent().parent().remove();
            // collapse cart items
            if (total_items > 3) {
                $("#cart_items").animate({width: "-=120"}, 'slow');
            }
        }, 1100);

    }
</script>
<link href="blocos.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--

#Table_01 {
	position:absolute;
	left:30px;
	margin-left:auto;
	margin-right:auto;
	top:60px;
	width:650px;
	height:400px;
}

#index-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:650px;
	height:92px;
}

#index-02 {
	position:absolute;
	left:0px;
	top:92px;
	width:9px;
	height:308px;
}

#index-03 {
	position:absolute;
	background:url(images/index_03.png);
	left:9px;
	top:92px;
	width:208px;
	height:52px;
}

#index-04 {
	position:absolute;
	left:217px;
	top:92px;
	width:209px;
	height:308px;
}

#index-05 {
	position:absolute;
	background:url(images/index_05.png);
	left:426px;
	top:92px;
	width:212px;
	height:52px;
}

#index-06 {
	position:absolute;
	left:638px;
	top:92px;
	width:12px;
	height:308px;
}

#index-07{
	position:absolute;
	background:url(images/index_03.png);
	left:9px;
	top:144px;
	width:208px;
	height:52px;
}

#index-08 {
	position:absolute;
	background:url(images/index_05.png);
	left:426px;
	top:144px;
	width:212px;
	height:52px;
}

#index-09 {
	position:absolute;
	background:url(images/index_03.png);
	left:9px;
	top:196px;
	width:208px;
	height:52px;
}

#index-10{
	position:absolute;
	background:url(images/index_05.png);
	left:426px;
	top:196px;
	width:212px;
	height:52px;
}

#index-11 {
	position:absolute;
	background:url(images/index_03.png);
	left:9px;
	top:248px;
	width:208px;
	height:52px;
}

#index-12 {
	position:absolute;
	background:url(images/index_05.png);
	left:426px;
	top:248px;
	width:212px;
	height:52px;
}

#index-13{
	position:absolute;
	background:url(images/index_03.png);
	left:9px;
	top:300px;
	width:208px;
	height:52px;
}

#index-14{
	position:absolute;
	background:url(images/index_05.png);
	left:426px;
	top:300px;
	width:212px;
	height:52px;
}

#index-15 {
	position:absolute;
	left:9px;
	top:352px;
	width:208px;
	height:48px;
}

#index-16 {
	position:absolute;
	left:426px;
	top:352px;
	width:212px;
	height:48px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body>
<!-- ImageReady Slices (TABELA_ATIVIDADE.png) -->
<div id="texto_apresentacao">Nessa atividade voc&ecirc; vai ser desafiado a entrar num novo jogo conceitual. Para realizar a atividade voc&ecirc; deve arrastar os blocos laterais de forma a preencher as lacunas do mapa conceitual. As lacunas ser&atilde;o preenchidas apenas em caso de acerto.</p>
</div>
<div id="Table_01">
	<div id="index-01">
		<img src="images/index_01.png" width="650" height="92" alt="">
	</div>
	<div id="index-02">
		<img src="images/index_02.png" width="9" height="308" alt="">
	</div>
	<div id="index-03">
		<div id="grego1" class="back"></div>
	</div>
	<div id="index-04">
		<img src="images/index_04.png" width="209" height="308" alt="">
	</div>
	<div id="index-05">
		<div id="cristao1"  class="back"></div>
	</div>
	<div id="index-06">
		<img src="images/index_06.png" width="12" height="308" alt="">
  </div>
	<div id="index-07">
		<div id="grego2" class="back"></div>
	</div>
	<div id="index-08">
		<div id="cristao2" class="back"></div>
	</div>
	<div id="index-09">
      <div id="grego3" class="back"></div>
    </div>
	<div id="index-10">
		<div id="cristao3" class="back"></div>
	</div>
	<div id="index-11">
		<div id="grego4" class="back"></div>
	</div>
	<div id="index-12">
		<div id="cristao4" class="back"></div>
	</div>
	<div id="index-13">
		<div id="grego5" class="back"></div>
	</div>
	<div id="index-14">
		<div id="cristao5" class="back"></div>
	</div>
	<div id="index-15">
		<img src="images/index_15.png" width="208" height="48" alt="">
	</div>
	<div id="index-16">
		<img src="images/index_16.png" width="212" height="48" alt="">
	</div>
</div>


<div id="item_container">
	<div class="item" id="c5"><img src="img/c5.png"/></div>	
    <div class="item" id="g3"><img src="img/g3.png"/></div>
    <div class="item" id="c2"><img src="img/c2.png"/></div>
    <div class="item" id="c1"><img src="img/c1.png"/></div>
    <div class="item" id="g5"><img src="img/g5.png"/></div>
    <div class="item" id="c4"><img src="img/c4.png"/></div>
    <div class="item" id="g4"><img src="img/g4.png"/></div>
    <div class="item" id="g2"><img src="img/g2.png"/></div>
    <div class="item" id="c3"><img src="img/c3.png"/></div>
    <div class="item" id="g1"><img src="img/g1.png"/></div>
    <div class="item"><a href="index.html" target="_parent"><img src="img/reiniciar.png" border="0" /></a></div>
    <div class="clear"></div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>