adatta02 · August 1, 2012 04:42
diff --git a/recursive_underscore_template.html b/recursive_underscore_template.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="underscore.js"></script>    
 <style>

 .container {
  position: relative;
  margin-bottom: 20px;
 }

 #container {
  position: relative;
  margin: auto;
 }

 .fib-box {
  position: absolute;
  top: 0px;
  left: 0px;
  background: rgba(0,68,242,0.15);
  border: 1px solid rgba(0,0,0,0.20); 
 }

 .header {
  padding-bottom: 10px;
 }

 </style>
  </head>
  <body> 
    
    <div class="header">
        <h3>Render Fibonacci With UnderscoreJS</h3>
        <form id="updateCount">
            <input type="text" value="15" id="fibSequence" />
            <input type="submit" value="Update" />
            | <a href="#cascade" id="arrangeCascade">Cascade Boxes</a>
        </form>
    </div>
    
    <div class="container">
    <div id="container">
    
    </div>    
    </div>
    
 <script type="text/template" id="template">
 <% if(depth){ %>
 <div class='fib-box' data-depth='<%= depth %>' style='width: <%= val %>px; height: <%= val %>px;'></div>
 <% print(template(getFibObj(depth-1))) %>
 <% } %>
 </script>
    
 <script type="text/javascript">
    
 var template;
 var pixelArray;

 $(document).ready(function(){
 	
    template = _.template($("#template").text());

    $("#updateCount").submit( function(){
    
        $("#container").html( template( getFibObj($("#fibSequence").val()) ) );
        
        var width = parseInt($("#container .fib-box:first").css("width").replace("px", ""));
        $("#container").css( {width: width, 'min-height': width} );
    	
        pixelArray = [ ];
        for(var i=0; i < width; i++){        	
        	var arr = [];
        	for(var j=0; j < width; j++){ arr.push(0); }        	
        	pixelArray.push( arr );
        }
        
    	return false;
    });
        
    $("#arrangeCascade").toggle( function(){
    	sortFibBoxes();
        $(this).text("Stack Boxes");
    }, function(){
        $(".fib-box:gt(0)").each( function(){
            $(this).animate( {"left": 0, "top": 0}, 3000 );
        });
    	$(this).text("Cascade Boxes");
    });
    
    $("#updateCount").submit();
 });

 function sortFibBoxes(){	
 	$(".fib-box:gt(0)").each( function(){
 		fitSquare( $(this) );
 	});	
 }

 function fitSquare( sq ){
 	
    var width = parseInt( $(sq).css("width").replace("px", "") );
    var hasSpace = false;    
    
    for(var i = 0; i < pixelArray.length; i++){
    	
        for(var j = 0; j < pixelArray[i].length; j++){        	
        	
            if( pixelArray[i][j] == 0 
            		&& (pixelArray.length - i) - width >= 0 
            		&& (pixelArray[i].length - j) - width >= 0 ){
            	
                hasSpace = checkHasSpace( i, j, width );
                console.log( hasSpace );
                
                if( hasSpace ){
                	
                	for(var ix = i; ix < i + width; ix++){
                        for(var jx = j; jx < j + width; jx++){
                        	pixelArray[ix][jx] = 1;
                        }
                	}
                	
                	$(sq).animate( {"left": i, "top": j}, 3000 );
                	return true;
                }
            }
            
        }
    }
 	
 }

 function checkHasSpace( ix, jx, width ){
 	
    for(var i = ix; i < ix + width; i++){
        for(var j = jx; j < jx + width; j++){
            if( pixelArray[i][j] == 1 ){
                return false;
            }
        }
    }
    
    return true;
 }

 function getFibObj(i){
 	return {depth: i, val: fib(i)};
 }

 function fib(i){
 	return ( i == 0 || i == 1 ) ? i : fib(i-1) + fib(i-2);
 }
      
 </script>
    
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="underscore.js"></script>
	<style>

	.container {
	position: relative;
	margin-bottom: 20px;
	}

	#container {
	position: relative;
	margin: auto;
	}

	.fib-box {
	position: absolute;
	top: 0px;
	left: 0px;
	background: rgba(0,68,242,0.15);
	border: 1px solid rgba(0,0,0,0.20);
	}

	.header {
	padding-bottom: 10px;
	}

	</style>
	</head>
	<body>

	<div class="header">
	<h3>Render Fibonacci With UnderscoreJS</h3>
	<form id="updateCount">
	<input type="text" value="15" id="fibSequence" />
	<input type="submit" value="Update" />
	\| <a href="#cascade" id="arrangeCascade">Cascade Boxes</a>
	</form>
	</div>

	<div class="container">
	<div id="container">

	</div>
	</div>

	<script type="text/template" id="template">
	<% if(depth){ %>
	<div class='fib-box' data-depth='<%= depth %>' style='width: <%= val %>px; height: <%= val %>px;'></div>
	<% print(template(getFibObj(depth-1))) %>
	<% } %>
	</script>

	<script type="text/javascript">

	var template;
	var pixelArray;

	$(document).ready(function(){

	template = _.template($("#template").text());

	$("#updateCount").submit( function(){

	$("#container").html( template( getFibObj($("#fibSequence").val()) ) );

	var width = parseInt($("#container .fib-box:first").css("width").replace("px", ""));
	$("#container").css( {width: width, 'min-height': width} );

	pixelArray = [ ];
	for(var i=0; i < width; i++){
	var arr = [];
	for(var j=0; j < width; j++){ arr.push(0); }
	pixelArray.push( arr );
	}

	return false;
	});

	$("#arrangeCascade").toggle( function(){
	sortFibBoxes();
	$(this).text("Stack Boxes");
	}, function(){
	$(".fib-box:gt(0)").each( function(){
	$(this).animate( {"left": 0, "top": 0}, 3000 );
	});
	$(this).text("Cascade Boxes");
	});

	$("#updateCount").submit();
	});

	function sortFibBoxes(){
	$(".fib-box:gt(0)").each( function(){
	fitSquare( $(this) );
	});
	}

	function fitSquare( sq ){

	var width = parseInt( $(sq).css("width").replace("px", "") );
	var hasSpace = false;

	for(var i = 0; i < pixelArray.length; i++){

	for(var j = 0; j < pixelArray[i].length; j++){

	if( pixelArray[i][j] == 0
	&& (pixelArray.length - i) - width >= 0
	&& (pixelArray[i].length - j) - width >= 0 ){

	hasSpace = checkHasSpace( i, j, width );
	console.log( hasSpace );

	if( hasSpace ){

	for(var ix = i; ix < i + width; ix++){
	for(var jx = j; jx < j + width; jx++){
	pixelArray[ix][jx] = 1;
	}
	}

	$(sq).animate( {"left": i, "top": j}, 3000 );
	return true;
	}
	}

	}
	}

	}

	function checkHasSpace( ix, jx, width ){

	for(var i = ix; i < ix + width; i++){
	for(var j = jx; j < jx + width; j++){
	if( pixelArray[i][j] == 1 ){
	return false;
	}
	}
	}

	return true;
	}

	function getFibObj(i){
	return {depth: i, val: fib(i)};
	}

	function fib(i){
	return ( i == 0 \|\| i == 1 ) ? i : fib(i-1) + fib(i-2);
	}

	</script>

	</body>
	</html>