<script type="text/javascript">
$(function() {
  var w=$(window).width();
  if(w < 1024){
    $('#demo').removeClass('span8');
    $('#setupClass').removeClass('span3');
    $('#setupClass').addClass('row-fluid');
    $('#myForm1').addClass('span5');
    $('#myForm2').addClass('offset1 span5');
  }
});
</script>

<{if $isMine}>
  <div id="setupClass" class="span3">
    <div id="myForm1">
  	<form action="aboutus.php" method="post" enctype="multipart/form-data">
  	  <fieldset>
      <legend><{$smarty.const._MD_TCW_STUDENT_SETUP}></legend>
      <span class="help-block"><{$smarty.const._MD_TCW_SELECT_TO_EDIT}></span>
      <label><{$smarty.const._MD_TCW_IMPORT_EXCEL}></label>
      <input type="file" name="importfile">

      <input type="hidden" name="op" value="import_excel">
    	<input type="hidden" name="WebID" value="<{$WebID}>">
    	<button type="submit" class="btn btn-primary"><{$smarty.const._MD_TCW_IMPORT}></button>
      <{$smarty.const._MD_TCW_IMPORT_LINK}>

    </fieldset>
    </form>

    <div>
      <button type="button" onClick="edit_stu();" class="btn btn-primary"><{$smarty.const._MD_TCW_ADD_MEM}></button>
    </div>

    </div>

    <div id="save_info"></div>



  </div>
<{/if}>


<{if $students1 || $students2}>
  <style>
	.draggable {padding: 5px; margin: 0 10px 10px 0; font-size: 12px; border:0px dotted gray;position:absolute;}
	#snaptarget {width:640px; height: 540px; border:1px solid black;background:#CC6633 url(images/classroom2.png) center center no-repeat;position:relative;}
	</style>
	
	<script>
	$(function() {
	  var snaptarget = $("#snaptarget");
    var st_pos = snaptarget.position();

		$( ".draggable" ).draggable({

      snapMode: "outer",
      containment: "#snaptarget",
      cursor:"move",
      stop: function(e, ui) {
        var top = ui.offset.top - st_pos.top;
        var left = ui.offset.left - st_pos.left;
        var MemID = $(this).attr("id");

        $.post("aboutus.php", {op: "save_seat", MemID: MemID , top: top, left: left } , function(data) {
          $("#save_info").html("<{$smarty.const._MD_TCW_MEM_SAVE_OK}>");
        });
      }});
	});

	function edit_stu(MemID){
  	$.post("aboutus.php", {op: "tad_web_mems_form", MemID: MemID, WebID: <{$WebID}>} , function(data) {
      $("#setupClass").html(data);
    });

  }
	</script>
	
  <div id="demo" class="span8">
    <div id="snaptarget">
    	<{$students1}>
    </div>

    <br style="clear:both;" />
    <{$students2}>

    <br style="clear:both;" />
  </div>
  
  
<{else}>

  <style>
    #snaptarget {width:640px; height: 540px; border:1px solid gray;background:rgb(233,231,237) url(images/classroom2.png) center center no-repeat;position:relative;background-size:contain;}
  </style>

	<script>
	function edit_stu(){
  	$.post("aboutus.php", {op: "tad_web_mems_form" , WebID: <{$WebID}>} , function(data) {
      $("#setupClass").html(data);
    });
  }
	</script>


  <div id="snaptarget" style="font-size:24px;color:gray;text-align:center;line-height:540px;" class="span8">
    <{$smarty.const._MD_TCW_COMMING_SOON}><img src="images/clean.png">
  </div>
<{/if}>

