changes to occupation popup functionilty

cmsWebApp/webroot/css/common.css

@@ -6386,19 +6386,27 @@ input{
 .create-job-selector.checked h3{
     color: #FFFFFF;
 }
-.occupation_content {position: relative;}
-.occupation_content_list  {width: 25%; overflow-y:  scroll; max-height: 400px;}
-.occupation_content_list ul {display: none;width: 25%;position: absolute; top:0}
 
-.occupation_content_list  li {cursor: pointer;font-weight: 500;background: #F4F7F8; border-bottom: solid 1px #e5e8eb ; border-right: solid 1px #e5e8eb ; padding: 0;}
-.occupation_content_list  li span {display: block;padding:15px 20px ; }
-.occupation_content_list  > li {font-weight: 700;}
-.occupation_content_list  li.clicked {border-right: 0}
-.occupation_content_list  li.clicked > span  {background: #fff;color: #03a0e7;font-weight: 700;}
-.occupation_content_list  li.clicked > ul {display: block;}
+.occupation_content {}
+.occupation_content_list  {}
+/*.occupation_content_list ul {display: none;}*/
+.occupation_content_row {height: 400px;position: relative;}
+.occupation_content_column {    float: left; ; width: 25%; overflow-y:auto; max-height: 400px; position: relative;}
+.occupation_content_column.dyn-div ul{padding-left: 20px;}
+.occupation_content_column ul ul {display: none;}
+
+.occupation_content_column  li {line-height: 18px;cursor: pointer;font-weight: 500;background: #fff; border-bottom: solid 1px #e5e8eb ; border-right: solid 1px #e5e8eb ; padding: 0;}
+.occupation_content_column.main-list-div  li {font-weight: 700;background: #F4F7F8;}
+.occupation_content_column  li span {display: block;padding:15px 20px ; }
+
+.occupation_content_column  li.clicked {border-right: 0}
+.occupation_content_column  li.clicked > span  {background: #fff;color: #03a0e7;font-weight: 700;}
+/*.occupation_content_list  li.clicked > ul {display: block;}*/
 
 #occupation-list .jBox-container {border-radius: 3px; padding: 0}
 #occupation-list .jBox-content {padding: 0;font-size: 13px;}
 #occupation-list .jBox-container .jBox-title{background-color: #4E5258; color: #fff;font-size: 17px;border-radius: 3px 3px 0 0; height: 70px;line-height: 40px}
 .occupation_select_button {height: 100px; padding:20px; text-align: right; border-top: solid 1px #e5e8eb ;}
-.occupation_select_button .btn.btn-primary.largeBtn{margin: 0}
+.occupation_select_button .btn.btn-primary.largeBtn{margin: 0}
\ No newline at end of file
+
+.occupation_select_info {position: absolute;width: 25%; line-height: 18px;    padding: 30px;    right: 0;    text-align: center;    top: 150px;}
\ No newline at end of file

cmsWebApp/webroot/extensions/adminportal/job_detail.jsp

@@ -45,22 +45,38 @@
                   closeButton: "title",
                 minWidth : popup_width, height : 500,
                  onCreated : function(){
-                   var  menu_item_width = popup_width/4;
-                      $(".occupation_content_list  ul").css("width",menu_item_width);
-                      $(".occupation_content_list  ul.first-child").css("left",menu_item_width);
-                      $(".occupation_content_list  ul.second-child").css("left",menu_item_width);
-                      $(".occupation_content_list  ul.third-child").css("left",menu_item_width);
-                 
+                         $(".dyn-div").empty();
+                         $(".occupation_content_column").css("width", popup_width/4 );
 
                  }
                  
                
               });
             
-            $(".occupation_content_list  li").click(function(){
+              $(document).on("click",".occupation_content_column ul li",function(){
                  $(this).siblings('li').removeClass("clicked");
                  $(this).addClass("clicked");
-                
+                 
+                 if( !$(this).parent().hasClass("third-child")) {
+                      $(".occupation_select_info").show();
+                     var nextUl = $(this).find('ul').first().clone();
+                     
+                           $("." + nextUl.attr('class') + "-div").empty();
+                           $("." + nextUl.attr('class') + "-div").nextAll().empty();
+                           
+                           if(nextUl) {
+                            nextUl.appendTo($("." + nextUl.attr('class') + "-div"));
+                            }
+                            
+                            if($(this).parent().hasClass("second-child")) {
+                                 $(".occupation_select_info").hide();
+                            }
+                            else {
+                                 $(".occupation_select_info").show();
+                                }
+                    }
+                    
+
             });
 
         });
@@ -316,6 +332,9 @@
         </div>
                     
                     <div class="occupation_content" id="occupation_content" style="display: none;">
+                        <div  class="occupation_content_row">
+                        <div class="main-list-div occupation_content_column">
+                        
                         <ul class="occupation_content_list">
                     <%
                         Occupation[]    firstLevelOccupations   =   Occupation.SearchByAll()
@@ -367,6 +386,18 @@
                         }
                     %>
                     </ul>
+                        </div>
+                    <div class="first-child-div occupation_content_column dyn-div"></div>
+                
+                        <div class="second-child-div occupation_content_column dyn-div"></div>
+                       
+                        <div class="third-child-div occupation_content_column dyn-div"></div>
+                        
+                      
+                 </div>
+                      <div class="occupation_select_info">
+                            Select the most appropirate Category to help narrow down your Occupation
+                        </div>
                     <div class="occupation_select_button">
                         <button type="button" value="Save Job Occupation" class="btn btn-primary largeBtn" style="" >Save Job Occupation</button>
                     </div>