<head>
    <title>VERSIONS - online book</title>
    <meta charset="UTF-8">
    <!--get styles for HTML-intro and php-content-->
    <link rel="stylesheet" href="stylesheet_web.css">
    <meta name="keywords" content="versions, challenge the retinal imperative, art, concept, dario zeo, book, reorganization, appropriation, montage, tank" >
    <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." >
    

    <!--content-navigation: smooth scroll java script-->
    <script>
        !function(t,e){"function"==typeof define&&define.amd?define([],e()):"object"==typeof module&&module.exports?module.exports=e():function n(){document&&document.body?t.zenscroll=e():setTimeout(n,9)}()}(this,function(){"use strict";var t=function(t){return t&&"getComputedStyle"in window&&"smooth"===window.getComputedStyle(t)["scroll-behavior"]};if("undefined"==typeof window||!("document"in window))return{};var e=function(e,n,o){n=n||999,o||0===o||(o=9);var i,r=function(t){i=t},u=function(){clearTimeout(i),r(0)},c=function(t){return Math.max(0,e.getTopOf(t)-o)},a=function(o,i,c){if(u(),0===i||i&&i<0||t(e.body))e.toY(o),c&&c();else{var a=e.getY(),f=Math.max(0,o)-a,s=(new Date).getTime();i=i||Math.min(Math.abs(f),n),function t(){r(setTimeout(function(){var n=Math.min(1,((new Date).getTime()-s)/i),o=Math.max(0,Math.floor(a+f*(n<.5?2*n*n:n*(4-2*n)-1)));e.toY(o),n<1&&e.getHeight()+o<e.body.scrollHeight?t():(setTimeout(u,99),c&&c())},9))}()}},f=function(t,e,n){a(c(t),e,n)},s=function(t,n,i){var r=t.getBoundingClientRect().height,u=e.getTopOf(t)+r,s=e.getHeight(),l=e.getY(),d=l+s;c(t)<l||r+o>s?f(t,n,i):u+o>d?a(u-s+o,n,i):i&&i()},l=function(t,n,o,i){a(Math.max(0,e.getTopOf(t)-e.getHeight()/2+(o||t.getBoundingClientRect().height/2)),n,i)};return{setup:function(t,e){return(0===t||t)&&(n=t),(0===e||e)&&(o=e),{defaultDuration:n,edgeOffset:o}},to:f,toY:a,intoView:s,center:l,stop:u,moving:function(){return!!i},getY:e.getY,getTopOf:e.getTopOf}},n=document.documentElement,o=function(){return window.scrollY||n.scrollTop},i=e({body:document.scrollingElement||document.body,toY:function(t){window.scrollTo(0,t)},getY:o,getHeight:function(){return window.innerHeight||n.clientHeight},getTopOf:function(t){return t.getBoundingClientRect().top+o()-n.offsetTop}});if(i.createScroller=function(t,o,i){return e({body:t,toY:function(e){t.scrollTop=e},getY:function(){return t.scrollTop},getHeight:function(){return Math.min(t.clientHeight,window.innerHeight||n.clientHeight)},getTopOf:function(t){return t.offsetTop}},o,i)},"addEventListener"in window&&!window.noZensmooth&&!t(document.body)){var r="history"in window&&"pushState"in history,u=r&&"scrollRestoration"in history;u&&(history.scrollRestoration="auto"),window.addEventListener("load",function(){u&&(setTimeout(function(){history.scrollRestoration="manual"},9),window.addEventListener("popstate",function(t){t.state&&"zenscrollY"in t.state&&i.toY(t.state.zenscrollY)},!1)),window.location.hash&&setTimeout(function(){var t=i.setup().edgeOffset;if(t){var e=document.getElementById(window.location.href.split("#")[1]);if(e){var n=Math.max(0,i.getTopOf(e)-t),o=i.getY()-n;0<=o&&o<9&&window.scrollTo(0,n)}}},9)},!1);var c=new RegExp("(^|\\s)noZensmooth(\\s|$)");window.addEventListener("click",function(t){for(var e=t.target;e&&"A"!==e.tagName;)e=e.parentNode;if(!(!e||1!==t.which||t.shiftKey||t.metaKey||t.ctrlKey||t.altKey)){if(u){var n=history.state&&"object"==typeof history.state?history.state:{};n.zenscrollY=i.getY();try{history.replaceState(n,"")}catch(t){}}var o=e.getAttribute("href")||"";if(0===o.indexOf("#")&&!c.test(e.className)){var a=0,f=document.getElementById(o.substring(1));if("#"!==o){if(!f)return;a=i.getTopOf(f)}t.preventDefault();var s=function(){window.location=o},l=i.setup().edgeOffset;l&&(a=Math.max(0,a-l),r&&(s=function(){history.pushState({},"",o)})),i.toY(a,null,s)}}},!1)}return i});
    </script>
    <!-- End of SMOOTH SCROLL -->
</head>

<html>

    <!--get stylevariables and db data as arrays first-->
    <?php require_once('stylevariables.php');?>
    
    <!--separate styles not included in stylesheet_web.php-->
    <style>
        .background{
            width:100%;
            height:100%;
            position:fixed;
            left:0px;
            top:0px;
            background-color:<?php echo $background_color;?>;
            z-index:-2;
        }
        
        .canvas{
            left:-32px;
            top:-20px;
            width:400px;
            height:auto;
            padding: 30px 55px 100px 30px;
            background-color: rgba(255, 255, 255, 0.75);
            position:absolute;
        }
    </style>
    
    
    <!--background drawings-->    
    <div class="background">
        <?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), $opacitystrlen($array_fragment[$r_count])/1.2strlen($array_fragment[$r_count])/1.2, ${'color' . ($r_count+1)}, strlen($array_fragment[$r_count])/-3.3);
            } 
        
?>
    </div>
    
    
    <!--section text in front-->
    <body>
        <!--background white canvas for text-->
        <div class="canvas">  
        
        
        <!----------------------------------->
        <!--html intro: first part manually-->
        <!----------------------------------->
        
        <!--title-->
        <div class ="book_title" id="title" style="font-size:22px;">
            CHALLENGE THE RETINAL IMPERATIVE
        </div>
        
        <div class ="book_title"><a href="index.php" style="text-decoration: none; color:black;">
            VERSIONS</a><br>
        </div>
        
        <div class ="book_title" style="font-size:22px;">
            one of 5.2664 x 10<sup>107</sup>
        </div>
        <br><br>
        
        
        <!------------------------------------>
        <!--php content starts---------------->
        <!--echoing and styling data from DB-->
        <!------------------------------------>
        
        <?php
            $check_count 
0//counter count echoed elements
            
$check_count_numbers=0//counter count echoed numbers
            
$count 0//counter while loop text fragments
            
$pos_in_array 0//counter array position
            
            
            //while there is data in arrays keep looping
            
while ($count < (count($array_fragment))){
                
$result_fragment ''//clear $result_fragment => gets loaded each time
                
$result_number '';
                
                
//case text type is chapter title => style: container center and .chapter_title
                
if(($array_chapter[$pos_in_array] == 'GEFÜGE' && $array_type[$pos_in_array] == 'chapter_title')
                xor (
$array_chapter[$pos_in_array] == 'VERORTUNG' && $array_type[$pos_in_array] == 'chapter_title')
                xor (
$array_chapter[$pos_in_array] == 'HIER' && $array_type[$pos_in_array] == 'chapter_title')
                xor (
$array_chapter[$pos_in_array] == 'LOVE' && $array_type[$pos_in_array] == 'chapter_title')
                xor (
$array_chapter[$pos_in_array] == 'ICH;ICH' && $array_type[$pos_in_array] == 'chapter_title')){
                    if(
$array_fragment[$pos_in_array] == 'GEFÜGE'){$link '<div id="gefüge" style="margin-top: -70px;">';}//ad anchor to chapter titles
                    
elseif($array_fragment[$pos_in_array] == 'VERORTUNG'){$link '<div id="verortung">';}
                    elseif(
$array_fragment[$pos_in_array] == 'HIER'){$link '<div id="hier">';}
                    elseif(
$array_fragment[$pos_in_array] == 'LOVE'){$link '<div id="love">';}
                    elseif(
$array_fragment[$pos_in_array] == 'ICH;ICH'){$link '<div id="ich">';}
                    
$class_element 'chapter_title';
                    
//style $result_fragment
                    
$result_fragment '<div class="container_center">' '<div class="' $class_element '">' $link $array_fragment[$pos_in_array] . '</div>' '</div>' '</div>';
                    
$pos_in_array++;
                    
$count++;
                    
$check_count++;
                }
                
                
//case text type is preface => style: container center and .preface
                
elseif(($array_chapter[$pos_in_array] == 'GEFÜGE' && $array_type[$pos_in_array] == 'preface')
                    xor (
$array_chapter[$pos_in_array] == 'VERORTUNG' && $array_type[$pos_in_array] == 'preface')
                    xor (
$array_chapter[$pos_in_array] == 'HIER' && $array_type[$pos_in_array] == 'preface')
                    xor (
$array_chapter[$pos_in_array] == 'LOVE' && $array_type[$pos_in_array] == 'preface')
                    xor (
$array_chapter[$pos_in_array] == 'ICH;ICH' && $array_type[$pos_in_array] == 'preface')
                    xor (
$array_chapter[$pos_in_array] == 'ANMERKUNGEN' && $array_type[$pos_in_array] == 'chapter_title')){
                    
$class_element 'preface';
                    
//style $result_fragment
                    
$result_fragment '<div class="container_center">' '<div class="' $class_element '">' $array_fragment[$pos_in_array] . '</div>' '</div>';
                    
$result_number '<div class="container_numbers">' '<div class="numbers">' $array_id[$pos_in_array] . '</div>' '</div>';
                    
$pos_in_array++;
                    
$count++;
                    
$check_count++;
                    
$check_count_numbers++;
                }
                
                
//case text type is heading => style: container center and .heading
                
elseif(($array_chapter[$pos_in_array] == 'GEFÜGE' && $array_type[$pos_in_array] == 'heading')
                    xor (
$array_chapter[$pos_in_array] == 'VERORTUNG' && $array_type[$pos_in_array] == 'heading')
                    xor (
$array_chapter[$pos_in_array] == 'HIER' && $array_type[$pos_in_array] == 'heading')
                    xor (
$array_chapter[$pos_in_array] == 'LOVE' && $array_type[$pos_in_array] == 'heading')
                    xor (
$array_chapter[$pos_in_array] == 'ICH;ICH' && $array_type[$pos_in_array] == 'heading')){
                    
$class_element 'heading';
                    
//style $result_fragment
                    
$result_fragment '<div class="container_center">' '<div class="' $class_element '">' $array_fragment[$pos_in_array] . '</div>' '</div>';
                    
$pos_in_array++;
                    
$count++;
                    
$check_count++;
                    
$check_count_numbers++;
                }
                
                
//case text type is opposition => style: container center and .opposition
                
elseif(($array_chapter[$pos_in_array] == 'GEFÜGE' && $array_type[$pos_in_array] == 'opposition')
                    xor (
$array_chapter[$pos_in_array] == 'VERORTUNG' && $array_type[$pos_in_array] == 'opposition')
                    xor (
$array_chapter[$pos_in_array] == 'HIER' && $array_type[$pos_in_array] == 'opposition')){
                    
$class_element 'opposition';
                    
//style $result_fragment
                    
$result_fragment '<div class="container_center">' '<div class="' $class_element '">' $array_fragment[$pos_in_array] . '</div>' '</div>';
                    
$result_number '<div class="container_numbers">' '<div class="numbers">' $array_id[$pos_in_array] . '</div>' '</div>';
                    
$pos_in_array++;
                    
$count++;
                    
$check_count++;
                    
$check_count_numbers++;
                }
                
                
//case text type is hier_op_1 => style: container left and .hier_op_1
                
elseif($array_chapter[$pos_in_array] == 'HIER' && $array_type[$pos_in_array] == 'hier_op_1'){
                    
$class_element 'hier_op_1';
                    
//style $result_fragment
                    
$result_fragment '<div class="container_left">' '<div class="' $class_element '">' $array_fragment[$pos_in_array] . '</div>' '</div>';
                    
$result_number '<div class="container_numbers">' '<div class="numbers">' $array_id[$pos_in_array] . '</div>' '</div>';
                    
$pos_in_array++;
                    
$count++;
                    
$check_count++;
                    
$check_count_numbers++;
                }
                
                
//case text type is hier_op_2 => style: container center and .hier_op_2
                
elseif($array_chapter[$pos_in_array] == 'HIER' && $array_type[$pos_in_array] == 'hier_op_2'){
                    
$class_element 'hier_op_2';
                    
//style $result_fragment
                    
$result_fragment '<div class="container_center">' '<div class="' $class_element '">' $array_fragment[$pos_in_array] . '</div>' '</div>';
                    
$result_number '<div class="container_numbers">' '<div class="numbers">' $array_id[$pos_in_array] . '</div>' '</div>';
                    
$pos_in_array++;
                    
$count++;
                    
$check_count++;
                    
$check_count_numbers++;
                }
                
                
//case text type is hier_op_3 => style: container right and .hier_op_3
                
elseif($array_chapter[$pos_in_array] == 'HIER' && $array_type[$pos_in_array] == 'hier_op_3'){
                    
$class_element 'hier_op_3';
                    
//style $result_fragment
                    
$result_fragment '<div class="container_right">' '<div class="' $class_element '">' $array_fragment[$pos_in_array] . '</div>' '</div>';
                    
$result_number '<div class="container_numbers">' '<div class="numbers">' $array_id[$pos_in_array] . '</div>' '</div>';
                    
$pos_in_array++;
                    
$count++;
                    
$check_count++;
                    
$check_count_numbers++;
                }
                
                
//case text type is love_1 => style: container center and .love_1
                
elseif($array_chapter[$pos_in_array] == 'LOVE' && $array_type[$pos_in_array] == 'love_1'){
                    
$class_element 'love_1';
                    
//style $result_fragment
                    
$result_fragment '<div lang = "en">' '<div class="container_center">' '<div class="' $class_element '">' $array_fragment[$pos_in_array] . '</div>' '</div>' '</div>';
                    
$result_number '<div class="container_numbers">' '<div class="numbers">' $array_id[$pos_in_array] . '</div>' '</div>';
                    
$pos_in_array++;
                    
$count++;
                    
$check_count++;
                    
$check_count_numbers++;
                }
                
                
//case text type is love_2 => style: container center and .love_2
                
elseif($array_chapter[$pos_in_array] == 'LOVE' && $array_type[$pos_in_array] == 'love_2'){
                    
$class_element 'love_2';
                    
//style $result_fragment
                    
$result_fragment '<div lang = "en">' '<div class="container_center">' '<div class="' $class_element '">' $array_fragment[$pos_in_array] . '</div>' '</div>' '</div>';
                    
$result_number '<div class="container_numbers">' '<div class="numbers">' $array_id[$pos_in_array] . '</div>' '</div>';
                    
$pos_in_array++;
                    
$count++;
                    
$check_count++;
                    
$check_count_numbers++;
                }
                
                
//case text type is love_3 => style: container center and .love_3
                
elseif($array_chapter[$pos_in_array] == 'LOVE' && $array_type[$pos_in_array] == 'love_3'){
                    
$class_element 'love_3';
                    
//style $result_fragment
                    
$result_fragment '<div lang = "en">' '<div class="container_center">' '<div class="' $class_element '">' $array_fragment[$pos_in_array] . '</div>' '</div>' '</div>';
                    
$result_number '<div class="container_numbers">' '<div class="numbers">' $array_id[$pos_in_array] . '</div>' '</div>';
                    
$pos_in_array++;
                    
$count++;
                    
$check_count++;
                    
$check_count_numbers++;
                }
                
                
//case text type is ich_1 => style: container center and .ich_1
                
elseif($array_chapter[$pos_in_array] == 'ICH;ICH' && $array_type[$pos_in_array] == 'ich_1'){
                    
$class_element 'ich_1';
                    
//style $result_fragment
                    
$result_fragment '<div class="container_center">' '<div class="' $class_element '">' $array_fragment[$pos_in_array] . '</div>' '</div>';
                    
$result_number '<div class="container_numbers">' '<div class="numbers">' $array_id[$pos_in_array] . '</div>' '</div>';
                    
$pos_in_array++;
                    
$count++;
                    
$check_count++;
                    
$check_count_numbers++;
                }
                
                
//case text type is ich_2 => style: container center and .ich_2
                
elseif($array_chapter[$pos_in_array] == 'ICH;ICH' && $array_type[$pos_in_array] == 'ich_2'){
                    
$class_element 'ich_2';
                    
//style $result_fragment
                    
$result_fragment '<div class="container_center">' '<div class="' $class_element '">' $array_fragment[$pos_in_array] . '</div>' '</div>';
                    
$result_number '<div class="container_numbers">' '<div class="numbers">' $array_id[$pos_in_array] . '</div>' '</div>';
                    
$pos_in_array++;
                    
$count++;
                    
$check_count++;
                    
$check_count_numbers++;
                }
                
                
//case text type is ich_3 => style: container center and .ich_3
                
elseif($array_chapter[$pos_in_array] == 'ICH;ICH' && $array_type[$pos_in_array] == 'ich_3'){
                    
$class_element 'ich_3';
                    
//style $result_fragment
                    
$result_fragment '<div class="container_center">' '<div class="' $class_element '">' $array_fragment[$pos_in_array] . '</div>' '</div>';
                    
$result_number '<div class="container_numbers">' '<div class="numbers">' $array_id[$pos_in_array] . '</div>' '</div>';
                    
$pos_in_array++;
                    
$count++;
                    
$check_count++;
                    
$check_count_numbers++;
                }
                
                
//case text type is part of running-text block => style: container center and individual style
                
elseif($array_type[$pos_in_array] == 'running_n'
                    
xor $array_type[$pos_in_array] == 'running_h'
                    
xor $array_type[$pos_in_array] == 'insertion'){
                    
                    
$inner_result '';
                    
$inner_result_number '';
                    while(
$array_type[$pos_in_array] == 'running_n'
                        
xor $array_type[$pos_in_array] == 'running_h'
                        
xor $array_type[$pos_in_array] == 'insertion'){
                        
                        
//set span classes
                        
if($array_type[$pos_in_array] == 'running_n'){
                            
$class_element 'running_n';}
                        elseif(
$array_type[$pos_in_array] == 'running_h'){
                            
$class_element 'running_h';}
                        elseif(
$array_type[$pos_in_array] == 'insertion'){
                            
$class_element 'insertion';}
                        
                        
//concatenate and style $result_fragment
                        
$inner_result $inner_result '<span lang = "en">' '<span class="' $class_element '">' $array_fragment[$pos_in_array] . ' ' '</span>' '</span>';
                        
$inner_result_number $inner_result_number .  '<span class="numbers">' $array_id[$pos_in_array] . '<br>' '</span>';
                        
$pos_in_array++;
                        
$count++;
                        
$check_count++;
                        
$check_count_numbers++;
                    }
                    
$result_fragment '<div class="container_center">' $inner_result '</div>';//concat from inner result
                    
$result_number '<div class="container_numbers">' $inner_result_number '</div>';//concat from inner result
                
}
                
                
//case text type is notes
                
elseif($array_type[$pos_in_array] == 'notes'){
                    
$class_element 'notes';
                    
//style $result_fragment
                    
$result_fragment '<div class="container_center"><div class="chapter_title" style="right:306px; top: 20px;"><div id="bibliography">BIBLIOGRAPHY</div></div></div>' '<div class="container_center">' '<div class="' $class_element '">' $array_fragment[$pos_in_array] . '</div>' '</div>';
                    
$pos_in_array++;
                    
$count++;
                    
$check_count++;
                }
                
                
// echo styled single or styled concatenated result
                
echo $result_number;
                echo 
$result_fragment;  
            }
        
?>
        
        
        <!-------------------->
        <!--end of book HTML-->
        <!-------------------->
        
        <!--credits-->
        <br><br><br><br><br><br><br><br><br><br><br>
        <div class="container_left">
            <div class="chapter_title"style="text-align:left; left:165px; top:30px;">
                <div id="credits">
                    CREDITS
                </div>
            </div>
        </div>
        
        <div class ="small_title">
            <br><br><br><br>
            DARIO ZEO
            <br>research, concept, text montage, programming and design
            <br><br><br>
            SUPPORT
            <br>M.A. / J.B. / C.B. / A.D.F. / M.D. / G.F. / M.F. /
            P.G. / C.H. M.H. / J.H. / C.H. / E.H. / K.K. / J.K. / M.K. / M.K. 
            <br>
            H.J.K. / T.L. / M.L. / L.L. / B.M. / R.M. / L.M. / A.M. / I.N.
            <br>
            V.O. / M.P. / R.R. / M.S. / D.S. / R.S. / S.S. / S.S. / K.S. 
            <br> N.S. / A.S. / G.S. /
            S.S. / A.S. / L.M.T. / J.V. / F.W.
            <br>L.W. / D.W. / L.W. / S.W. / M.Z.
            <br><br><br>
            APPROPRIATED MATERIAL
            <br>
            279 text fragments
            <br>
            from 69 texts, such as
            <br>
            essays, lyrics, poems, novels, interviews, artworks
            <br>
            written by 37 authors (A-Z)
            <br>
            from 1969-2017
            <br><br><br>
            Basel, from 2018 onwards
            <br>
            No rights reserved
            <br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
        
        
        <!--outro-->
        <div class="container_left">
            <div class="chapter_title" style="text-align:left; left:79px;"  id="outro">
                OUTRO
            </div>
        </div>
        
        <div class ="outro">
            <br><br><br><br>
            <b>für den Text</b>
            <br><br>
            Quellen, nicht die der Autorität<br>sondern der Freundschaft:
            <br>keine Garantien aber mit
            <br>einer Art im Vorbeigehen erstatteten Grusses
            <br>einem Augenblick der Wollust des Verstehens
            <br><br>Hinweise auf Gelesenes, Gehörtes
            <br>Instanz ist kein anderer als der Ort
            <br><br>wenn die Schreiberin* dem Subjekt hier ihre Kultur leiht
            <br>so vermittelt das Subjekt
            <br>im Gegenzug die Unschuld des Imaginären
            <br>gleichgültig gegenüber den Gepflogenheiten
            <br><br>*writer
        </div>
        
        
        <!--contents with anchor links-->
        <div class ="contents">
            <a href="#title" style="text-decoration: none; color:white;">
                top &#8593
            </a><br><br>
            <a href="#gefüge" style="text-decoration: none; color:white;">
                GEFÜGE
            </a><br>
            <a href="#verortung" style="text-decoration: none; color:white;">
                VERORTUNG
            </a><br>
            <a href="#hier" style="text-decoration: none; color:white;">
                HIER
            </a><br>
            <a href="#love" style="text-decoration: none; color:white;">
                LOVE
            </a><br>
            <a href="#ich" style="text-decoration: none; color:white;">
                ICH;ICH
            </a><br>
            <a href="#bibliography" style="text-decoration: none; color:white;">
                BIBLIOGRAPHY
            </a><br>
            <a href="#credits" style="text-decoration: none; color:white;">
                CREDITS
            </a><br>
            <a href="#outro" style="text-decoration: none; color:white;">
                OUTRO
            </a><br><br>
            <a href="web.php" style="text-decoration: none; color:white;">
                reorganize &#8594
            </a><br>
            
        </div> 
    </div> 
</body>
 
</html>