<head>
   <title>VERSIONS - visualisation</title>
    <meta charset="UTF-8">
    <meta name="keywords" content="versions, challenge the retinal imperative, art, concept, dario zeo, book, reorganization, appropriation, montage, tank, artist, artwork, Dario Zeo, dariozeo, dario zeo, Zeo, HGK" >
    <meta name="description" content="VERSIONS is a changing text montage that exists in a variety of physical and digital books. The text consists of appropriated text fragments, which are permanently rearranged by computer scripts. There is no single form of VERSIONS but a multitude of non-hierarchical variants. This project is a transparent open source concept and freely accessible." >
    <meta name="url" content="http://versions.solutions/visual.php" >
</head>

<?php
//get stylevariables first
require_once('stylevariables.php');
?>


<html>
    
    <style>
        body {
            left:50%;
            width: 150%;
            height: 0px;
            background-color: <?php echo $background_color;?>;
        }
        
        .container_rectangles {
            width: 150%;
            height: auto;
            position: relative;
            top:50px;
            margin:auto;
            height: auto;
        }
        
        .click {
            position: fixed;
            left:0px;
            top:0px;
            width: 100%;
            height: 100%;
            background-color: transparent;
            z-index: 2;
        }
    </style>
    
    <body>
        <!--echo rectangles within container_rectangles-->
        <div class="container_rectangles">
            <?php
                //set dynamic function for all rectange-<div>
                function rectangle($number, $opacity, $width, $height, $color, $margin){
                    //set CSS-style with variables
                    echo '<style>
                    .rectangle'. $number.'{
                    opacity:'. $opacity.';
                    position:relative;
                    background-color: '. $color.';
                    width: '. $width.'px;
                    height: '. $height.'px;
                    float:left;
                    margin:'. $margin.'px;
                    }</style>';
                    //echo recangle
                    echo '<div class="rectangle'. $number.'"></div>';
                }
                
                //call rectangle function 270 times + count up numbers used to call array-data/colors from stylevariables.php
                for ($r_count = 0; $r_count <= 269; $r_count++) {
                    rectangle(($r_count+1), $opacity, strlen($array_fragment[$r_count])*1.1, strlen($array_fragment[$r_count])*1.1, ${'color' . ($r_count+1)}, strlen($array_fragment[$r_count])/-3.5);
                }
            ?>
        </div>
        <!--refresh-click on screen-->
        <a href="visual.php">
            <div class="click">
            </div>
        </a>
    </body>
    
</html>