{# Se importa el template base #}
{% extends 'MainBundle:Master:template.html.twig' %}

{% block scripts %}
    <link href="{{ asset('bundles/utilities/slider/src/pdfSlider.css') }}" type="text/css" rel="stylesheet" />

    <script type="text/javascript" src="{{ asset('bundles/utilities/slider/src/pdfSlider.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/utilities/drag/greensock/TweenMax.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/utilities/drag/greensock/TimelineMax.min.js') }}"></script>

    <script type="text/javascript">
        $(function($)
        {
            $("#carousel").pdfSlider();
        });
    </script>

    <script>

        var vista='{{ vista }}';
        var boxOrder = {"panelLeft":["c1","c6","c3"],"panelRight":["c7"]};
        if(vista==2){
            boxOrder = {"panelLeft":["c1","c3"],"panelRight":["c6"]};
        }
        var fixSize = false;
	var fixedSizes =0;
	 
        $(function() {
            if (window.innerHeight<700){ 
            {% block initVariables %} 
            {% endblock initVariables %}
            }
            else{
                if (window.innerHeight<850){ 
                {% block initVariables2 %} 
                {% endblock initVariables2 %}
            }else{
                if (window.innerHeight<1080){ 
                {% block initVariables3 %} 
                {% endblock initVariables3 %}
                }else { if (window.innerHeight<2000){ 
                {% block initVariables4 %} 
                {% endblock initVariables4 %}
                }      }                
                        
            }
            }    
               
            //Init the acordeon panes.
            $( "#c1" ).accordion();
            var orden='{{ orden_lectura }}';
            if(orden==1){
                $( "#c2" ).accordion();
            }
            $( "#c4" ).accordion();
            $( "#c3" ).accordion();
            $( "#c5" ).accordion();
            $( "#c6" ).accordion();
            $( "#c7" ).accordion();
            $( "#c8" ).accordion();
            //Atach the boxes to each panel;
            //left panel
            $(boxOrder.panelLeft).each(function(index, element) {
                $("#hrk_drag_content #leftDiv").append($("#hrk_hide #"+element));   
            });
            //right panel
            $(boxOrder.panelRight).each(function(index, element) {
                $("#hrk_drag_content #rightDiv").append($("#hrk_hide #"+element));   
            });
            $("#hrk_hide").remove();
            //Make the boxes sortables
            
            $( "#leftDiv" ).sortable({
                connectWith: "#rightDiv",
                handle: '.ui-accordion-header',
                start: function (e, ui) {
                    sortCajas(); bodyResize ();
                    $(ui.item).find('textarea').each(function () {
                        tinymce.execCommand('mceRemoveEditor', false, $(this).attr('id'));
                    });
                },
                stop: function (e, ui) {
                    sortCajas(); bodyResize ();
                    $(ui.item).find('textarea').each(function () {
                        tinymce.execCommand('mceAddEditor', true, $(this).attr('id'));
                    });
                }
            });
            $( "#rightDiv" ).sortable({
                connectWith: "#leftDiv",
                handle: '.ui-accordion-header',
                start: function (e, ui) {
                    sortCajas(); bodyResize ();
                    $(ui.item).find('textarea').each(function () {
                        tinymce.execCommand('mceRemoveEditor', false, $(this).attr('id'));
                    });
                },
                stop: function (e, ui) {
                    sortCajas(); bodyResize ();
                    $(ui.item).find('textarea').each(function () {
                        tinymce.execCommand('mceAddEditor', true, $(this).attr('id'));
                    });
                } 
            });
            sortCajas();
            //resize the body
            bodyResize ();
            
            $( window ).resize(function() {
                bodyResize ();
                
            });
            $('#button4').click();
            //openViewer(selectedVisor);
        });
        
        function openViewer(p1_url){
            var w = window.open(p1_url, '_blank');
            setTimeout(function(){w.close();}, 50);
        }
	
        //Resize an element
        function resizeElement(id){
            
            $(id).css("height", 0);
            var heightParent = $(id).parent().height();
            $(id).css("height", heightParent+ "px");
            
        }
        
        
	//Order the boxes and save the variable
	function sortCajas(){
            boxOrder.panelLeft=[];
            boxOrder.panelRight=[];
            //Creathe the variable to save
            $("#hrk_drag_content .count .hrk_box").each(function(index, element) {
                if($(element).parent().attr("id")=="leftDiv"){
                    boxOrder.panelLeft.push($(element).attr("id"));
                }
                else
                {
                    boxOrder.panelRight.push($(element).attr("id"));
                }
            });
	}
            
	//Resize the body		
	function bodyResize (){
            $("#body-content").css("height", 0);
            var altoDef = 120;
            var altoPag = $(window).height();
            var final = altoPag -altoDef;
            $("#leftDiv").css("height", final+ "px");
            $("#rightDiv").css("height", final+ "px");
            boxexResize(final);
            {% block moreResize %} 
            {% endblock moreResize%}
        }
	
	//Set the sizes
	function setParameters(order,fixedSize, sizes)
	{
            boxOrder = order;
            fixSize = fixedSize;
            fixedSizes = sizes;
	}
	
	// return if is fixed
	function isFixed(ids)
	{
            var result = false;
            $(fixedSizes.ids).each(function(index, element) {
                if((element == ids)){  
                    result = true;
                }
            });
            return result;
	}
	
        // Retur fixed height
	function getHeight(ids)
	{
            var result =0;
            $(fixedSizes.ids).each(function(index, element) {
                if((element == ids)){
                    result = fixedSizes["heights"][index];
		}
            });
            return result;
        }
	
	//resize all panels
	function boxResizeSide(final, panel)
	{
		var count =0;
		var countFixed =0;
		var fixedheight =0;
		$(panel).each(function(index, element) {
			if(fixSize){
				var fix = isFixed( $(element).attr("id"));
				if(fix){
					var suma = getHeight($(element).attr("id"));
					fixedheight = fixedheight + parseInt(suma);
					countFixed = countFixed +1;
				}
				else{
					count = count +1;
				}
			}
			else{
				count = count +1;
			}
		});
		
		var finalHeight = countFixed *50;
		var totalHeight = parseInt(finalHeight) + parseInt(fixedheight);
		var heightTotal = final - totalHeight;
		var pixels =heightTotal/count;
		$(panel).each(function(index, element) {
			if(fixSize)
			{
				var fix = isFixed( $(element).attr("id"));
				if(fix){
					var suma = getHeight($(element).attr("id"));
					var height = parseInt(suma) +parseInt(50);
					$(element).css("height", (height) + "px");
					$("#content-"+$(element).attr("id")).css("height", (suma)+ "px");
		
				}
				else{
					$(element).css("height", pixels + "px");
					$("#content-"+$(element).attr("id")).css("height", (pixels-50)+ "px");
			
					
		
					
				}
			}
			else
			{
				
				$(element).css("height", pixels + "px");
				$("#content-"+$(element).attr("id")).css("height", (pixels-50)+ "px");
			
				
			}
		});
	}
	
	
	
	
	// Resize all the boxes
	// @paran final = total height
	function boxexResize(final){
            boxResizeSide(final, "#leftDiv .hrk_box" );
            boxResizeSide(final, "#rightDiv .hrk_box" );
	}
        
        
        
        
        
        
    </script>

{% endblock scripts %}
{% block content %}
    {%block more_content %}
    {%endblock more_content %}
    <div id="hrk_drag_content" style="width:100%;height:100%;">
        <div id="leftDiv" class="count" style="width: 30%; height: 100%; float: left;"></div>
        <div id="rightDiv" class="count" style="width: 70%; height: 100%;  float:right;"></div> 
    </div>
    {% if(orden_lectura==false) %}
    <div id="c2" style="display:none; width:100%; height: 95% ; padding: 10px" >
       {% block c21_content %}{% endblock c21_content %}
    </div>
    {% endif %}
    <div id="hrk_hide">
        <div  id="c1" style="width:100%;" class ="hrk_box">
            <h3>  {% block c1_title %}{% endblock c1_title %}</h3>
               <div id="content-c1" >{% block c1_content %}{% endblock c1_content %}</div>
        </div>
        {% if(orden_lectura==true) %}
        <div id="c2" style="width:100%;" class ="hrk_box">
            <h3>{% block c2_title %}{% endblock c2_title %}</h3>
            <div id="content-c2" >{% block c2_content %}{% endblock c2_content %}</div>
        </div>
        {% endif %}
        
        <div id="c3" style="width:100%;" class ="hrk_box">
            <h3>{% block c3_title %}{% endblock c3_title %}</h3>
               <div id="content-c3">{% block c3_content %}{% endblock c3_content %}</div>
        </div>
        <div  id="c4" style="width:100%;" class ="hrk_box">
            <h3>{% block c4_title %}{% endblock c4_title %}</h3>
               <div id="content-c4">{% block c4_content %}{% endblock c4_content %}</div>
        </div>
        <div id="c5" style="width:100%;" class ="hrk_box">
            <h3>{% block c5_title %}{% endblock c5_title %}</h3>
               <div id="content-c5">{% block c5_content %}{% endblock c5_content %}</div>
        </div>
        <div id="c6" style="width:100%;" class ="hrk_box">
            <h3>{% block c6_title %}{% endblock c6_title %}</h3>
               <div id="content-c6">{% block c6_content %}{% endblock c6_content %}</div>
        </div>
        <div id="c7" style="width:100%;" class ="hrk_box">
            <h3>{% block c7_title %}{% endblock c7_title %}</h3>
               <div id="content-c7">{% block c7_content %}{% endblock c7_content %}</div>
        </div>
        <div id="c8" style="width:100%;" class ="hrk_box">
            <h3>{% block c8_title %}{% endblock c8_title %}</h3>
               <div  id="content-c8" >{% block c8_content %}{% endblock c8_content %}</div>
        </div>
    </div>
    {% block end_content %}

    {% endblock end_content %}
{% endblock content %}