From f5cf59672294d6e74e94829623f4f8efb73a7b66 Mon Sep 17 00:00:00 2001
From: srikanthv02 <srikanthv02@gmail.com>
Date: Wed, 14 Sep 2016 18:25:08 +0530
Subject: [PATCH] Changes for settings wizard

---
 .../private/ajax/Settings/Dashboard.html      | 388 ++++++------------
 .../private/ajax/Settings/settingsWizard.html | 348 ++++++++++++++++
 client/htmls/private/img/dot.jpg              | Bin 0 -> 5471 bytes
 3 files changed, 472 insertions(+), 264 deletions(-)
 create mode 100644 client/htmls/private/ajax/Settings/settingsWizard.html
 create mode 100644 client/htmls/private/img/dot.jpg

diff --git a/client/htmls/private/ajax/Settings/Dashboard.html b/client/htmls/private/ajax/Settings/Dashboard.html
index 1b2172738..ce51aaae5 100755
--- a/client/htmls/private/ajax/Settings/Dashboard.html
+++ b/client/htmls/private/ajax/Settings/Dashboard.html
@@ -1,302 +1,162 @@
-<style type="text/css">
-
-/* -- Circle Tiles */
-
-.circle-tile {
-    margin-bottom: 15px;
+<style>
+.container {
+    width:1166px;
+    height:130px;
+}
+.btn-circle {
+    width: 49px;
+    height: 49px;
     text-align: center;
+    padding: 5px 0;
+    font-size: 20px;
+    line-height: 2.00;
+    border-radius: 30px;
+    margin: 0 25px;
 }
 
-.circle-tile-heading {
-    position: relative;
-    width: 80px;
-    height: 80px;
-    margin: 0 auto -40px;
-    border: 3px solid rgba(255, 255, 255, 0.3);
-    border-radius: 50%;
-    color: #fff;
-    transition: all ease-in-out .3s;
-}
-
-.circle-tile-heading .fa {
-    line-height: 80px;
-}
-
-.circle-tile-content {
-    padding-top: 50px;
-}
-
-.circle-tile-number {
-    padding: 5px 0 15px;
-    font-size: 26px;
-    font-weight: 700;
-    line-height: 1;
+.btn-text {
+    font-size: 12px;
+    vertical-align: middle
 }
 
-.circle-tile-description {
-    text-transform: uppercase;
+.btn:hover {
+    font-weight: bold;
+    color: #fff;
 }
 
-.circle-tile-footer {
-    display: block;
-    padding: 5px;
-    color: white;
-    background-color: rgba(0, 0, 0, 0.1);
+.active-btn {
+    background-color: #286090;
+    color:#fff;
+    box-shadow: 0 0 5px #286090;
 }
-
-.circle-tile-footer:hover {
-    text-decoration: none;
+.process-btn {
+    background-color: #7d7676;
     color: #fff;
-    background-color: rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 5px #888888;
 }
 
-.circle-tile-heading.dark-blue:hover {
-    background-color: #2c3e50;
+.end-btn {
+    background-color: #40BAF1;
+    color: #fff;
+    box-shadow: 0 0 5px #40BAF1;
 }
 
-.circle-tile-heading.green:hover {
-    background-color: #2a4747;
+ul li {
+    text-decoration: none;
+    display: inline;
 }
 
-.circle-tile-heading.orange:hover {
-    background-color: #901515;
+.li-margin {
+    margin:0 20px;
+    width: 30px;
 }
 
-.circle-tile-heading.blue:hover {
-    background-color: #54677a;
+.btn-cls {
+    margin: 10px auto;
+    width: 90%;
+    background: hsla(0, 0%, 0%, 0) url("../../private/img/dot.jpg") no-repeat scroll -27px 25px;
+    height: 45px;
 }
 
-.circle-tile-heading.red:hover {
-    background-color: #cf4435;
+.btn-1 {
+    float: left;
+    width: 126px;
+    text-align: center;
+    
+    padding: 0 15px;
 }
 
-.circle-tile-heading.purple:hover {
-    background-color: #7f3d9b;
+.lable-name {
+    padding-top: 10px;
+    color: #7d7676;
 }
 
-.circle-tile-heading.grey:hover {
-    background-color: #517398;
-}
-/* Circle Tile Ends*/
+/*.content {
+    margin:0 auto;
+    width: 80%;
+    border: 1px solid #757575;
+    padding: 10px;
+}*/
 </style>
-<div id="page-wrapper">
-  <div class="row">
-    <div class="col-lg-3 col-md-6">
-      <div class="circle-tile" >
-        <a href="#ajax/Settings/OrgList.html">
-          <div class="circle-tile-heading light-blue">
-            <i class="fa fa-building fa-fw fa-3x"></i>
-          </div></a>
-
-          <div class="circle-tile-content light-blue" onclick="$(this).closest('a').trigger('click')">
-            <div class="circle-tile-description text-faded"><a href = "#ajax/Settings/OrgList.html" style="color:white;"> ORGANIZATIONS </a></div>
-            <div class="circle-tile-number text-faded organizationcount" itemid="1">
-
-            </div>
-
-          </div>
-        </div> <!--heading dark-blue ends-->
-
+<div class="row">
+   <h3 style="color:#286090; font-weight:bold;margin-top:5px;">
+      <center>Setup &amp; Configuration Wizard</center>
+   </h3>
+   <div class="container">
+      <div class="btn-cls">
+         <div class="btn-1">
+            <a type="button" class="btn btn-circle active-btn btn-text" style="line-height:3">Start</a><br />
+            <p class="lable-name">Introduction</p>
+         </div>
+         <div class="btn-1" id="orgConfiguration">
+            <a type="button" href="ajax/Settings/settingsWizard.html" class="btn btn-circle process-btn">1</a><br />
+            <p class="lable-name">Org Configuration</p>
+         </div>
+         <div class="btn-1">
+            <a type="button" class="btn btn-circle process-btn">2</a><br />
+            <p class="lable-name">Chef Configuration</p>
+         </div>
+         <div class="btn-1" id="providerConfiguration">
+            <a type="button" href="" class="btn btn-circle process-btn">3</a><br />
+            <p class="lable-name">Provider Configuration</p>
+         </div>
+         <div class="btn-1">
+            <a type="button" class="btn btn-circle process-btn">4</a><br />
+            <p class="lable-name">Repositories</p>
+         </div>
+         <div class="btn-1">
+            <a type="button" class="btn btn-circle process-btn">5</a><br />
+            <p class="lable-name">Security Access Control</p>
+         </div>
+         <div class="btn-1">
+            <a type="button" class="btn btn-circle process-btn">6</a><br />
+            <p class="lable-name">Telemetry</p>
+         </div>
+         <div class="btn-1">
+            <a type="button" class="btn btn-circle process-btn">7</a><br />
+            <p class="lable-name">CMDB Configuration</p>
+         </div>
       </div>
-      <!--col-lg-3 ends-->
-
-
-
-
-
-      <div class="col-lg-3 col-md-6">
-        <div class="circle-tile">
-          <a href="#ajax/Settings/ProductGroupList.html">
-           <div class="circle-tile-heading light-black">
-             <i class="fa fa-group fa-fw fa-3x"></i>
-           </div></a>
-           <div class="circle-tile-content light-black">
-
-            <div class="circle-tile-description text-faded"><a href = "#ajax/Settings/ProductGroupList.html" style="color:white;">BUSINESS GROUPS</a></div>
-            <div class="circle-tile-number text-faded productgroupcount"  itemid="2">
-
-            </div>
-
-          </div>
-        </div>
-      </div>     
-
-
-      <!--heading orange ends-->
-      <!--Circle-tile ends--> 
-      <!-- col-lg-3 ends-->
-
-      <div class="col-lg-3 col-md-6">
-        <div class="circle-tile">
-          <a href="#ajax/Settings/EnvironmentConceptList.html">
-           <div class="circle-tile-heading light-blue">
-             <i class="fa fa-desktop fa-fw fa-3x"></i>
-           </div></a>
-           <div class="circle-tile-content light-blue">
-            <div class="circle-tile-description text-faded"><a href="#ajax/Settings/EnvironmentConceptList.html" style="color:white;">ENVIRONMENTS</a></div>
-            <div class="circle-tile-number text-faded envCount"  itemid="3">
-
-            </div>
-
-          </div>
-        </div>    
-      </div>
-
-
-      <div class="col-lg-3 col-md-6">
-        <div class="circle-tile">
-          <a href="#ajax/Settings/ProjectList.html">
-           <div class="circle-tile-heading light-black">
-             <i class="fa fa-tasks fa-fw fa-3x"></i>
-           </div>
-         </a>
-         <div class="circle-tile-content light-black">
-          <div class="circle-tile-description text-faded"><a href="#ajax/Settings/ProjectList.html" style="color:white;">Projects</a>
-          </div>
-          <div class="circle-tile-number text-faded projectCount"  itemid="4">
-
-          </div>
-
-
-        </div>
-      </div>
-    </div>    
-
-
-
-  </div> <!--row ends-->
+   </div>
+   <hr/>
+   <div class="contentSetting">
+   </div>
+</div>
 
 
-</div>
 
 <script type="text/javascript">
 //added for v3.0 - when navigating from v2.0 workzone to settings-
 $(document).ready(function() {
-	if(isAngularIntegration){
-	    $('#workZoneNew').attr('href','#');
-	    $('#workZoneNew').removeClass('active');
-	    $('#Workspace1').addClass('hidden');
-		$('#Settings_nav').show();
-		$('#settingsNew').addClass('active');
-		$("#ribbon ol.breadcrumb").empty();
-		$("#ribbon ol.breadcrumb").append($("<li>Settings</li>"));
-	}
+  $("#content").attr('style', 'height: 100%!important')
+    if(isAngularIntegration){
+        $('#workZoneNew').attr('href','#');
+        $('#workZoneNew').removeClass('active');
+        $('#Workspace1').addClass('hidden');
+        $('#Settings_nav').show();
+        $('#settingsNew').addClass('active');
+        $("#ribbon ol.breadcrumb").empty();
+        $("#ribbon ol.breadcrumb").append($("<li>Settings</li>"));
+    }
 });
- var serviceURL = "/d4dMasters/";
- window.selectedOrgName = 'Settings'; 
-
-				// $('[itemid]').each(function(){
-				//     var count = getCount($(this).attr('itemid'));    
-				//     $(this).html(count);
-				// });
-function setcountontile(){
-  $.get('/d4dMasters/readmasterjsoncounts',function(data){
-    var mastcount = JSON.parse(JSON.stringify(data));
-    $.each(mastcount,function(k,v){
-      var ky = Object.keys(v);
-         //alert(k +' ' + ky +' ' + v[ky]);
-         $('[itemid="' + ky + '"]').html(v[ky]);
-       });
-  });
-}
-setcountontile();
-
-
-
-
-
-
-
+var serviceURL = "/d4dMasters/";
+window.selectedOrgName = 'Settings'; 
 
 drawBreadCrumb1();
 
-$(function(){
-  $('.circle-tile').find('a').click(function(){
-    var href=$(this).attr('href'),setting_tree=$('#setting_tree'),
-    nodeList=setting_tree.find('li');
-
-    if(href && href.indexOf('OrgList.html')>-1){
-
-      if(setting_tree.find('li').eq(0).hasClass('active')){
-
-       setTimeout(function(){
-        setting_tree.find('li').find('[nodetype="OrgList"]').trigger('click');          
-      },100);
-
-
-     }else{
-
-      setting_tree.find('li').eq(0).find('.expand-collapse').trigger('click');
-      setTimeout(function(){
-        setting_tree.find('li').find('[nodetype="OrgList"]').trigger('click');          
-      },100);
-    }
-
-
-  }
-
-  else if(href && href.indexOf('ProductGroupList.html')>-1){
-
-
-    if(setting_tree.find('li').eq(0).hasClass('active')){
-     setTimeout(function(){
-      setting_tree.find('li').find('[nodetype="ProductGroupList"]').trigger('click');          
-    },100);
-     
-
-   }else{
-
-    setting_tree.find('li').eq(0).find('.expand-collapse').trigger('click');
-    setTimeout(function(){
-      setting_tree.find('li').find('[nodetype="ProductGroupList"]').trigger('click');          
-    },100);
-  }
-
-}
-
-
-else if(href && href.indexOf('EnvironmentConceptList.html')>-1){
-//debugger;
-  if(setting_tree.find('li').find('[nodetype="devops"]').hasClass('active')){
-   setTimeout(function(){
-    setting_tree.find('li').find('[nodetype="EnvironmentConceptList"]').trigger('click');          
-  },100);
-
- }else{
-
-  setting_tree.find('li').find('[nodetype="devops"]').parent().find('.expand-collapse').trigger('click');
-  setTimeout(function(){
-    setting_tree.find('li').find('[nodetype="EnvironmentConceptList"]').trigger('click');          
-  },100);
-}
-
-}
-
-else if(href && href.indexOf('ProjectList.html')>-1){
-
-  if(setting_tree.find('li').eq(0).hasClass('active')){
-
-   setTimeout(function(){
-    setting_tree.find('li').find('[nodetype="ProjectList"]').trigger('click');          
-  },100);
-
-
- }else{
-
-  setting_tree.find('li').eq(0).find('.expand-collapse').trigger('click');
-  setTimeout(function(){
-    setting_tree.find('li').find('[nodetype="ProjectList"]').trigger('click');          
-  },100);
-}
-
-}
-
+$('#orgConfiguration a').click(function(e){
+  $('a.btn').addClass('active-btn');
+  $(this).removeClass('process-btn');    
+  e.preventDefault();
+  $('.contentSetting').load(this.getAttribute('href'));    
 });
 
-});
-
-</script>
-
+$('#orgConfiguration a').trigger('click');
 
-
-<!-- end scripts -->
+$('#providerConfiguration a').click(function(e){
+  $('a.btn').addClass('active-btn');
+  $(this).removeClass('process-btn');    
+  e.preventDefault();
+  $('.contentSetting').load('ajax/Settings/CreateProviders.html?new');
+});
+</script>
\ No newline at end of file
diff --git a/client/htmls/private/ajax/Settings/settingsWizard.html b/client/htmls/private/ajax/Settings/settingsWizard.html
new file mode 100644
index 000000000..99979d0ed
--- /dev/null
+++ b/client/htmls/private/ajax/Settings/settingsWizard.html
@@ -0,0 +1,348 @@
+<style>
+/*custom font*/
+@import url(http://fonts.googleapis.com/css?family=Montserrat);
+
+/*form styles*/
+#msform {
+    margin: 10px auto;
+    position: relative;
+}
+
+/*Hide all except first fieldset*/
+#msform fieldset:not(:first-of-type) {
+    display: none;
+}
+
+/*buttons*/
+#msform .action-button {
+    width: 100px;
+    background: #27AE60;
+    font-weight: bold;
+    color: white;
+    border: 0 none;
+    border-radius: 1px;
+    cursor: pointer;
+    padding: 10px 5px;
+    margin: 10px 5px;
+}
+#msform .action-button:hover, #msform .action-button:focus {
+    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
+}
+/*headings*/
+.fs-title {
+    font-size: 15px;
+    text-transform: uppercase;
+    color: #2C3E50;
+    margin-bottom: 10px;
+}
+.fs-subtitle {
+    font-weight: normal;
+    font-size: 13px;
+    color: #666;
+    margin-bottom: 20px;
+}
+/*progressbar*/
+#progressbar {
+    overflow: hidden;
+    text-align: center;
+    /*CSS counters to number the steps*/
+    counter-reset: step;
+}
+#progressbar li {
+    list-style-type: none;
+    font-size: 15px;
+    width: 33.33%;
+    float: left;
+    position: relative;
+}
+#progressbar li:before {
+    content: counter(step);
+    counter-increment: step;
+    width: 20px;
+    line-height: 20px;
+    display: block;
+    font-size: 10px;
+    color: #fff;
+    background: #7d7676;
+    border-radius: 3px;
+    margin: 0 auto 5px auto;
+}
+/*progressbar connectors*/
+#progressbar li:after {
+    content: '';
+    width: 100%;
+    height: 2px;
+    background: #7d7676;
+    position: absolute;
+    left: -50%;
+    top: 9px;
+    z-index: -1; /*put it behind the numbers*/
+}
+#progressbar li:first-child:after {
+    /*connector not needed before the first step*/
+    content: none; 
+}
+/*marking active/completed steps green*/
+/*The number of the step and the connector before it = green*/
+#progressbar li.active:before,  #progressbar li.active:after{
+    background: #27AE60;
+    color: white;
+}
+
+.content {
+    margin:0 auto;
+    padding: 10px;
+}
+a, a:hover {
+    color:#7d7676;
+    text-decoration: none;
+}
+</style>
+<!-- multistep form -->
+<form id="msform">
+   <!-- progressbar -->
+   <ul id="progressbar">
+      <li class="orgCreate active">Create Organisation</a></li>
+      <li>Create BG</a></li>
+      <li>Create Project</a></li>
+      <!-- <li>Create Env</a></li> -->
+   </ul>
+   <!-- fieldsets -->
+   <fieldset class="content">
+      <div class="widget-box">
+         <div class="widget-header">
+            <h4 class="widget-margin" style="color:black;">Create Organization</h4>
+         </div>
+         <div class="widget-body">
+            <div class="widget-main" style="min-height:200px">
+               <div class="jarviswidget" id="wid-id-3" data-widget-editbutton="false" data-widget-custombutton="false">
+                  <div>
+                     <div class="widget-body no-padding">
+                        <div class="col-lg-6 col-md-6">
+                           <label for="name">Name:
+                           <span class="control-label redSpan">&nbsp;*</span></label>
+                           <input autofocus name="ctl00$MainContent$orgname" value="" id="orgname" unique="true"  uniqueconditionedby="orgname" class="form-control" cdata="catalyst" type="text" cat-validation="required,nospecial,max15,nospace">
+                        </div>
+                        <div class="col-lg-6 col-md-6">
+                           <label for="name">Domain Name:</label>
+                           <input name="Domain Name" value="" id="domainname" class="form-control" type="text" maxlength="35">
+                        </div>
+                     </div>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+      <input type="button" name="next" class="next action-button" value="Next" />
+   </fieldset>
+   <!-- <input type="button" name="next" class="next action-button" value="Next" /> -->
+   <fieldset class="content">
+      <div class="widget-box">
+         <div class="widget-header">
+            <h4 class="widget-margin" style="color:black;">Create Business Group</h4>
+         </div>
+         <div class="widget-body">
+            <div class="widget-main" style="min-height:200px">
+               <div class="jarviswidget" id="wid-id-3" data-widget-editbutton="false" data-widget-custombutton="false">
+                  <div>
+                     <div class="col-lg-6 col-md-6">
+                      <label for="name">Business Group Name <span class="control-label redSpan">&nbsp;*</span></label>
+                      <input autofocus name="productgroupname" value="" id="productgroupname" class="form-control" type="text"  cdata="catalyst" cat-validation="required,nospecial,max15,nospace" unique="true" uniqueconditionedby="productgroupname,orgname">
+                   </div>
+                   <div class="col-lg-6 col-md-6">
+                      <label for="">Organization<span class="control-label redSpan">&nbsp;*</span></label>
+                      <select id="orgname" class="chooseOrganization form-control width-100" sourcepath="1" datapath="masterjson.rows.row" valuelinkfield="costcode" style="vertical-align:central"  cdata="catalyst" cat-validation="required">
+                         <option value="">Select an Organization</option>
+                      </select>
+                   </div>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+      <input type="button" name="previous" class="previous action-button" value="Previous" />
+      <input type="button" name="next" class="next action-button" value="Next" />
+   </fieldset>
+   <fieldset class="content">
+      <div class="widget-box">
+         <div class="widget-header">
+            <h4 class="widget-margin" style="color:black;">Create Project</h4>
+         </div>
+         <div class="widget-body">
+            <div class="widget-main" style="min-height:200px">
+               <div class="jarviswidget" id="wid-id-3" data-widget-editbutton="false" data-widget-custombutton="false">
+                  <div>
+                                 <!-- widget content -->
+                                 
+                                    
+                                       <div class="col-lg-6 col-md-6">
+                                          <label for="name">Name:<span class="control-label redSpan">&nbsp;*</span></label>
+                                          <label id="msgOrgName" style="display:none;color:red;float:right;">Required</label>
+                                          <br>
+                                          <input autofocus name="ctl00$MainContent$orgname" value="" id="projectname" class="form-control" type="text"  cdata="catalyst" cat-validation="required,nospecial,max15,nospace"  unique="true"  uniqueconditionedby="projectname,orgname,productgroupname">
+                                       </div>
+                                       <div class="col-lg-6 col-md-6">
+                                          <label for="">Organization:<span class="control-label redSpan">&nbsp;*</span></label>
+                                          <select id="orgname" class="form-control chooseOrganization width-100" sourcepath="1" datapath="masterjson.rows.row" linkedfields="['productgroupname','environmentname','teamname']"  cdata="catalyst" cat-validation="required">
+                                             <option value="">Select Organization</option>
+                                          </select>
+                                       </div>
+                                       <div class="col-lg-6 col-md-6" style="margin-top:15px;">
+                                          <label for="">Business Group:<span class="control-label redSpan">&nbsp;*</span></label>
+                                          <select id="productgroupname" class="form-control chooseBG width-100" sourcepath="2" datapath="masterjson.rows.row" linkedto="orgname"  cdata="catalyst" cat-validation="required">
+                                             <option value="">Select Business Group</option>
+                                          </select>
+                                       </div>
+                                        
+                                        <div class="col-lg-6 col-md-6" >
+                                          <a style="cursor:pointer;" data-toggle="modal" data-backdrop="false" id="repoanchorDetails" href="#repodetailsModal"> <img title="Add Repository Details" data-placement="top" rel="tooltip" class="addrepoDetails" style="float:right;margin-top:20px;" src="img/add.png"></a>
+                                          <label style="float:left;margin-top:20px;">Repositories Details :</label>
+                                          <div class="table-responsive table-div">
+                                            <table id="tablerepositoryDetails" class="table table-striped table-bordered table-hover dataTable" style="border:1px solid #eeeeee !important; text-align:center;font-size:12px;margin-top:45px;" width="100%" cellpadding="5px">
+                                                <thead>
+                                                    <tr class="rowCustomStyle" style="font-weight:bold;">
+                                                        <td style="color:#fff;background-color: #2c3742; width:35%">Repository</td>
+                                                        <td style="color:#fff;background-color: #2c3742;">Name</td>
+                                                        <td style="color:#fff;background-color: #2c3742; width:10%">Action</td>
+                                                    </tr>
+                                                </thead>
+                                                <tbody id="repoDeployTbody">
+                                                </tbody>
+                                            </table>
+                                          </div>
+                                        </div>
+                                        <!-- <div class="col-lg-6 col-md-6" style="margin-top:25px; display:none">
+                                          <label for="name">Repository Details:</label>
+                                          <input autofocus name="ctl00$MainContent$orgname" value="" id="repositories" class="form-control" type="text"  cdata="catalyst">
+                                       </div> -->
+                                        
+                                 
+                              </div>
+               </div>
+            </div>
+         </div>
+      </div>
+      <input type="button" name="previous" class="previous action-button" value="Previous" />
+      <input type="button" name="next" class="next action-button" value="Next" />
+   </fieldset>
+   <!-- <fieldset>
+      <h2 class="fs-title">Social Profiles</h2>
+      <h3 class="fs-subtitle">Your presence on the social network</h3>
+      <input type="text" name="twitter" placeholder="Twitter" />
+      <input type="text" name="facebook" placeholder="Facebook" />
+      <input type="text" name="gplus" placeholder="Google Plus" />
+      <input type="button" name="previous" class="previous action-button" value="Previous" />
+      <input type="button" name="next" class="next action-button" value="Next" />
+   </fieldset> -->
+</form>
+
+<script>
+//jQuery time
+var current_fs, next_fs, previous_fs; //fieldsets
+var left, opacity, scale; //fieldset properties which we will animate
+var animating; //flag to prevent quick multi-click glitches
+
+/*$('#progressbar .orgCreate a').click(function(e){
+    $('.content').removeClass('hidden');
+    e.preventDefault();
+    $('#orgCreation .content').load(this.getAttribute('href'));    
+});
+
+$('#progressbar .orgCreate a').trigger('click');
+
+$('#progressbar .bgCreate a').click(function(e){
+    $('.content').removeClass('hidden');
+    e.preventDefault();
+    $('#bgCreation .content').load(this.getAttribute('href'));
+});
+
+$('#progressbar .projectCreate a').click(function(e){
+    $('.content').removeClass('hidden');
+    e.preventDefault();
+    $('#projectCreation .content').load(this.getAttribute('href'));
+});
+
+$('#progressbar .envCreate a').click(function(e){
+    $('.content').removeClass('hidden');
+    e.preventDefault();
+    $('#envCreation .content').load(this.getAttribute('href'));
+});*/
+
+$(".next").click(function(){
+    /*$('#progressbar .bgCreate a').trigger('click');
+    $('.projectCreate a').trigger('click');
+    $('.envCreate a').trigger('click');*/
+    if(animating) return false;
+    animating = true;
+    
+    current_fs = $(this).parent();
+    next_fs = $(this).parent().next();
+    
+    //activate next step on progressbar using the index of next_fs
+    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
+    
+    //show the next fieldset
+    next_fs.show(); 
+    //hide the current fieldset with style
+    current_fs.animate({opacity: 0}, {
+        step: function(now, mx) {
+            //as the opacity of current_fs reduces to 0 - stored in "now"
+            //1. scale current_fs down to 80%
+            scale = 1 - (1 - now) * 0.2;
+            //2. bring next_fs from the right(50%)
+            left = (now * 50)+"%";
+            //3. increase opacity of next_fs to 1 as it moves in
+            opacity = 1 - now;
+            current_fs.css({'transform': 'scale('+scale+')'});
+            next_fs.css({'left': left, 'opacity': opacity});
+        }, 
+        duration: 800, 
+        complete: function(){
+            current_fs.hide();
+            animating = false;
+        }, 
+        //this comes from the custom easing plugin
+        easing: 'easeInOutBack'
+    });
+});
+
+$(".previous").click(function(){
+    if(animating) return false;
+    animating = true;
+    
+    current_fs = $(this).parent();
+    previous_fs = $(this).parent().prev();
+    
+    //de-activate current step on progressbar
+    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
+    
+    //show the previous fieldset
+    previous_fs.show(); 
+    //hide the current fieldset with style
+    current_fs.animate({opacity: 0}, {
+        step: function(now, mx) {
+            //as the opacity of current_fs reduces to 0 - stored in "now"
+            //1. scale previous_fs from 80% to 100%
+            scale = 0.8 + (1 - now) * 0.2;
+            //2. take current_fs to the right(50%) - from 0%
+            left = ((1-now) * 50)+"%";
+            //3. increase opacity of previous_fs to 1 as it moves in
+            opacity = 1 - now;
+            current_fs.css({'left': left});
+            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
+        }, 
+        duration: 800, 
+        complete: function(){
+            current_fs.hide();
+            animating = false;
+        }, 
+        //this comes from the custom easing plugin
+        easing: 'easeInOutBack'
+    });
+});
+
+$(".submit").click(function(){
+    return false;
+})
+
+</script>
\ No newline at end of file
diff --git a/client/htmls/private/img/dot.jpg b/client/htmls/private/img/dot.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..94ef23f6cfa93a816269378d40a5dc26b3b983d0
GIT binary patch
literal 5471
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

literal 0
HcmV?d00001