<?php 
	echo $this->Html->css(array('jquery.awesome-cropper','/components/imgareaselect/css/imgareaselect-default'));
?>


<script>


	var path='<?php echo $this->webroot;?>';
	
	function displaySector(id){
		//alert(id);
	 //$('#deliMG').show();
	 //$('#deliMG1').show();
	}
	function deleteImg(){
	 $('.courseimg >.awesome-cropper img').attr('src', ''); 
	 $('.courseimg >.awesome-cropper img').css('visibility', 'hidden'); 
	 $('#sample_input').val('');
	 var canvas = $('canvas')[0]; // or document.getElementById('canvas');
	  canvas.width = canvas.width;
	}
	function deleteImg1(){
		 $('.courseoverview >.awesome-cropper img').attr('src', ''); 
		 $('.courseoverview >.awesome-cropper img').css('visibility', 'hidden'); 
		 $('#sample_input2').val('');
		 var canvas = $('canvas')[0]; // or document.getElementById('canvas');
		  canvas.width = canvas.width;
		}



</script>
<style>
#sample_input{
	display: none;
}
.modal {
  background-clip: padding-box;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  left: 36%;
  margin-left: -280px;
  outline: medium none;
  position: fixed;
  top: 10%;
  width: 68%;
	height:92%;
  z-index: 1050;
}
canvas{
  display: inline;
  float: right;
}
.awesome-cropper{
	position: absolute;
	top: 0px;
}
.modal-body {
  max-height: 100%;
  overflow-y: auto;
  padding: 15px;
  position: relative;
}
.courseimg{
	background: rgba(0, 0, 0, 0) url("../images/addimg1.jpg") no-repeat scroll 0 0 / 223px 223px;
	float: left;
	height: 250px;
	margin-right: 13px;
	width: 100%;
}

.btn-file {
  height: 225px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
.courseoverview {
    background: rgba(0, 0, 0, 0) url("../images/addimg.jpg") no-repeat scroll 0 0 / 500px 223px;
	height: 250px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.courseoverview input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
.courseoverview > .btn-file{
	height: 225px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.modal-content {
  box-shadow: none;
}
.modal-content {
  background-clip: padding-box;
  background-color: #fff;
  border: none;
  border-radius: 0px;
  position: relative;
}
.modal-footer {
  background-color: #fff;
  border-radius:0px;
  border-top: none;
  box-shadow: none;
  margin-bottom: 0;
  padding: 0;
  text-align: right;
  width: 88.5%;
}
.form textarea {
  width: 99%;
}

.awesome-cropper{
  cursor:pointer;

}
.fl{
  float: left;
}

</style>

<div class="w99p pdl15" style="margin-bottom: 40px;">
    <div class="row-fluid">
    <div class="row padleft w50p fl">
        <div class="blocktitle w100p">My Network - Create Network</div>
    </div>
    <div>    
        <?php echo $this->element('mynetwork');?>
    </div>


<div class="networks form addnetfo addnetpos mrl10">
<!--<div class="bacbutdiv">
	<a onclick="self.history.back();" href="#" class="btn btn-mini bacbut" style="float: right;">Back</a>
</div>-->
<?php //pr($loggedUser['id']);?>
	<?php echo $this->Form->create('Network',array('type'=>'file')); ?>
	<fieldset class="padleft10" style="margin-bottom: 10px;">
	<?php
		echo $this->Form->input('user_id',array('type'=>'hidden','value'=>$loggedUser['id']));
	?>
	<h5>Title</h5>
	<?php 
		echo $this->Form->input('title',array('label'=>false,'class'=>'tit_width','style'=>'width: 98%; margin-bottom:10px;'));
	?>
                <div class="col-md-4" style="padding-left: 0 ">
                    <div class="courseimg">
                                         <?php 
                         if (!empty($this->data['Course']['link1'])){?>
                               <img src="<?php echo $this->data['Course']['link1'];?>"  width="164px" class="profile-image"   id="profileImg" style=""/>
                            <label id="deliMG" onclick="deletethumb(<?php echo $this->data['Course']['id'];?>);" style="font-weight:normal;margin-top:7px; width: 164px;" class="btn">Remove Image</label>            
                           <?php }else {?>
				      <input id="sample_input" type="hidden" name="Network[image]">
				      <div style="clear: both;"></div>
				      <label id="deliMG" onclick="deleteImg();" style="display: block; font-weight:normal; width: 100%;" class="">Remove Image</label>
				<?php }?> 
		</div>
            </div>	
                    <div class="col-md-8">
                            <div class="courseoverview">
                                             <?php 

                             if (!empty($this->data['Course']['link2'])){?>
                                   <img src="<?php echo $this->data['Course']['link2'];?>"  class="profile-image"  id="profileImg1" style=""/>
                                <label id="deliMG1" onclick="deletethumb1(<?php echo $this->data['Course']['id'];?>);" style="font-weight:normal;margin-top:7px; width: 164px;" class="btn">Remove Image</label>            
                               <?php }else {?>
				      <input id="sample_input2" type="hidden" name="Network[image2]">
				      <div style="clear: both;"></div>
				      <label id="deliMG1" onclick="deleteImg1();" style=" font-weight:normal; width: 100%; display: block;" class="">Remove Image</label>
				<?php }?> 
				</div>
                    </div>
				<div style="clear: both;"></div>
	
	<h5>Description</h5>
	<?php 
		echo $this->Form->input('description',array('label'=>false,'style'=>'width: 98%;'));
	?>
	
	</fieldset>
	<button class="btn btn-mini" type="button" style="margin-top: 0px;" onclick="self.history.back();">Cancel</button>
  <button class="btn btn-mini" type="submit" style="margin-top: 0px;" >Submit</button> 
	<?php echo $this->Form->end(); ?>
</div>
        </div>
</div>

<?php 
	echo $this->Html->script(array('jquery-ui-1.10.3.custom','timepicker-addon','jquery.form.min','site_js/jquery.awesome-cropper','jquery.awesome-cropper','/components/imgareaselect/scripts/jquery.imgareaselect'));
?>
<script>
    $(document).ready(function () {
        $('#sample_input').awesomeCropper(
        { width: 250, height: 250, debug: true }
        );

        $('#sample_input2').awesomeCropper(
                { width: 500, height: 250, debug: true }
                );

        $(":file").change(function() {
           
    		
            var canvas = $('canvas')[0]; // or document.getElementById('canvas');
           canvas.width = canvas.width;
          $('.awesome-cropper img').css('visibility', 'visible'); 
        });
    });
    </script> 
      <script type="text/javascript">
     var path='<?php echo $this->webroot;?>';
		function deletethumb(id){
			 $.ajax({
			     	type: 'POST',
			     	url: path +'courses/deletethumb',
			     	data: {id:id},
			     	success: function(data){
				     	location.href="<?php echo $this->here?>";
			     	}
		     	});
		}

		function deletethumb1(id){
			 $.ajax({
			     	type: 'POST',
			     	url: path +'courses/deletethumb1',
			     	data: {id:id},
			     	success: function(data){
				     	location.href="<?php echo $this->here?>";
			     	}
		     	});
		}
	</script>
