{% extends "base.html" %}
{% load i18n %}

{% block js_declaration %}
{{block.super}}
<script type="text/javascript">

var content_filter_url = "{% url franceculture.views.contentsfilter filter='__FILTER__' %}";

$.fn.realVal = function() {
	var obj = $(this[0]);
	if(obj.val) {
		if(obj.val() == obj.attr('defaultText')) {
			return '';
		}
		else {
			return obj.val();
		}
	}
	else {
		return null;
	}
};

function init_events(base_node) {

	$('.ldt_link',base_node).nyroModal({
       	type: 'iframe',
       	forceType: 'iframe',
   		height:662, 
   		width:1022,
   		bgColor: 'rgb(239, 239, 239)',
   		padding: 5,
   		titleFromIframe: false
      	});
    	
 	$('.ldt_link_create',base_node).nyroModal({
        type: 'iframe',
        forceType: 'iframe',
        height:662, 
        width:1022,
        bgColor: 'rgb(239, 239, 239)',
        padding: 5,
        titleFromIframe: false,
        beforeHideContent: function(elts, settings, callback){
             try {
	              var res = $('#ldtInitSwf',$('#nyroModalIframe').contents());
	              if(res.length > 0)
	              {
	              	   res.get(0).forceSave();
	              }
             }
             catch(err)
             {
              // do nothing
             }                   
             callback();
        	}
    	});

	$('.ldt_link_embed',base_node).click(function(e) {
		e.preventDefault();
		link = $(e.target);
		json_url = link.attr("href");
		player_id = link.attr("id");
		/*$.nyroModalSettings({
		 	ajax: { data: ({ json_url:json_url, player_id:player_id }) }
		  	});*/
		   $.nyroModalManual({
		         type: 'iframe',
		         forceType: 'iframe',
		         titleFromIframe: false,
		   	height:662, 
		  		width:650,
		  		bgColor: 'rgb(239, 239, 239)',
		  		padding: 5,
		    url: '{% url franceculture.views.popup_embed %}?json_url='+escape(json_url)+'&amp;player_id='+escape(player_id),
		   });
		   return false;
	});

	$('.content_link_create').nyroModal({
        type: 'iframe',
        forceType: 'iframe',
        height:662, 
        width:1022,
        bgColor: 'rgb(239, 239, 239)',
        padding: 5,
        titleFromIframe: false,
        endRemove: function(elts, settings) {
        	searchCallback($("#searchcontentsinput"),"#contentslistcontainer",content_filter_url)
		},
	  	endShowContent: function(elts, settings) {
		  	$('#nyroModalIframe', elts.content).load(function() {
			  	var form_status = $(this).contents().find("#content_form_status").val(); 
			  	if(form_status == 'saved') {
			  		$.nyroModalRemove();
			  	}
		  	});
		}
	});


	$('.imageline',base_node).each(function(i) {
	    tr = $(this);
		tr.mouseover(function() {
	    	$('.cellimgdiv',this).css('visibility', 'visible');
		}); 
		tr.mouseout(function() {
	    	$('.cellimgdiv',this).css('visibility', 'hidden');
		});
	});    
		
}

function searchCallback(target, container_selector, url) {

	var target = $(target); 

	if(target.attr('timer')) {
		clearTimeout(target.attr('timer'));
	}
	
	target.attr('timer',setTimeout(function() {
		target.next(".searchajaxloader").show();
		url = url.replace('__FILTER__',escape($(target).realVal()));
		$(container_selector).load(url, null, function() {
			target.next(".searchajaxloader").hide();
			init_events($(container_selector));
			target.removeAttr('timer');
		});
	},
	300));
};

$(document).ready(function(){	
	
	$(".searchfieldinputbase").keydown(function (e) {
	 	if(e.which == 27) {
	 	 	$(e.target).blur();
	 	 	$(e.target).next(".searchajaxloader").hide();
	 	}
	});

	$("#searchcontentsinput").keyup(function (e) {
		var url = content_filter_url;
		var container_selector="#contentslistcontainer";
		searchCallback(e.target, container_selector, url);
	});

	$("#searchprojectsinput").keyup(function (e) {
		var url = "{% url franceculture.views.projectsfilter filter='__FILTER__' is_owner='false' %}";
		var container_selector="#projectslistcontainer";
		searchCallback(e.target, container_selector, url);		
	});
	
	 
	$('.searchfieldinput').each(function(i) {
	     sbox = $(this);
	     if(sbox.val() != '') {
	    	 sbox.attr('defaultText', sbox.val());
	     }
	
	     sbox.focus(function() {
	         box = $(this);
	         if(box.val() == box.attr('defaultText')) {
	             box.val('');
	             box.toggleClass("searchfieldinput");
	         }
	     });
	
	     sbox.blur(function() {
	         box = $(this);
	         if(box.val() == '' && box.attr('defaultText')) {
	             box.val(box.attr('defaultText'));
	             box.toggleClass("searchfieldinput");
	         }
	     });

	     
	});


	init_events(document);


});
</script>

{% endblock %}

{% block css_import %}
{{block.super}}
    <link rel="stylesheet" href="{{BASE_URL}}static/css/workspace.css" type="text/css"/>
{% endblock %}

{% block content %}
<div class="span-24 last" id="allcontentsdiv">
	<div class="span-12" id="contentsdiv">
	    <div class="span-12 last titlediv" >
			<div class="span-8 projectscontentstitle">{% trans "content list" %}</div>
			<div class="span-4 last searchfielddiv" >
			    <div class="searchfield"><input id="searchcontentsinput" class="searchfieldinput searchfieldinputbase" value="{% trans 'search' %}" /><img id="contentsajaxloader" class="searchajaxloader" src="{{MEDIA_URL}}/img/ajax-loader-16x16.gif" alt="loader"/></div>
			</div>
		</div>
		<div class="span-12 last projectscontentsdiv" id="contentslistcontainer">
		{% include "franceculture/partial/contentslist.html" %}
		</div>
	</div>		
	<div class="span-12 last" id="projectsdiv">
		<div class="span-12 last titlediv" >
			<div class="span-8 projectscontentstitle" >{% trans "project list" %}</div>
			<div class="span-4 last searchfielddiv" >
			    <div class="searchfield"><input id="searchprojectsinput" class="searchfieldinput searchfieldinputbase" value="{% trans 'search' %}" /><img id="projectsajaxloader" class="searchajaxloader" src="{{MEDIA_URL}}/img/ajax-loader-16x16.gif" alt="loader"/></div>
			</div>
		</div>
		<div class="span-12 last projectscontentsdiv" id="projectslistcontainer">
		{% include "franceculture/partial/projectslist.html" %}
		</div>
	</div>
</div>
{% endblock %}