{% extends "gstudio/base.html" %}
{% load pagination_tags %}
{% load i18n %}
{% load adminmedia grp_tags %}
{% load i18n comments gstudio_tags %}

{% block content %}
<script src="{% admin_media_prefix %}jquery/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="{{STATIC_URL}}gstudio/js/orgitdown/orgitdown/sets/org/set.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}gstudio/js/orgitdown/orgitdown/jquery.orgitdown.js"></script>
    <script type="text/javascript" >
      $(window).load(function() {
      $("#content").css({
    "width": "600px",});});
$(window).load(function() {
 $("#chart").hide();});
$(window).load(function() {

 $("#graphcss").hide();   
  });
var i = 0;
jQuery(document).ready(function($) {
    $("#commenteditor").click(function(){
        document.getElementById('gnoweditor').style.visibility="visible";
        $("#gnoweditor").orgitdown(mySettings);
	document.getElementById('save').style.visibility="visible";
	$("#commenteditor").hide();
		
	});
     $("#save").click(function(){
            var org_data = $("#gnoweditor").val();   
	    var encode_data = encodeURIComponent(org_data);
	    var decode_data = decodeURIComponent(encode_data.replace(/\+/g, " "));    
 	    $("#commenttext").val(decode_data);	   
	});
});
</script>
<style type="text/css">
#div2
{
background-color:#E8E8E8 ;
}
#div1
{
background-color:white
}
#divsearch
{
position:absolute;
}
#upperdiv
{
position:relative;
margin-bottom:20%;
}
#divpost
{
position:absolute;
margin-left:52%;
}
#showingprocess
{
width:371px;
height:38px;
border:solid 1px #B3B3B3;
}
#inner{
width:10px;
height:36px;
border:solid 1px blue;
margin-top:1px;
background: green;

}
</style>

{% if user.is_authenticated %}

{% autopaginate vids 10 %}


<h2 style="color: teal;">Video Library</h2>
<br/>
<div id="upperdiv">

<div id="divsearch">
<form method="post" action="">
{% csrf_token %}
<h4 style="color: black;">Search Videos:</h4>
<p><input type="text" name="svid" value={{val}}></p>


<select name="mydropdown">
<option value="title">Title</option>
<option value="creation_date">Creation Date</option>
</select>
<br/>
<input type="submit" name="norm" value="Search">
<input type="submit" name="spe" value="Search by User">
</form>
<br>
<form method="post" action="/gstudio/resources/videos/">
{% csrf_token %}
<input type="hidden" name="user" value={{user.username}}>
<input type="submit" name="fav" value="View Favourites">
</form>
</div>
<div id="divpost">
<form enctype="multipart/form-data" method="post" action="">
{% csrf_token %}
<p><h4 style="color: black;">Submit Videos:</h4>Video:&nbsp;<input type="file" name="clip" multiple="multiple" /></p><br/>
Description:&nbsp;&nbsp;<input type="button"  id="commenteditor"  value="Add Content" >
<input type="button" class="commentsavecontent" id="save" value="Save" style="visibility:hidden" />
<input type=text name="contenttext" id="commenttext" style="visibility:hidden" />
<input type="hidden" name="user" value={{user.username}}>
<input type="hidden" name="userpassword" value={{user.password}}>
<input type="hidden" name="useremail" value={{user.email}}>
<p><b> Enter the password of wetube.gnowledge.org</b> </p>
<input type="password" name="videopassword" />

<input type="submit" value="Upload"  onclick="return myupload();" >
<script type="text/javascript">
function myupload()
{
document.getElementById('showingprocess').style.visibility="visible";
document.getElementById('headvideo').style.visibility="visible";

	setInterval( function() {
	if( i < 340 )
	{
	
	i = i + 20;
	$("#inner").css({ "-moz-box-sizing":"border-box", "margin-left":i });
	}
	else 
		{
		i = 0;
		}
	},1000);

	

}
</script>
</form>
</div>
</div>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h2 id="headvideo" style="visibility:hidden;">Processing And Uploading Video</h2>
<div id="showingprocess" style="visibility:hidden;">
<div id="inner">
</div>
</div>
{% if fav %}
<h2 style="color: teal;">Favourite Videos</h2><br/>
{% else %}
<h2 style="color: teal;">List of Videos in the library </h2><br/>
{% endif %}

<div id="listvideo">
{% for video in vids %}
<!--<iframe src="{{video.rurl}}/embed?in=0&out=10000&view=video" width="256" height="144" allowfullscreen></iframe>-->


<div id="divvideo">
<script type="text/javascript">
i = i+1;
if (i%2 == 0){
document.getElementById("divvideo").setAttribute("id","div1");
}
else
{
document.getElementById("divvideo").setAttribute("id","div2");
}

</script>
<font size="4">{{video.title}}</font>
<form enctype="multipart/form-data" method="post" action="" target="_blank">
{% csrf_token %}
<input type="hidden" name = "full" value ={{video.slug}}>
<!--<input type="submit" value="Play">-->
<a href="/gstudio/resources/videos/show/{{video.id}}/"><font size="4"><u>Show</u></font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href={{video.rurl}} target="_blank">Right click to download</a><br>
<!-- <font color = 'black'>Posted By : </font> -->
{% for author in video.get_nbh.posted_by %}

  <input type="hidden" name="authorname" value="{{ author }}"  />
{% endfor %}

<!-- <br> -->
<!-- <font color = 'black'>Posted At :</font> -->
{% for date in video.get_nbh.creation_day %}
 <input type="hidden" name="datename" value="{{ date }}"  />
{% endfor %}
 <input type="hidden" name="titlename" value="{{ video.title }}"  />

<!-- <br> -->
{% for we in video.get_nbh.source %}
		<!-- <font color = 'black'>Location: </font>  -->
			{% for map in video.get_nbh.map_link %}
				{% ifnotequal map '' %}
		                    <input type="hidden" name="mapname" value="{{ map }}"  />
				     <input type="hidden" name="wename" value="{{ we }}"  />
					<!-- <a href=http://maps.google.co.in/maps?hl=en&cp=43&gs_id=6&xhr=t&q={{map}}&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&biw=1304&bih=680&um=1&ie=UTF-8&sa=N&tab=wl target="_blank">{{we}}</a> -->
				{% endifnotequal %}
			{% endfor %}
		{% endfor %}
<!-- <br> -->
 <input type="hidden" name="contentname" value="{{ video.content }}" />
 <input type="hidden" name="ratename" value="{{ video.rating.get_rating }}" />

<!-- <br> -->
<!-- <form method="post" action=""> -->
<!-- {% csrf_token %} -->
<!-- <input name="star1" type="radio" value=1 class="star"/> -->
<!-- <input name="star1" type="radio" value=2 class="star"/> -->
<!-- <input name="star1" type="radio" value=3 class="star"/> -->
<!-- <input name="star1" type="radio" value=4 class="star"/> -->
<!-- <input name="star1" type="radio" value=5 class="star"/> -->
  
<input type="hidden" name="vidid" value={{video.id}}>
</form>
<!-- <input type="submit" value="Rate it!!!"> -->
<!-- </form> -->
<!-- <br> -->
<!-- <form method="post" action=""> -->
<!-- {% csrf_token %} -->
<!-- <input type="hidden" name="favid" value={{video.id}}> -->
<!-- <input type="hidden" name="favusr" value={{user.username}}> -->
<!-- <input type="submit" value="Add to favourites"> -->
<!-- </form><br> -->
<!-- <hr width="100%" style="height:5px;" color="black"/> -->
<!-- <br> -->
</div>

{% endfor %}

</div>
<br>
{% else %}
 
<h2 style="color: indigo;">Sorry you need to log in to see this content !</h2>
 
{% endif %}
<h2>
{% paginate %}</h2>

{% endblock %}

{% block chart %}
<br> 

<br>
{% endblock %}