Added Group Support and making room for new updates

Fixes #20 Fixes #21 by adding groups instead of drop down.  will add
more updates soon. I just need people to test this commit out.

example.ini.php

@@ -17,30 +17,39 @@ tabshadow = "#c7c6c6"
 url = "https://sonarr.tv/"
 icon = "fa-desktop"
 enabled = "true"
+group = "1"
 [QNAP]
 url = "https://www.qnap.com/i/useng/"
 icon = "fa-cubes"
 enabled = "true"
+group = "1"
 [Movies]
 url = "https://couchpota.to/"
 icon = "fa-film"
 enabled = "true"
 default = "true"
+group = "1"
 [Proxy]
 url = "https://www.glype.com/"
 icon = "fa-bug"
 enabled = "true"
 guest = "true"
+group = "1"
 [Request]
 url = "https://plexrequests.8bits.ca/"
 icon = "fa-search"
 enabled = "true"
 guest = "true"
+group = "1"
 [Server]
 url = "https://phpsysinfo.github.io/phpsysinfo/"
 icon = "fa-database"
 enabled = "true"
+group = "1"
 [NZB]
 url = "https://nzbget.net/"
 icon = "fa-cloud-download"
 enabled = "true"
+group = "1"
+[groups]
+groups = "1"

index.php

@@ -1,85 +1,197 @@
 <?php
+
 error_reporting (E_ALL ^ E_NOTICE);
+
 try {
+    
     $config = parse_ini_file('settings.ini.php', true);
+    
 } catch(Exception $e) {
+    
     die('<b>Unable to read config.ini.php. Did you rename it from config.ini.php-example?</b><br><br>Error message: ' .$e->getMessage());
+
 }
+
 $i = 0;
+
 $ii = 0;
+
 foreach ($config as $keyname => $section) {
-        
-        if(($keyname !== "general" && $section["enabled"]=="true")){ 
-            $i++;
-            if(!empty($section["default"]) && $section["default"]=="true"){
-                $defaulttabuser = "tab$i";
-            }
-            
-        }
-        
-        if(!empty($section["useicons"]) && ($section["useicons"]=="true")){ 
-            
-            $icons = "active";
-            
-            $guesticons = "<span><i class=\"fa fa-toggle-on\"></i></span>";
-            $adminicons = "<span><i class=\"fa fa-toggle-on\"></i></span>";
-            $refreshicons = "<span><i class=\"fa fa-refresh\"></i></span>";
-        }
     
-        if(!empty($section["usemargins"]) && ($section["usemargins"]=="true")){ 
-            
-            $margins = "active";
-
-        }
+    if(($keyname == "groups")){
     
-        if($icons == "active"){
-                
-            $px = "62px";//80
-            $pxmobile = "-30px";
-                
+        if(isset($section['groups'])){
+
+            $groupCount = $section['groups'];
+
         }else{
-                
-            $px = "34px";//50
-            $pxmobile = "0px";
-                
+
+            $groupCount = "1";
+
         }
+        
+    }
     
-        if($margins == "active"){
-                
-            $marginpx = "10px";
-            $marginborderpx = "0px";
-                
-        }else{
-                
-            $marginpx = "0px";
-            $marginborderpx = "0px";
-                
+}
+
+foreach ($config as $keyname => $section) {
+
+    if(($keyname !== "general" && $section["enabled"]=="true")){ 
+
+        $i++;
+
+        if(!empty($section["default"]) && $section["default"]=="true"){
+
+            $defaulttabuser = "tab$i";
+
         }
-    
-        //Guest
-        if($_COOKIE["logged"] !== $cookiepass && !empty($section["enabled"]) && ($section["enabled"]=="true") && !empty($section["guest"]) && ($section["guest"]=="true") ) {
-            if($icons == "active"){ $listicons = "<span><i class=\"fa ". $section["icon"] ."\"></i></span>"; }
-            $loadedlist .= "<li id=\"". $section["url"] ."x\"><a>" . $keyname . " " . $listicons ."</a></li>\n";
-            $loadedurls .= "<div class=\"z-nopadding\" data-content-url=\"". $section["url"] ."\" data-content-type=\"iframe\"></div>\n";
-            if(($keyname !== "general" && !empty($section["enabled"]) && $section["enabled"]=="true" && !empty($section["guest"]) && $section["guest"]=="true")){  
+
+    }
+
+    if(!empty($section["useicons"]) && ($section["useicons"]=="true")){ 
+
+        $icons = "active";
+
+        $guesticons = "<span><i class=\"fa fa-toggle-on\"></i></span>";
+
+        $adminicons = "<span><i class=\"fa fa-toggle-on\"></i></span>";
+        
+        $swapicons = "<span><i class=\"fa fa-arrows-h\"></i></span>";
+
+        $refreshicons = "<span><i class=\"fa fa-refresh\"></i></span>";
+
+    }
+
+    if(!empty($section["usemargins"]) && ($section["usemargins"]=="true")){ 
+
+        $margins = "active";
+
+    }
+
+    if($icons == "active"){
+
+        $px = "62px";//80
+
+        $pxmobile = "-30px";
+
+    }else{
+
+        $px = "34px";//50
+
+        $pxmobile = "0px";
+
+    }
+
+    if($margins == "active"){
+
+        $marginpx = "10px";
+
+        $marginborderpx = "0px";
+
+    }else{
+
+        $marginpx = "0px";
+
+        $marginborderpx = "0px";
+
+    }
+
+    //Guest
+    if($_COOKIE["logged"] !== $cookiepass && !empty($section["enabled"]) && ($section["enabled"]=="true") && !empty($section["guest"]) && ($section["guest"]=="true") ) {
+
+        if($icons == "active"){ $listicons = "<span><i class=\"fa ". $section["icon"] ."\"></i></span>"; }
+
+        $loadedlist .= "<li id=\"". $section["url"] ."x\"><a>" . $keyname . " " . $listicons ."</a></li>\n";
+
+        $loadedurls .= "<div class=\"z-nopadding\" data-content-url=\"". $section["url"] ."\" data-content-type=\"iframe\"></div>\n";
+
+        if(($keyname !== "general" && !empty($section["enabled"]) && $section["enabled"]=="true" && !empty($section["guest"]) && $section["guest"]=="true")){  
+
             $ii++;
+
             if(!empty($section["default"]) && $section["default"]=="true"){
+
                 $defaulttabguest = "tab$ii";
             }
-               
+
         }       
-                            
+
+    }
+
+    if(isset($groupCount)) {
+
+        if($icons == "active"){ $listicons = "<span><i class=\"fa ". $section["icon"] ."\"></i></span>"; }
+        
+        if($_COOKIE["logged"] == $cookiepass){
+            
+            foreach(range(1,$groupCount) as $index) {
+
+                if(!empty($section["enabled"]) && $section["enabled"]=="true" && $section["group"]==$index) {
+
+                        if($index == 1){ 
+
+                            //$loadedlist .= "<variable id=\"$index\">";
+                            $loadedlist .= "<li style=\"display: block\" class=\"" . $section["group"] . "\" id=\"". $section["url"] ."x\"><a>" . $keyname . " " . $listicons ."</a></li>\n";
+
+                        }elseif($index !== 1 && $index == $index){ 
+
+                            $loadedlist .= "<li style=\"display: none\" class=\"" . $section["group"] . "\" id=\"". $section["url"] ."x\"><a>" . $keyname . " " . $listicons ."</a></li>\n";
+
+                        }
+
+                    $loadedurls .= "<div class=\"z-nopadding\" data-content-url=\"". $section["url"] ."\" data-content-type=\"iframe\"></div>\n";
+                    
+                    //echo "2nd . Name is $keyname Group Count is $groupCount and index is $index\n";
+
+                }
+
+            }
+            
         }
-        //Full Access
+            
+    }else{
+
+        //Full Access - Now with groups!
         if($_COOKIE["logged"] == $cookiepass && !empty($section["enabled"]) && ($section["enabled"]=="true")) {
+
             if($icons == "active"){ $listicons = "<span><i class=\"fa ". $section["icon"] ."\"></i></span>"; }
-            $loadedlist .= "<li id=\"". $section["url"] ."x\"><a>" . $keyname . " " . $listicons ."</a></li>\n";
-            $loadedurls .= "<div class=\"z-nopadding\" data-content-url=\"". $section["url"] ."\" data-content-type=\"iframe\"></div>\n";
-            
+
+            $loadedlist .= "<li group=\"" . $section["group"] . "\" id=\"". $section["url"] ."x\"><a>" . $keyname . " " . $listicons ."</a></li>\n";
+
+            $loadedurls .= "<div group=\"" . $section["group"] . "\" class=\"z-nopadding\" data-content-url=\"". $section["url"] ."\" data-content-type=\"iframe\"></div>\n";
+
         }
-        //General
-        if (empty($title)) $title = 'Manage My HTPC';
-        if(($keyname == "general")) { $title = $section["title"]; $tabcoloractive = $section["tabcoloractive"]; $fontcoloractive = $section["fontcoloractive"]; $tabcolor = $section["tabcolor"]; $fontcolor = $section["fontcolor"]; $tabshadowactive = $section["tabshadowactive"]; $tabshadow = $section["tabshadow"]; $cookiepass = $section["password"]; $bg = $section["bg"]; $tabborder  = $section["tabborder"]; $tabhighlight  = $section["tabhighlight"];}
+
+    }
+
+    //General
+    if (empty($title)) $title = 'Manage My HTPC';
+
+    if(($keyname == "general")) { 
+
+        $title = $section["title"]; 
+
+        $tabcoloractive = $section["tabcoloractive"]; 
+
+        $fontcoloractive = $section["fontcoloractive"]; 
+
+        $tabcolor = $section["tabcolor"]; 
+
+        $fontcolor = $section["fontcolor"]; 
+
+        $tabshadowactive = $section["tabshadowactive"]; 
+
+        $tabshadow = $section["tabshadow"]; 
+
+        $cookiepass = $section["password"]; 
+
+        $bg = $section["bg"]; 
+
+        $tabborder  = $section["tabborder"]; 
+
+        $tabhighlight  = $section["tabhighlight"];
+
+    }
 
 }
     if($_COOKIE["logged"] !== $cookiepass){
@@ -89,8 +201,21 @@ foreach ($config as $keyname => $section) {
     }
 
     if($_COOKIE["logged"] == $cookiepass){
-        $lasttablist .= "<li><a>Settings" . $adminicons . "</a></li>\n";
-        $lasttaburl .= "<div class=\"z-nopadding\" data-content-url=\"setup.php\" data-content-type=\"iframe\"></div>\n";
+        
+        if($groupCount > 1){
+            
+            $lasttablist .= "<li class=\"donthide\"><a>Settings" . $adminicons . "</a></li><li class=\"donthide\"><a class=\"swapGroup\">Swap Group" . $swapicons . "</a></li>\n";
+            $lasttaburl .= "<div class=\"z-nopadding\" data-content-url=\"setup.php\" data-content-type=\"iframe\"></div>\n";
+            $lasttaburl .= "<div class=\"z-nopadding\" data-content-url=\"swap.php\" data-content-type=\"iframe\"></div>\n";
+            
+        }elseif(!isset($groupCount) || $groupCount == 1){
+            
+            $lasttablist .= "<li class=\"donthide\"><a>Settings" . $adminicons . "</a></li>\n";
+            $lasttaburl .= "<div class=\"z-nopadding\" data-content-url=\"setup.php\" data-content-type=\"iframe\"></div>\n";
+            
+        }
+        
+        
         $defaulttab = $defaulttabuser;
     }
 
@@ -102,55 +227,75 @@ foreach ($config as $keyname => $section) {
     if(empty($defaulttab)){ $defaulttab = "tab1";}
 
 ?>
+
 <!doctype html>
 <html class="z-white z-width1200">
 
     <head>
 
         <title><?=$title;?></title>
+        
         <meta charset="utf-8">
+        
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+        
         <meta name="apple-mobile-web-app-capable" content="yes" />
+        
         <meta name="mobile-web-app-capable" content="yes" />
+        
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        
         <meta name="msapplication-tap-highlight" content="no" />
+        
         <link rel="shortcut icon" href="favicon.ico" type="image/ico"/>
+        
         <link href="css/min.css" rel="stylesheet" />
+        
         <link href="css/tabs.min.css" rel="stylesheet" />
+        
         <script src="js/jquery.min.js"></script>
+        
         <script src="js/tabs.min.js"></script>
+        
         <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
+        
         <style>
+            
             .z-tabs.white.z-bordered > ul > li.z-active > a {color: <?=$fontcoloractive;?>; background-color: <?=$tabcoloractive;?>; text-shadow: 0 1px <?=$tabshadowactive;?>;}
+            
+            .z-tabs.horizontal.responsive > ul > li > a, .z-tabs.horizontal.top-compact > ul > li > a, .z-tabs.horizontal.bottom-compact > ul > li > a, .z-tabs.horizontal.top-center > ul > li > a, .z-tabs.horizontal.bottom-center > ul > li > a { color: <?=$fontcolor;?>; background-color: <?=$tabcolor;?>; text-shadow: 0 1px <?=$tabshadow;?>;}
+            
+            .z-tabs.mobile {position: absolute;top: 0;bottom: 0;left: 0;right: 0;overflow: overlay;}
+
+            .z-tabs.white > ul, .z-tabs.white > ul > li > a, .z-tabs.white > .z-container {border-color: <?=$tabborder;?>;}
+
+            .z-tabs.horizontal.top.white.z-bordered > ul > li.z-active > a { border-top: 2px solid <?=$tabhighlight;?>; }
+        
         </style>
-        <style>
-            .z-tabs.horizontal.responsive > ul > li > a, .z-tabs.horizontal.top-compact > ul > li > a, .z-tabs.horizontal.bottom-compact > ul > li > a, .z-tabs.horizontal.top-center > ul > li > a, .z-tabs.horizontal.bottom-center > ul > li > a {
-    color: <?=$fontcolor;?>; background-color: <?=$tabcolor;?>; text-shadow: 0 1px <?=$tabshadow;?>;
-}
-        </style>
-        <style>.z-tabs.mobile {position: absolute;top: 0;bottom: 0;left: 0;right: 0;overflow: overlay;}</style>
-        <style>.z-tabs.white > ul, .z-tabs.white > ul > li > a, .z-tabs.white > .z-container {border-color: <?=$tabborder;?>;}</style>
-        <style>.z-tabs.horizontal.top.white.z-bordered > ul > li.z-active > a { border-top: 2px solid <?=$tabhighlight;?>; }</style>
+        
         <script>
+            
+            sessionStorage.currentGroup = 1;
 
             $(document).ready(function(){
+                
                 $("li").dblclick(function(){
+                    
                     var frame = this.id.slice(0, -1);
+                    
                     var f = document.getElementById(frame);
+                    
                     f.src = f.src;
+                    
                 });
+                
             });
 
         </script>
     
     </head>
 
-    <body style="position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: <?=$bg;?>; 
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
-  background-size: cover;
-    overflow: hidden;">
+    <body style="position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: <?=$bg;?>; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: hidden;">
 
         <!--<span>&nbsp;</span>-->
 
@@ -158,21 +303,53 @@ foreach ($config as $keyname => $section) {
 
             <!--Tabs Start-->
             <div id="tabbed-nav">
-
-                <ul>
+                                
+                <ul id="grouping">
 
                     <?=$loadedlist;?>
+                    
                     <?=$lasttablist;?>
 
                 </ul>
 
                 <!-- Content container -->
-                <style> .z-container { position: absolute; top: 50px; right: 0px; bottom: 0px; left: 0px; margin: <?=$marginpx;?>; } </style>
-                <style> .z-tabs .z-container{ margin: <?=$marginpx;?>; border-width: <?=$marginborderpx;?>; } </style>
-                <style> .z-tabs.mobile.top > .z-container {margin-top: <?=$pxmobile;?>;} </style>
-                <style> .z-video{position: absolute; height: 100%; width: 100%;-webkit-overflow-scrolling: touch; overflow: auto;}</style>
-                <style> .z-content-inner{overflow: hidden;}</style>
-                <style> .z-nopadding.z-content{overflow: hidden}</style>
+                <style> 
+                    
+                    .z-container { position: absolute; top: 50px; right: 0px; bottom: 0px; left: 0px; margin: <?=$marginpx;?>; } 
+                
+                </style>
+                
+                <style> 
+                    
+                    
+                    .z-tabs .z-container{ margin: <?=$marginpx;?>; border-width: <?=$marginborderpx;?>; } 
+                
+                </style>
+                
+                <style> 
+                    
+                    .z-tabs.mobile.top > .z-container {margin-top: <?=$pxmobile;?>;} 
+                
+                </style>
+                
+                <style> 
+                    
+                    .z-video{position: absolute; height: 100%; width: 100%;-webkit-overflow-scrolling: touch; overflow: auto;}
+                
+                </style>
+                
+                <style> 
+                    
+                    .z-content-inner{overflow: hidden;}
+                
+                </style>
+                
+                <style> 
+                    
+                    .z-nopadding.z-content{overflow: hidden}
+                
+                </style>
+                
                 <div style="top: <?=$px;?>; overflow: hidden;">              
 
                     <?=$loadedurls;?>
@@ -186,23 +363,85 @@ foreach ($config as $keyname => $section) {
         </div>
 
         <script>
+            
             jQuery(document).ready(function ($) {
+                
                 /* jQuery activation and setting options for the tabs*/
                 $("#tabbed-nav").zozoTabs({
+                    
                     defaultTab: "<?=$defaulttab;?>",
                     multiline: true,
                     theme: "white",
                     position: "top-compact",
                     size: "mini",
                     animation: {
+                        
                         easing: "easeInOutExpo",
                         duration: 450,
                         effects: "fade"
+                        
                     }
+                    
                 });
+                
             });
+            
+
+            
+        </script>
+        
+        <script>
+        
+            $('.swapGroup').click(function(){
+            
+                if (typeof sessionStorage.getItem("currentGroup") === 'undefined' || sessionStorage.getItem("currentGroup") === null) {
+
+                    sessionStorage.currentGroup = 1
+
+                    currentGroup = 1
+
+                }
+
+                var currentGroup = sessionStorage.getItem("currentGroup")
+
+                if(currentGroup === "<?=$groupCount;?>"){
+
+                    currentGroup = 0
+
+                }
+
+                currentGroup ++
+
+                $("#grouping li").show()
+
+                $("#grouping li").not('.' + currentGroup + ', .donthide').hide();
+                
+                var countTabs = $("ul").find("." + currentGroup + ", .donthide").length;
+                
+                var countTabsPercent = 100 / countTabs + '%';
+                
+                $("ul").find("." + currentGroup + ", .donthide").css({"width": countTabsPercent});
+
+                sessionStorage.currentGroup = currentGroup
+
+            });
+        
+        </script>
+        
+        <script>           
+
+            $(window).load(function(){
+            
+                var countTabs = $("ul").find(".1, .donthide").length;
+
+                var countTabsPercent = 100 / countTabs + '%';
+
+                $("ul").find(".1, .donthide").css({"width": countTabsPercent});
+                
+            });
+
         </script>
 
     </body>
     
-</html>
+</html>

settings.php

@@ -1,5 +1,7 @@
 <?php
+
 error_reporting (E_ALL ^ E_NOTICE);
+
 try {
     
     $config = parse_ini_file('settings.ini.php', true);
@@ -87,6 +89,8 @@ if(array_key_exists('category-0', $_POST) == true){
     setcookie("logged", $_POST["password-0"], time() + (86400 * 7), "/");
     
     $sampleData .= '; <?php die("Access denied"); ?>' . "\r\n";
+    
+    $getGroup = 0;
 
     foreach ($_POST as $parameter => $value) {
         
@@ -95,6 +99,16 @@ if(array_key_exists('category-0', $_POST) == true){
         if ($value == "on")
             $value = "true";
 
+        if($splitParameter[0] == "group"){
+            
+            if($value > $getGroup){
+                
+                $getGroup++;
+                
+            }
+            
+        }
+        
         if($splitParameter[0] == "category"){
             
             $sampleData .= "[" . $value . "]\r\n";
@@ -106,6 +120,10 @@ if(array_key_exists('category-0', $_POST) == true){
         }
 
     }
+    
+    //$sampleData .= "[groups]\r\n";
+    
+    $sampleData .= "groups = \"" . $getGroup . "\"\r\n";
 
     if($action == "write"){
         
@@ -309,13 +327,15 @@ if(array_key_exists('category-0', $_POST) == true){
             
             <div id="tabs" class="collapse">
                 
+                <div class="btn-group"><button data-toggle="collapse" data-target="#groupnames" type="button" class="btn btn-primary">Edit Group Names</button></div>
+                
                 <div id="tagsForm" class="sortable">
 
                     <?php $i = 0;
                     
                     foreach ($config as $keyname => $section) {
 
-                        if(($keyname !== "general")) {
+                        if(($keyname !== "general") && ($keyname !== "groups")) {
                             
                             if(!isset($section['group'])){
                                 
@@ -369,10 +389,65 @@ if(array_key_exists('category-0', $_POST) == true){
                         
                         $i++;
                         
-                    }
+                    }?>
+
+                </div>
+                
+                <div id="groupnames" class="collapse">
                     
-                    $tabCount = $i;?>
+                    <input type="hidden" name="category-x" class="form-control" value="groups">
+                
+                    <?php 
+                    
+                    $alphabet = range('A', 'Z');
+
+                    //echo $alphabet[3]; // returns D
+                    //echo array_search('D', $alphabet); // returns 3
+                    
+                    foreach ($config as $keyname => $section) {
 
+                        if(($keyname == "groups")) {
+                    
+                            if($section['groups'] > count($section)){
+                                
+                                echo "<div class=\"form-group clearfix well well-sm\" style=\"padding-bottom: 0px; padding-top: 10px; margin-bottom: 5px;\">";                            
+                                
+                                foreach(range(1,$section['groups']) as $index) {
+                                    
+                                    echo "<span class=\"btn btn-inactive \" type=\"button\"><span class=\"fa fa-folder-open\"></span></span> ";
+                                    
+                                    echo "<div style=\"margin-bottom: 8px\" class=\"input-group\"><div class=\"input-group-addon\">Group-". $alphabet[$index - 1] . "</div>";
+                                    
+                                    echo "<input style=\"margin-bottom: 0px\" type=\"text\" name=\"group" . $alphabet[$index - 1] . "-xx\" class=\"form-control\" value=\"" . $section["title"] . "\"></div> <br>";
+
+                                }
+                                
+                                echo "</div>";
+                                
+                            }else{
+                                
+                                echo "<div class=\"form-group clearfix well well-sm\" style=\"padding-bottom: 0px; padding-top: 10px; margin-bottom: 5px;\">";                            
+                                
+                                foreach(range(1,$section['groups']) as $index) {
+                                    
+                                    $groupLetter = $alphabet[$index - 1];
+                                    
+                                    echo "<span class=\"btn btn-inactive \" type=\"button\"><span class=\"fa fa-folder-open\"></span></span> ";
+                                    
+                                    echo "<div style=\"margin-bottom: 8px\" class=\"input-group\"><div class=\"input-group-addon\">Group-" . $index . "</div>";
+                                    
+                                    echo "<input style=\"margin-bottom: 0px\" type=\"text\" name=\"group" . $groupLetter . "-xx\" class=\"form-control\" value=\"" . $section["group$groupLetter"] . "\"></div> <br>";
+
+                                }
+                                
+                                echo "</div>";
+                                
+                            }
+                            
+                        }
+    
+                    }?>
+                
                 </div>
 
                 <div class="form-group clearfix">
@@ -623,7 +698,7 @@ if(array_key_exists('category-0', $_POST) == true){
 
                 $('#addScnt').on('click', function() {
                     
-                    $('<div class="form-group clearfix ui-sortable-handle well well-sm" style="padding-bottom: 0px; padding-top: 10px; margin-bottom: 5px;"> <span class="btn btn-default move" type="button"><span class="fa fa-arrows"></span></span> <div style="margin-bottom: 8px" class="input-group"><div class="input-group-addon">Name</div><input style="margin-bottom: 0px" name="category-' + i +'" class="form-control" placeholder="Tag" value="New Tab"></div> <div style="margin-bottom: 8px" class="input-group"><div class="input-group-addon">URL</div><input style="margin-bottom: 0px" type="text" name="url-' + i +'" class="form-control" placeholder="url" value="Add URL"></div> <button data-placement="left" data-cols="5" data-rows="5" class="btn btn-default iconpicker" name="icon-' + i +'" role="iconpicker" data-iconset="fontawesome" data-icon="fa-question"><i class="fa fa-play-circle-o"></i><input type="hidden" name="icon-' + i +'" value="fa-play-circle-o"><span class="caret"></span></button> <input type="radio" name="default"> <label> Default</label><input type="checkbox" name="enabled-' + i +'" id="enabled-' + i +'" class="css-checkbox" checked> <label for="enabled-' + i +'" class="css-label">Enabled</label> <input type="checkbox" name="guest-' + i +'" id="guest-' + i +'" class="css-checkbox"> <label for="guest-' + i +'" class="css-label">Guest</label> <button style="float: right" class="btn btn-danger deleteGroup" id="remScnt" type="button"><span class="fa fa-trash"></span></button></div>').appendTo(scntDiv);
+                    $('<div class="form-group clearfix ui-sortable-handle well well-sm" style="padding-bottom: 0px; padding-top: 10px; margin-bottom: 5px;"> <span class="btn btn-default move" type="button"><span class="fa fa-arrows"></span></span> <div style="margin-bottom: 8px" class="input-group"><div class="input-group-addon">Name</div><input style="margin-bottom: 0px" name="category-' + i +'" class="form-control" placeholder="Tag" value="New Tab"></div> <div style="margin-bottom: 8px" class="input-group"><div class="input-group-addon">URL</div><input style="margin-bottom: 0px" type="text" name="url-' + i +'" class="form-control" placeholder="url" value="Add URL"></div> <div style="margin-bottom: 8px" class="input-group"><div class="input-group-addon">Group</div><input style="margin-bottom: 0px; width: 35px" type="text" name="group-' + i +'" class="form-control" placeholder="1" value="1"></div> <button data-placement="left" data-cols="5" data-rows="5" class="btn btn-default iconpicker" name="icon-' + i +'" role="iconpicker" data-iconset="fontawesome" data-icon="fa-question"><i class="fa fa-play-circle-o"></i><input type="hidden" name="icon-' + i +'" value="fa-play-circle-o"><span class="caret"></span></button> <input type="radio" name="default"> <label> Default</label><input type="checkbox" name="enabled-' + i +'" id="enabled-' + i +'" class="css-checkbox" checked> <label for="enabled-' + i +'" class="css-label">Enabled</label> <input type="checkbox" name="guest-' + i +'" id="guest-' + i +'" class="css-checkbox"> <label for="guest-' + i +'" class="css-label">Guest</label> <button style="float: right" class="btn btn-danger deleteGroup" id="remScnt" type="button"><span class="fa fa-trash"></span></button></div>').appendTo(scntDiv);
                     i++;    
                     return false;
 

swap.php

@@ -0,0 +1,51 @@
+<php
+     
+     //this is a placeholder file until i decide what i want to do with swapping groups
+     
+     ?>
+    
+<!DOCTYPE html>
+<html>
+
+    <head>
+
+        <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
+
+        <title>Swap Groups</title>
+
+        <style type="text/css">
+
+            body { text-align: center; padding: 150px; }
+
+            h1 { font-size: 40px; }
+
+            body { font: 20px Helvetica, sans-serif; color: #333; }
+
+            #article { display: block; text-align: left; width: 650px; margin: 0 auto; }
+
+            a { color: #dc8100; text-decoration: none; }
+
+            a:hover { color: #333; text-decoration: none; }
+
+        </style>
+
+    </head>
+
+    <body>
+        <div id="article">
+
+            <h1>Choose a Tab to view it's page.</h1>
+
+            <div>
+
+                <p>You can click Swap Group again to go the next Group or back to the pervious group id you only have 2 groups.</p>
+
+                <p>&mdash; CauseFX</p>
+
+            </div>
+
+        </div>
+
+    </body>
+
+</html>