Index: Dev/branches/Cartis/Tiles preview/Tests/surveyeditor_dragbar_tests.html
===================================================================
--- Dev/branches/Cartis/Tiles preview/Tests/surveyeditor_dragbar_tests.html	(revision 270)
+++ Dev/branches/Cartis/Tiles preview/Tests/surveyeditor_dragbar_tests.html	(revision 270)
@@ -0,0 +1,295 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Test of various Survey Editor draggable layouts</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <style type="text/css">
+
+            /* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+            */
+
+            html, body, div, span, applet, object, iframe,
+            h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+            a, abbr, acronym, address, big, cite, code,
+            del, dfn, em, img, ins, kbd, q, s, samp,
+            small, strike, strong, sub, sup, tt, var,
+            b, u, i, center,
+            dl, dt, dd, ol, ul, li,
+            fieldset, form, label, legend,
+            table, caption, tbody, tfoot, thead, tr, th, td,
+            article, aside, canvas, details, embed, 
+            figure, figcaption, footer, header, hgroup, 
+            menu, nav, output, ruby, section, summary,
+            time, mark, audio, video {
+                margin: 0;
+                padding: 0;
+                border: 0;
+                font-size: 100%;
+                font: inherit;
+                vertical-align: baseline;
+            }
+            /* HTML5 display-role reset for older browsers */
+            article, aside, details, figcaption, figure, 
+            footer, header, hgroup, menu, nav, section {
+                display: block;
+            }
+            body {
+                line-height: 1;
+            }
+            ol, ul {
+                list-style: none;
+            }
+            blockquote, q {
+                quotes: none;
+            }
+            blockquote:before, blockquote:after,
+            q:before, q:after {
+                content: '';
+                content: none;
+            }
+            table {
+                border-collapse: collapse;
+                border-spacing: 0;
+            }
+
+            /* 232F38  dark, 3c4853   light */
+
+            html {
+                font-family: 'Segoe UI', sans-serif;
+                font-size: 14px;
+                color: #fff;
+            }
+
+            .dragbar1 {
+                width: 600px;
+                height: 30px;
+                background-color: #3c4853  ;
+                margin: 0 5px;
+                padding: 0;
+                border: none;
+                float: left;
+                clear: both;
+                border-bottom: 1px solid #606c78;
+                -webkit-user-select: none;
+            }
+
+            .subCatTitle {
+                font-size: 16px;
+                font-weight: bold;
+                display: block;
+                margin: 0 0 0 5px;
+                padding: 0 5px;
+                background-color: #232F38 ;
+                width: 200px;
+                line-height: 30px;
+                float: left;
+            }
+
+            .selQuestionDisplay {
+                width: 352px;
+                height: 24px;
+                padding: 3px 0 3px 3px;
+                float: left;
+                user-select: none;
+            }
+
+            .icon_small {
+                width: 25px;
+                height: 25px;
+                margin-right: 3px;
+                border: none;
+                clear: none;
+            }
+
+            .left {
+                float: left;
+            }
+
+            .right {
+                float: right;
+            }
+
+            .questionTitle {
+                font-size: 14px;
+                font-weight: normal;
+                /*font-style: italic;*/
+                line-height: 25px;
+                float: left;
+                clear: none;
+                width: 200px;
+            }
+            
+            .section1 .questionTitle {
+                width: 350px;
+            }
+            
+            .questionAnswers {
+                font-size: 14px;
+                font-weight: normal;
+                line-height: 25px;
+                float: left;
+                clear: none;
+                width: 100px;
+            }
+
+            .dragbar1 .arrowIcon {
+                width: 30px;
+                height: 25px;
+                padding: 3px 0 2px 0;
+                float: right;
+                clear: none;
+                background-color: #232F38 ;
+            }
+            
+            .arrowIcon.open {
+                -webkit-transform: rotate(180deg);
+                -moz-transform: rotate(180deg);
+            }            
+
+            .smallButton {
+                background-color: transparent;
+                font-weight: bold;
+                line-height: 30px;
+                height: 30px;
+                min-width: 30px;
+                margin: -3px 0 0 0;
+                padding: 0 5px;
+                color: #D9C8A2;
+                background-color: #606c78;
+                -webkit-user-select: none;
+                cursor: default;
+            }
+
+            .dragbar1 .smallButton:hover {
+                background-color: #EB6C2D  ;
+            }
+            
+            
+            .section1 {
+                float: left;
+                clear: left;
+                width: 600px;
+                padding: 0;
+                margin: 0 5px;
+                background-color: #606c78;
+            }
+            
+            .section1 .selQuestionDisplay {
+                width: 590px;
+                padding-left: 10px;
+            }
+            
+            .section1 .selQuestionDisplay .icon_small.right {
+                margin-right: 30px;
+            }
+            
+            .section1 .selQuestionDisplay.selected {
+                background-color: #3c4853;
+            }
+            
+            .section1.closed {
+                height: 0;
+                visibility: hidden;
+            }
+            
+            .section1.open {
+                height: auto;
+                visibility: visible;
+            }
+
+        </style>
+        
+        <script type="text/javascript" src="../js/jquery.js"></script>
+        <script type="text/javascript">
+            $(document).ready(function(){
+               // Set onclick events
+               $(".arrowIcon").bind("click", function(){
+                   toggleMenu();
+               })
+               
+               
+            });
+            
+            function toggleMenu() {
+                var arrow = $("#a1");
+                if (arrow.hasClass("closed")) {
+                    arrow.removeClass("closed").addClass("open");
+                    $("#s1").removeClass("closed").addClass("open");
+                }
+                else {
+                    arrow.removeClass("open").addClass("closed");
+                    $("#s1").removeClass("open").addClass("closed");
+                }
+            }
+            
+        </script>
+        
+    </head>
+    <body>
+        <div style="padding: 10px;">
+
+            <div class="dragbar1">
+                <p class="subCatTitle">Age</p>
+                <div class="selQuestionDisplay">
+                    <img class="icon_small left" src="images/questionIconS3.png"/>
+                    <span class="questionTitle">What is your date of birth?</span>
+                    <div class="smallButton right">Add ></div>
+                    <img class="icon_small right" src="images/inspectIconS.png"/>
+                </div>
+                <img class="arrowIcon open" src="images/arrow_closed.png" id="a1"/>
+            </div>
+
+            <!-- Section!!! -->
+            
+            <div class="section1" id="s1">
+                <div class="selQuestionDisplay">
+                    <img class="icon_small left" src="images/questionIconS3.png"/>
+                    <span class="questionTitle">What is your age?</span>
+                    <span class="questionAnswers">806 answers</span>
+                    <img class="icon_small right" src="images/inspectIconS.png"/>
+                </div>
+                
+                <div class="selQuestionDisplay selected">
+                    <img class="icon_small left" src="images/questionIconS3.png"/>
+                    <span class="questionTitle">What is your date of birth?</span>
+                    <span class="questionAnswers">240 answers</span>
+                    <img class="icon_small right" src="images/inspectIconS.png"/>
+                </div>
+                
+                <div class="selQuestionDisplay">
+                    <img class="icon_small left" src="images/questionIconS3.png"/>
+                    <span class="questionTitle">Please select your age group.</span>
+                    <span class="questionAnswers">32 answers</span>
+                    <img class="icon_small right" src="images/inspectIconS.png"/>
+                </div>
+            </div>
+            
+            <!-- End section!!! -->
+
+            <div class="dragbar1">
+                <p class="subCatTitle">Occupation</p>
+                <div class="selQuestionDisplay">
+                    <img class="icon_small left" src="images/questionIconS3.png"/>
+                    <span class="questionTitle">Selected specific question</span>
+                    <div class="smallButton right">Add ></div>
+                    <img class="icon_small right" src="images/inspectIconS.png"/>
+                </div>
+                <img class="arrowIcon closed" src="images/arrow_closed.png"/>
+            </div>
+
+            <div class="dragbar1">
+                <p class="subCatTitle">Email address</p>
+                <div class="selQuestionDisplay">
+                    <img class="icon_small left" src="images/questionIconS3.png"/>
+                    <span class="questionTitle">Selected specific question</span>
+                    <div class="smallButton right">Add ></div>
+                    <img class="icon_small right" src="images/inspectIconS.png"/>
+                </div>
+                <img class="arrowIcon closed" src="images/arrow_closed.png"/>
+            </div>
+
+        </div>
+    </body>
+</html>
