Changeset 238

Timestamp:

Mar 5, 2010, 3:21:52 PM (14 years ago)

Author:

duh

Message:

Refectored version of the wizard

• initial template page has been removed, now is a generic 'start' page where one (in the future) may create a new study, or load and modify an already stored study
• study page incorporates study template select element, but does not yet incorporate the study template fields
• subjects page now allows creation of subjects based on a template. This change also implied the study page altogether had to change into a seperate table entity. Now the the page lists as many tables as unique templates have been selected. These tables contain all subjects that were added using that particular template. NOTE: data is not stored yet, due to the fact that templateEntity does not work properly yey (key/value pairs need to be set correctly when calling the setTemplate method)
• the JavaScript? now handles multiple tables in a page as well, and automatically initializes any underlying slider div if that is required

Location:

trunk

Files:

• grails-app/controllers/dbnp/studycapturing/WizardController.groovy (modified) (11 diffs)
• grails-app/domain/dbnp/studycapturing/Template.groovy (modified) (3 diffs)
• grails-app/domain/dbnp/studycapturing/TemplateEntity.groovy (modified) (5 diffs)
• grails-app/domain/dbnp/studycapturing/TemplateFieldListItem.groovy (modified) (1 diff)
• grails-app/domain/dbnp/studycapturing/TemplateFieldType.groovy (modified) (1 diff)
• grails-app/taglib/dbnp/studycapturing/WizardTagLib.groovy (modified) (8 diffs)
• grails-app/views/wizard/pages/_eventDescriptions.gsp (modified) (3 diffs)
• grails-app/views/wizard/pages/_start.gsp (added)
• grails-app/views/wizard/pages/_study.gsp (modified) (2 diffs)
• grails-app/views/wizard/pages/_subjects.gsp (modified) (1 diff)
• grails-app/views/wizard/pages/_templates.gsp (modified) (1 diff)
• web-app/css/wizard.css (modified) (1 diff)
• web-app/js/wizard.js (modified) (3 diffs)

trunk/grails-app/controllers/dbnp/studycapturing/WizardController.groovy

@@ -47 +47 @@
                         flow.page = 0
                         flow.pages = [
-                                [title: 'Templates'],                   // templates
+                                //[title: 'Templates'],                 // templates
+                                [title: 'Start'],                               // load or create a study
                                 [title: 'Study'],                               // study
                                 [title: 'Subjects'],                    // subjects
@@ -67 +68 @@
                                 flow.page = 1
                         }
-                        on("next").to "templates"
+                        on("next").to "start"
                 }
 
@@ -104 +105 @@
                 }
 
+                // create or modify a study
+                start {
+                        render(view: "_start")
+                        onRender {
+                                flow.page = 1
+                        }
+                        on("next") {
+
+                        }.to "study"
+                }
+
                 // render and handle the study page
+                // TODO: make sure both template as well as logic will
+                //       handle Study templates as well!!!
                 study {
                         render(view: "_study")
@@ -118 +132 @@
                                         error()
                                 }
-                        }.to "templates"
+                        }.to "start"
                         on("next") {
                                 flash.errors = new LinkedHashMap()
@@ -138 +152 @@
                                 if (!flow.subjects) {
                                         flow.subjects = []
+                                        flow.subjectTemplates = new LinkedHashMap()
                                 }
                         }
@@ -143 +158 @@
                                 // fetch species by name (as posted by the form)
                                 def speciesTerm = Term.findByName(params.addSpecies)
+                                def subjectTemplateName = params.get('template')
+                                def subjectTemplate     = Template.findByName(subjectTemplateName)
+
+                                // add this subject template to the subject template array
+                                if (!flow.subjectTemplates[ subjectTemplateName ]) {
+                                        flow.subjectTemplates[ subjectTemplateName ] = [
+                                                name: subjectTemplateName,
+                                                template: subjectTemplate,
+                                                subjects: []
+                                        ]
+                                }
 
                                 // add x subject of species y
                                 (params.addNumber as int).times {
                                         def increment = flow.subjects.size()
-                                        flow.subjects[increment] = new Subject(
+                                        def subject = new Subject(
                                                 name: 'Subject ' + (increment + 1),
                                                 species: speciesTerm,
-                                                template: flow.study.template
+                                                template: subjectTemplate
                                         )
+
+                                        // instantiate a new Subject
+                                        flow.subjects[ increment ] = subject
+
+                                        // and remember the subject id with the template
+                                        def subjectsSize = flow.subjectTemplates[ subjectTemplateName ]['subjects'].size()
+                                        flow.subjectTemplates[ subjectTemplateName ]['subjects'][ subjectsSize ] = increment
                                 }
                         }.to "subjects"
                         on("next") {
+                                println flow.subjectTemplates
+                                println flow.subjects
                                 flash.errors = new LinkedHashMap()
 
@@ -193 +228 @@
                         on("add") {
                                 // fetch classification by name (as posted by the form)
-                                params.classification = Term.findByName(params.classification)
+                                //params.classification = Term.findByName(params.classification)
 
                                 // transform checkbox form value to boolean
@@ -427 +462 @@
 
         /**
-         * re-usable code for handling event grouping in a web flow
-         * @param Map LocalAttributeMap (the flow scope)
-         * @param Map localAttributeMap (the flash scope)
-         * @param Map GrailsParameterMap (the flow parameters = form data)
-         * @returns boolean
-         */
-        def handleEventGrouping(flow, flash, params) {
-                // walk through eventGroups
-                def g = 0
-                flow.eventGroups.each() {
-                        def e = 0
-                        def eventGroup = it
-
-                        // reset events
-                        eventGroup.events = new HashSet()
-
-                        // walk through events
-                        flow.events.each() {
-                                if (params.get('event_' + e + '_group_' + g) == 'on') {
-                                        eventGroup.addToEvents(it)
-                                }
-                                e++
-                        }
-                        g++
-                }
-        }
-
-        /**
          * re-usable code for handling study form data in a web flow
          * @param Map LocalAttributeMap (the flow scope)
@@ -511 +518 @@
                         it.name = params.get('eventDescription_' + id + '_name')
                         it.description = params.get('eventDescription_' + id + '_description')
-                        it.classification = Term.findByName(params.get('eventDescription_' + id + '_classification'))
+                        //it.classification = Term.findByName(params.get('eventDescription_' + id + '_classification'))
                         it.isSamplingEvent = (params.containsKey('eventDescription_' + id + '_isSamplingEvent'))
 
@@ -523 +530 @@
                 }
 
-                return !(errors)
+                return !errors
+        }
+
+        /**
+         * re-usable code for handling event grouping in a web flow
+         * @param Map LocalAttributeMap (the flow scope)
+         * @param Map localAttributeMap (the flash scope)
+         * @param Map GrailsParameterMap (the flow parameters = form data)
+         * @returns boolean
+         */
+        def handleEventGrouping(flow, flash, params) {
+                // walk through eventGroups
+                def g = 0
+                flow.eventGroups.each() {
+                        def e = 0
+                        def eventGroup = it
+
+                        // reset events
+                        eventGroup.events = new HashSet()
+
+                        // walk through events
+                        flow.events.each() {
+                                if (params.get('event_' + e + '_group_' + g) == 'on') {
+                                        eventGroup.addToEvents(it)
+                                }
+                                e++
+                        }
+                        g++
+                }
         }
 
@@ -538 +573 @@
                 def id = 0;
 
-                // iterate through subjects
-                flow.subjects.each() {
-                        // store subject properties
-                        def name = params.get('subject_' + id + '_name')
-                        it.name = params.get('subject_' + id + '_name')
-                        it.species = Term.findByName(params.get('subject_' + id + '_species'))
-
-                        // remember name and check for duplicates
-                        if (!names[it.name]) {
-                                names[it.name] = [count: 1, first: 'subject_' + id + '_name', firstId: id]
-                        } else {
-                                // duplicate name found, set error flag
-                                names[it.name]['count']++
-
-                                // second occurence?
-                                if (names[it.name]['count'] == 2) {
-                                        // yeah, also mention the first
-                                        // occurrence in the error message
-                                        this.appendErrorMap(name: 'The subject name needs to be unique!', flash.errors, 'subject_' + names[it.name]['firstId'] + '_')
-                                }
-
-                                // add to error map
-                                this.appendErrorMap([name: 'The subject name needs to be unique!'], flash.errors, 'subject_' + id + '_')
-                                errors = true
-                        }
-
-                        // clear lists
-                        def stringList = new LinkedHashMap();
-                        def intList = new LinkedHashMap();
-                        def floatList = new LinkedHashMap();
-                        def termList = new LinkedHashMap();
-
-                        // get all template fields
-                        flow.study.template.subjectFields.each() {
-                                // valid type?
-                                if (!it.type) throw new NoSuchFieldException("Field name ${fieldName} not recognized")
-
-                                // get value
-                                def value = params.get('subject_' + id + '_' + it.name);
-                                if (value) {
-                                        // add to template parameters
-                                        switch (it.type) {
-                                                case 'STRINGLIST':
-                                                        stringList[it.name] = value
-                                                        break;
-                                                case 'INTEGER':
-                                                        intList[it.name] = value
-                                                        break;
-                                                case 'FLOAT':
-                                                        floatList[it.name] = value
-                                                        break;
-                                                default:
-                                                        // unsupported type?
-                                                        throw new NoSuchFieldException("Field type ${it.type} not recognized")
-                                                        break;
+                // iterate through subject templates
+                flow.subjectTemplates.each() {
+                        def subjectTemplate = it.getValue().template
+                        def templateFields      = subjectTemplate.fields
+
+                        // iterate through subjects
+                        it.getValue().subjects.each() { subjectId ->
+                                flow.subjects[ subjectId ].name = params.get('subject_' + subjectId + '_name')
+                                flow.subjects[ subjectId ].species = Term.findByName(params.get('subject_' + subjectId + '_species'))
+
+                                // remember name and check for duplicates
+                                if (!names[ flow.subjects[ subjectId ].name ]) {
+                                        names[ flow.subjects[ subjectId ].name ] = [count: 1, first: 'subject_' + subjectId + '_name', firstId: subjectId]
+                                } else {
+                                        // duplicate name found, set error flag
+                                        names[ flow.subjects[ subjectId ].name ]['count']++
+
+                                        // second occurence?
+                                        if (names[ flow.subjects[ subjectId ].name ]['count'] == 2) {
+                                                // yeah, also mention the first
+                                                // occurrence in the error message
+                                                this.appendErrorMap(name: 'The subject name needs to be unique!', flash.errors, 'subject_' + names[ flow.subjects[ subjectId ].name ]['firstId'] + '_')
                                         }
-                                }
-                        }
-
-                        // set field data
-                        it.templateStringFields = stringList
-                        it.templateIntegerFields = intList
-                        it.templateFloatFields = floatList
-                        it.templateTermFields = termList
-
-                        // validate subject
-                        if (!it.validate()) {
-                                errors = true
-                                this.appendErrors(it, flash.errors)
-                        }
-
-                        id++;
+
+                                        // add to error map
+                                        this.appendErrorMap([name: 'The subject name needs to be unique!'], flash.errors, 'subject_' + subjectId + '_')
+                                        errors = true
+                                }
+
+                                // iterate through template fields
+                                templateFields.each() { subjectField ->
+                                        def value = params.get('subject_' + subjectId + '_' + subjectField.name)
+
+// TODO: UNCOMMENT THIS         if (value) flow.subjects[ subjectId ].setFieldValue(subjectField.name, value)
+                                }
+
+                                // validate subject
+                                if (!flow.subjects[ subjectId ].validate()) {
+                                        errors = true
+                                        this.appendErrors(flow.subjects[ subjectId ], flash.errors)
+                                }
+                        }
                 }
 

trunk/grails-app/domain/dbnp/studycapturing/Template.groovy

@@ -12 +12 @@
  */
 class Template implements Serializable {
-
         String name
         Class entity
@@ -21 +20 @@
         static constraints = {
                 name(unique:['entity'])
-
         }
 
@@ -64 +62 @@
                 def results = []
 
-                // this should not work in static context, however it does so I'll keep
+                // 'this' should not work in static context, however it does so I'll keep
                 // this in for now :)
                 this.findAll().each() {

trunk/grails-app/domain/dbnp/studycapturing/TemplateEntity.groovy

@@ -4 +4 @@
 import org.codehaus.groovy.runtime.NullObject
 
-class TemplateEntity {
+/**
+ * TemplateEntity Domain Class
+ *
+ * Revision information:
+ * $Rev$
+ * $Author$
+ * $Date$
+ */
+class TemplateEntity implements Serializable {
 
         Template template
@@ -29 +37 @@
 
         static constraints = {
-                template(nullable: true)
+                template(nullable: true, blank: true)
 
         }
@@ -83 +91 @@
                 }
                 else {
-                        if (templateStringFields.containsKey(fieldName) && value.class == String) {
+                        if (templateStringFields && templateStringFields.containsKey(fieldName) && value.class == String) {
                                 this.templateStringFields[fieldName] = value
                         }
-                        if (templateStringListFields.containsKey(fieldName) && value.class == TemplateFieldListItem) {
+                        if (templateStringFields && templateStringListFields.containsKey(fieldName) && value.class == TemplateFieldListItem) {
                                 // TODO: check if item really belongs to the list under fieldName
                                 this.templateStringListFields[fieldName] = value
@@ -93 +101 @@
                                 this.templateTextFields[fieldName] = value
                         }
-                        else if (templateIntegerFields.containsKey(fieldName) && value.class == Integer) {
+                        else if (templateIntegerFields && templateIntegerFields.containsKey(fieldName) && value.class == Integer) {
                                 this.templateIntegerFields[fieldName] = value
                         }
-                        else if (templateFloatFields.containsKey(fieldName) && value.class == Float) {
+                        else if (templateFloatFields && templateFloatFields.containsKey(fieldName) && value.class == Float) {
                                 this.templateFloatFields[fieldName] = value
                         }
-                        else if (templateDoubleFields.containsKey(fieldName) && value.class == Double) {
+                        else if (templateDoubleFields && templateDoubleFields.containsKey(fieldName) && value.class == Double) {
                                 this.templateDoubleFields[fieldName] = value
                         }
-                        else if (templateDateFields.containsKey(fieldName) && value.class == Date) {
+                        else if (templateDateFields && templateDateFields.containsKey(fieldName) && value.class == Date) {
                                 this.templateDateFields[fieldName] = value
                         }
-                        else if (templateTermFields.containsKey(fieldName) && value.class == Term) {
+                        else if (templateTermFields && templateTermFields.containsKey(fieldName) && value.class == Term) {
                                 this.templateTermFields[fieldName] = value
                         }
@@ -129 +137 @@
                 // TODO: initialize all template fields with the necessary keys and null values
 
-                println "Setting template " + newTemplate
+                //println "Setting template " + newTemplate
                 if (template != null) {
 

trunk/grails-app/domain/dbnp/studycapturing/TemplateFieldListItem.groovy

@@ -1 +1 @@
 package dbnp.studycapturing
 
-class TemplateFieldListItem {
-
+/**
+ * TemplateFieldListItem Domain Class
+ *
+ * Revision information:
+ * $Rev$
+ * $Author$
+ * $Date$
+ */
+class TemplateFieldListItem implements Serializable {
         String name
 
-        static constraints = {
-        }
+        static constraints = {
+        }
 
         String toString() {

trunk/grails-app/domain/dbnp/studycapturing/TemplateFieldType.groovy

@@ -8 +8 @@
  * $Date$
  */
-public enum TemplateFieldType {
+public enum TemplateFieldType implements Serializable  {
         STRING('String'),
         TEXT('Long string'),

trunk/grails-app/taglib/dbnp/studycapturing/WizardTagLib.groovy

@@ -200 +200 @@
                 def addExample2Element  = attrs.remove('addExample2Element')
 
+                // execute inputElement call
+                def renderedElement = "$inputElement"(attrs)
+
+                // if false, then we skip this element
+                if (!renderedElement) return false
+
                 // render a form element
                 out << '<div class="element">'
@@ -206 +212 @@
                 out << ' </div>'
                 out << ' <div class="input">'
-                out << "$inputElement"(attrs)
+                out << renderedElement
                 if(help()) {
                         out << '        <div class="helpIcon"></div>'
@@ -414 +420 @@
          */
         def templateSelect = { attrs ->
-                // fetch all templates
-                attrs.from = Template.findAll() // for now, all templates
+                def entity = attrs.remove('entity')
+
+                // fetch templates
+                attrs.from = (entity) ? Template.findAllByEntity(entity) : Template.findAll()
 
                 // got a name?
@@ -421 +429 @@
                         attrs.name = 'template'
                 }
-                
-                out << select(attrs)
+
+                // got result?
+                if (attrs.from.size() >0) {
+                        out << select(attrs)
+                } else {
+                        // no, return false to make sure this element
+                        // is not rendered in the template
+                        return false
+                }
         }
 
@@ -475 +490 @@
 
                 // output table headers for template fields
-                template.subjectFields.each() {
+                template.fields.each() {
                         out << '<div class="' + attrs.get('class') + '">' + it + '</div>'
                 }
@@ -494 +509 @@
 
                 // output columns for these subjectFields
-                template.subjectFields.each() {
+                template.fields.each() {
                         // output div
                         out << '<div class="' + attrs.get('class') + '">'
@@ -506 +521 @@
                                                         from: it.listEntries,
                                                         value: (stringFields) ? stringFields.get(it.name) : ''
-                                                )
+                                                )                                               
                                         } else {
                                                 out << '<span class="warning">no values!!</span>'
@@ -528 +543 @@
                                         // unsupported field type
                                         out << '<span class="warning">!'+it.type+'</span>'
+                                        //out << subject.getFieldValue(it.name)
                                         break;
                         }
+
                         out << '</div>'
                 }

trunk/grails-app/views/wizard/pages/_eventDescriptions.gsp

@@ -30 +30 @@
         </span>
 
-        <wizard:termElement name="classification" description="Classification" error="classification" value="${values?.classification}">
-                The ontology reference for this particular type of event
-        </wizard:termElement>
         <wizard:textFieldElement name="name" description="Name" error="name" value="${values?.name}">
                 The name of the event description you are creating
@@ -50 +47 @@
                         <div class="column">name</div>
                         <div class="column">description</div>
-                        <div class="column">classification</div>
                         <div class="column">sampling event</div>
                         <div class="column">protocol</div>
@@ -62 +58 @@
                         <div class="column"><g:textField name="eventDescription_${i}_name" value="${eventDescription.name}" size="12" maxlength="12" /></div>
                         <div class="column"><g:textField name="eventDescription_${i}_description" value="${eventDescription.description}" size="12" maxlength="12" /></div>
-                        <div class="column"><wizard:termSelect name="eventDescription_${i}_classification" value="${eventDescription.classification}" /></div>
                         <div class="column"><g:checkBox name="eventDescription_${i}_isSamplingEvent" value="${eventDescription.isSamplingEvent}" /></div>
                         <div class="column"><g:if test="${eventDescription.protocol}">${eventDescription.protocol}</g:if><g:else>-</g:else></div>

trunk/grails-app/views/wizard/pages/_study.gsp

@@ -21 +21 @@
         </span>
         
+        <wizard:templateElement name="template" description="Template" value="${study?.template}" entity="${dbnp.studycapturing.Study}">
+                The template to use for this study
+        </wizard:templateElement>
         <wizard:textFieldElement name="title" description="Title" error="title" value="${study?.title}">
                 The title of the study you are creating
@@ -39 +42 @@
                 The start date of the study     
         </wizard:dateElement>
+
+        <span class="info">
+                <span class="title">TODO</span>
+                This page should also contain the template fields of the study template selected above (if available). This is
+                scheduled for implementation in a later version
+        </span>
+        
 </wizard:pageContent>

trunk/grails-app/views/wizard/pages/_subjects.gsp

@@ -25 +25 @@
         subjects of species
         <wizard:speciesSelect name="addSpecies" />
+        using the
+        <wizard:templateSelect name="template" description="Template" value="${study?.template}" entity="${dbnp.studycapturing.Subject}" />
+        template
+
 <g:if test="${subjects}">
-        <div class="table">
-                <div class="header">
-                        <div class="firstColumn">#</div>
-                        <div class="column">name</div>
-                        <div class="column">species</div>
-                        <wizard:templateColumnHeaders template="${study.template}" class="column" />
+        <g:each var="subjectTemplate" in="${subjectTemplates}">
+                <h1>${subjectTemplate.getValue().name} template</h1>
+                <div class="table">
+                        <div class="header">
+                                <div class="firstColumn">#</div>
+                                <div class="column">name</div>
+                                <div class="column">species</div>
+                                <wizard:templateColumnHeaders template="${subjectTemplate.getValue().template}" class="column" />
+                        </div>  
+                <g:each var="subjectId" in="${subjectTemplate.getValue().subjects}">
+                        <div class="row">
+                                <div class="firstColumn">${subjectId}</div>
+                                <div class="column"><g:textField name="subject_${subjectId}_name" value="${subjects[ subjectId ].name}" size="12" maxlength="12" /></div>
+                                <div class="column">
+                                        <wizard:speciesSelect value="${subjects[ subjectId ].species}" name="subject_${subjectId}_species" />
+                                </div>
+                                <wizard:templateColumns id="${subjectId}" template="${subjects[ subjectId ].template}" name="subject_${subjectId}" class="column" subject="${subjects[ subjectId ]}" />                         
+                        </div>
+                </g:each>
                 </div>
-        <g:each var="subject" status="i" in="${subjects}">
-                <div class="row">
-                        <div class="firstColumn">${i}</div>
-                        <div class="column"><g:textField name="subject_${i}_name" value="${subject.name}" size="12" maxlength="12" /></div>
-                        <div class="column">
-                                <wizard:speciesSelect value="${subject.species}" name="subject_${i}_species" />
-                        </div>
-                        <wizard:templateColumns id="${i}" template="${study.template}" name="subject_${i}" class="column" subject="${subject}" />
+                <div class="sliderContainer">
+                        <div class="slider" ></div>
                 </div>
         </g:each>
-        </div>
-        <div class="sliderContainer">
-                <div class="slider"/>
-        </div>
 </g:if>
+
 </wizard:pageContent>

trunk/grails-app/views/wizard/pages/_templates.gsp

@@ -21 +21 @@
         </span>
 
-        <wizard:templateElement name="template" description="Template" value="${study?.template}">
-                The meta data template to use for this study
+        <wizard:templateElement name="template" description="Template" value="${study?.template}" entity="${dbnp.studycapturing.Subject}">
+                The subject template to use for this study
         </wizard:templateElement>
 </wizard:pageContent>

trunk/web-app/css/wizard.css

@@ -37 +37 @@
 .wizard .sliderContainer {
     display: block;
-    padding-top: 10px;
+    margin-top: 10px;
     width: 150px;
 }

trunk/web-app/js/wizard.js

@@ -39 +39 @@
     // table handlers
     attachTableEvents();
-    resizeWizardTable();
-    attachTableSlider();
-    new TableEditor().init('div.table','div.row','div.column');
+    handleWizardTable();
+    new TableEditor().init('div.table', 'div.row', 'div.column');
 
     // accordeon(s)
@@ -158 +157 @@
 // the header and the rows is automatically scaled to
 // the cummalative width of the columns in the header
-function resizeWizardTable() {
-    var wizardTable = $("div#wizard").find('div.table');
-
-    if (wizardTable) {
+function handleWizardTable() {
+    var that = this;
+    var wizardTables = $("div#wizard").find('div.table');
+
+    wizardTables.each(function() {
+        var wizardTable = $(this);
+        var sliderContainer = (wizardTable.next().attr('class') == 'sliderContainer') ? wizardTable.next() : null;
         var header = wizardTable.find('div.header')
+        var width = 20;
+
         // calculate total width of elements in header
-        var width = 20;
         header.children().each(function() {
             // calculate width per column
@@ -183 +186 @@
             $(this).css({ width: width + 'px' });
         });
-    }
-}
-
-// if we have a table and a slider, make the slider
-// slide the contents of the table if the content of
-// the table is wider than the table itself
-function attachTableSlider() {
-    var slider = $("div#wizard").find('div.slider');
-    var header = $("div#wizard").find('div.header');
-    var table = $("div#wizard").find('div.table');
-
-    if (slider && table && header) {
-        // do we really need a slider?
-        if (header.width() < table.width()) {
-            // no, so hide it
-            slider.css({ 'display': 'none '});
-        } else {
-            slider.slider({
-                value   : 1,
-                min     : 1,
-                max     : header.width() - table.width(),
-                step    : 1,
-                slide: function(event, ui) {
-                    $("div#wizard").find('div.header, div.row').css({ 'margin-left': ( 1 - ui.value ) + 'px' });
-                }
-            });
+
+        // got a slider for this table?
+        if (sliderContainer) {
+            // handle slider
+            if (header.width() < wizardTable.width()) {
+                // no, so hide it
+                sliderContainer.css({ 'display': 'none '});
+            } else {
+                sliderContainer.slider({
+                    value   : 1,
+                    min     : 1,
+                    max     : header.width() - wizardTable.width(),
+                    step    : 1,
+                    slide: function(event, ui) {
+                        wizardTable.find('div.header, div.row').css({ 'margin-left': ( 1 - ui.value ) + 'px' });
+                    }
+                });
+            }
         }
-    }
-}
+    });
+}