Index: /Dev/trunk/classes/DisplayStep.php
===================================================================
--- /Dev/trunk/classes/DisplayStep.php	(revision 142)
+++ /Dev/trunk/classes/DisplayStep.php	(revision 142)
@@ -0,0 +1,55 @@
+<?php
+
+/**
+ * DisplayStep object is the visual representation of an existing step in a pipeline, to be displayed in the pipeline sequencer.
+ * Note: Can also be used for creation icons in the Toolbox, as long as no reference to an existing step object is assigned.
+ * 
+ * IMPORTANT: DisplayStep() should only be used to graphically display a certain Step object. 
+ * It only contains a reference to an existing object ($reference), and is not the database object itself!
+ * General idea: handle real objects privately, only generate DisplaySteps() based on that data, not the other way around.
+ *
+ * @author tschipper
+ */
+class DisplayStep {
+
+//put your code here
+    private $type;
+    private $reference;
+    public $imageURL;
+    public $selected = false;
+    public $name;
+
+    public function __construct($t, $ref=null, $n) {
+        
+        $this->type = $t;
+        $this->reference = $ref;
+        $this->name = $n;
+        
+        switch ($this->type) {
+            case "Questionnaire":
+                $this->imageURL = "images/icons/questionnaire2.png";
+                break;
+            case "Dashboard":
+                $this->imageURL = "images/icons/dashboard2.png";
+                break;
+            case "Application":
+                $this->imageURL = "images/icons/application2.png";
+                break;
+            case "Notice":
+                $this->imageURL = "images/icons/notice2.png";
+                break;
+            default:
+                $this->imageURL = null;
+                break;
+        }
+        
+        //output a display object
+        echo '<div class="displayStep" style="background-image: url(\'';
+        echo $this->imageURL;
+        echo '\');" ><p>'.$this->name.'</p></div>'."\n";
+        
+    }
+
+}
+
+?>
Index: /Dev/trunk/classes/Logo.php
===================================================================
--- /Dev/trunk/classes/Logo.php	(revision 142)
+++ /Dev/trunk/classes/Logo.php	(revision 142)
@@ -0,0 +1,26 @@
+<?php
+
+/*
+ * To change this template, choose Tools | Templates
+ * and open the template in the editor.
+ */
+
+/**
+ * Description of Logo
+ *
+ * @author tschipper
+ */
+class Logo {
+    
+    // hardcoded logo div, image is defined in stylesheet. (#logo background:"";)
+    public function __construct() {
+        echo '
+            <div id="logo"><a href="index.php">Research Tool</a></div>
+';
+    
+    }
+    
+    
+}
+
+?>
Index: /Dev/trunk/classes/StyleSheet.php
===================================================================
--- /Dev/trunk/classes/StyleSheet.php	(revision 142)
+++ /Dev/trunk/classes/StyleSheet.php	(revision 142)
@@ -0,0 +1,32 @@
+<?php
+
+/*
+ * To change this template, choose Tools | Templates
+ * and open the template in the editor.
+ */
+
+/**
+ * Standard stylesheet class
+ *
+ * @author tschipper
+ */
+class StyleSheet {
+
+    public $filename; // includes path
+
+    public function __construct($styleName) {
+
+        // call new StyleSheet("standard") to load css/standard.css
+        $this->path = "css/" . $styleName . ".css";
+
+        echo '<link rel="Stylesheet" type="text/css" href="' . $this->path . '"/>';
+        echo "\n";
+    }
+
+    public function ChangeStyle($styleName) {
+        $this->path = "css/" . $styleName . ".css";
+    }
+
+}
+
+?>
Index: /Dev/trunk/css/awesome.css
===================================================================
--- /Dev/trunk/css/awesome.css	(revision 141)
+++ /Dev/trunk/css/awesome.css	(revision 142)
@@ -557,2 +557,121 @@
     color:white;
 }
+
+
+/*
+#pipelineFrame{
+    height: 12em;
+    width: 96em;
+    display: block;
+    background-image: url('../images/bg/pipelineFrameBG.png');
+    background-color: #e3eff3;
+}
+
+.pipelineFrame .pipelineObject {
+    width: 10em;
+    height: 10em;
+    margin: 1em auto 1em auto;
+    text-align: center;
+}
+*/
+
+/*
+*
+*
+*   Horizontal sequencer styling
+*
+*
+*/
+
+#sequencer {
+    width: 100%;
+    margin: 0 auto auto auto;
+    background-image: url('../images/bg/sequencerBG.png');
+    background-position: bottom;
+    background-repeat: repeat-x;
+}
+
+#sequencer .title {
+    height: 1em;
+    margin-bottom: 0.5em;
+    margin-top:0.5em;
+    margin-left: 1em;
+    font-size: 1.2em;
+    color: #FFF;
+    
+}
+
+#sequencer #seqContent {
+    height: 10em;
+    margin-bottom: 0.5em;
+    background-image: url('../images/bg/sequencerContentBG.png');
+    /*background-position: top;
+    background-color: #dddddd;*/
+    border: 1px solid #ddd;
+    -moz-border-radius: 0.5em;
+    border-radius: 0.5em;
+    padding: 0.5em;
+}
+
+#sequencer #controls {
+    width: auto;
+    text-align: right;
+    margin-bottom: -0.5em;
+}
+
+#seqContent .displayStep {
+    /*height: 140px;*/
+    width: 100px;
+    margin: 10px 0 0 0;
+    background-repeat: no-repeat;
+    float: left;
+    text-align: center;
+}
+
+#seqContent .displayStep p{
+    margin-top: 105px;
+    font-weight: normal;
+    font-size: 0.875em;
+    
+}
+
+#seqContent .divider {
+    width: 10px;
+    height: 100px;
+    margin: 10px 5px 0 10px;
+    background-image: url('../images/ui/sequencerDivider.png');
+    float: left;
+}
+
+/*
+    Toolbox
+*/
+
+#toolbox {
+    width: 40%;
+    float: left;
+    background-image: url('../images/bg/sequencerBG.png');
+}
+
+#toolbox .title {
+    height: 1em;
+    margin-bottom: 0.5em;
+    margin-top:0.5em;
+    margin-left: 1em;
+    font-size: 1.2em;
+    color: #FFF;
+}
+
+#toolbox .displayStep {
+    height: 140px;
+    width: 100px;
+    margin: 0 5px 0 5px;
+    background-repeat: no-repeat;
+    float: left;
+    text-align: center;
+}
+
+#toolbox .displayStep p {
+    margin-top: 105px;
+    color: #FFF;
+}
Index: /Dev/trunk/index.php
===================================================================
--- /Dev/trunk/index.php	(revision 141)
+++ /Dev/trunk/index.php	(revision 142)
@@ -25,5 +25,5 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <title>Facilitator</title>
-        <?php new StyleSheet(); ?>
+        <?php new StyleSheet("awesome"); ?>
         <script type="text/javascript" src="js/menu.js"></script>
     </head>
Index: /Dev/trunk/pipelineEditor.php
===================================================================
--- /Dev/trunk/pipelineEditor.php	(revision 142)
+++ /Dev/trunk/pipelineEditor.php	(revision 142)
@@ -0,0 +1,107 @@
+<?php
+require 'classes/master.php'; //should be at top of every page
+
+/*
+  if(isset($_SESSION['username'])){   //user is logged in
+  //get pipeline contents from database, and store in displayObject() array "pipelineSteps"
+  //nu nog even gewoon een hardcoded workaround
+  foreach ()
+
+  }
+ * */
+
+// generate a random array of pipeline contents
+$displaySteps = array();    // array containing a number of random-generated stings "$type", to fill up the sequencer
+$numSteps = 9;              // number of steps to random-generate for testing purposes.
+$maxNumSteps = 9;           // maximum number of steps that can be displayed in the sequencer (without scrollbars, at current)
+
+for ($n = 1; $n <= $numSteps; $n++) {   // fill the array of types
+    $rnd = rand(1, 4);
+    switch ($rnd) {
+        case 1:
+            $type = "Dashboard";
+            break;
+        case 2:
+            $type = "Questionnaire";
+            break;
+        case 3:
+            $type = "Notice";
+            break;
+        case 4:
+            $type = "Application";
+            break;
+        default:
+            $type = "Questionnaire";
+            break;
+    }
+    $displaySteps[] = $type;
+}
+
+$pipelineName = "Test pipeline";
+?>
+
+<!--
+To change this template, choose Tools | Templates
+and open the template in the editor.
+-->
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <title></title>
+        <?php new StyleSheet("awesome"); ?>
+        <script type="text/javascript" src="js/menu.js"></script>
+        <script type="text/javascript" src="js/jquery.jps"></script>
+    </head>
+    <body>
+        <div id="logo">
+            <?php new Logo(); ?>
+        </div>
+
+        <div id="wrapper">
+            <div id="content">
+                <form action="pipelineEditor.php" method="POST">
+                    
+                    <fieldset id="sequencer">
+                        
+                        <div class="title">Name: <?php echo $pipelineName; ?></div>
+
+                        <div id="seqContent">
+                            <?php
+                            $n = 0;
+                            foreach ($displaySteps as $displayStep) {
+                                if ($n <= $maxNumSteps) {
+                                    $n++;
+                                    new DisplayStep($displayStep, null, "Step " . $n);
+                                    if ($n != $numSteps){
+                                        echo "<div class='divider'></div>";
+                                    }
+                                }
+                            }
+                            ?>                                
+                        </div>
+
+                        <div id="controls">
+                            <input type="submit" name="moveSelectedLeft" value="< Move" class="surveyButton" />
+                            <input type="submit" name="moveSelectedRight" value="Move >" class="surveyButton" />
+                            <input type="submit" name="editSelected" value="Edit step" class="surveyButton" />
+                            <input type="submit" name="deleteSelected" value="Delete step" class="surveyButton" />
+                            <input type="hidden" name="selectedStep" />
+                        </div>
+
+                    </fieldset>
+                    
+                    <br />
+                    <fieldset id="toolbox">
+                        <div class="title">Toolbox</div>
+                        <?php
+                            new DisplayStep("Questionnaire", null, "Questionnaire");
+                            new DisplayStep("Notice", null, "Notice");
+                            new DisplayStep("Application", null, "Application");
+                            new DisplayStep("Dashboard", null, "Dashboard");
+                        ?>
+                    </fieldset>
+                </form>
+            </div>
+    </body>
+</html>
