From 20d1bab6af05dc6409cfdb4e7c0c0a9337d01e1d Mon Sep 17 00:00:00 2001
From: hasin <hasin@leevio.com>
Date: Sat, 13 Sep 2014 18:50:28 +0600
Subject: [PATCH 01/26] Support for Field's visibility based on other field's
 value

---
 class-option-select.php   |  2 +-
 class-option-text.php     |  9 +++++---
 class-titan-framework.php |  2 ++
 js/visibility.js          | 45 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 54 insertions(+), 4 deletions(-)
 mode change 100644 => 100755 class-option-select.php
 mode change 100644 => 100755 class-option-text.php
 mode change 100644 => 100755 class-titan-framework.php
 create mode 100644 js/visibility.js

diff --git a/class-option-select.php b/class-option-select.php
old mode 100644
new mode 100755
index 75da59a5..0e9e55ca
--- a/class-option-select.php
+++ b/class-option-select.php
@@ -14,7 +14,7 @@ class TitanFrameworkOptionSelect extends TitanFrameworkOption {
 	public function display() {
 		$this->echoOptionHeader();
 
-		?><select name="<?php echo $this->getID(); ?>"><?php
+		?><select name="<?php echo $this->getID(); ?>" id="<?php echo $this->getID(); ?>" data-did="<?php echo $this->settings['dependency']['id']; ?>" data-dvalue="<?php echo $this->settings['dependency']['value']; ?>" ><?php
 		foreach ( $this->settings['options'] as $value => $label ) {
 
 			// this is if we have option groupings
diff --git a/class-option-text.php b/class-option-text.php
old mode 100644
new mode 100755
index b2862386..5c3ebb69
--- a/class-option-text.php
+++ b/class-option-text.php
@@ -17,14 +17,17 @@ class TitanFrameworkOptionText extends TitanFrameworkOption {
 	 */
 	public function display() {
 		$this->echoOptionHeader();
-		printf("<input class=\"regular-text\" name=\"%s\" placeholder=\"%s\" maxlength=\"%s\" id=\"%s\" type=\"%s\" value=\"%s\"\> %s",
+		printf("<input class=\"regular-text\" name=\"%s\" placeholder=\"%s\" maxlength=\"%s\" id=\"%s\" type=\"%s\" value=\"%s\"  data-did=\"%s\"   data-dvalue=\"%s\" \> %s",
 			$this->getID(),
 			$this->settings['placeholder'],
 			$this->settings['maxlength'],
 			$this->getID(),
 			$this->settings['is_password'] ? 'password' : 'text',
-			esc_attr( $this->getValue() ), 
-			$this->settings['unit'] 
+			esc_attr( $this->getValue() ),
+            $this->settings['dependency']['id'],
+            $this->settings['dependency']['value'],
+			$this->settings['unit']
+
 		);
 		$this->echoOptionFooter();
 	}
diff --git a/class-titan-framework.php b/class-titan-framework.php
old mode 100644
new mode 100755
index 35b27088..e835e46e
--- a/class-titan-framework.php
+++ b/class-titan-framework.php
@@ -152,7 +152,9 @@ public function loadAdminScripts( $hook ) {
 			wp_enqueue_media();
 			wp_enqueue_script( 'tf-serialize', TitanFramework::getURL( 'js/serialize.js', __FILE__ ) );
 			wp_enqueue_script( 'tf-styling', TitanFramework::getURL( 'js/admin-styling.js', __FILE__ ) );
+			wp_enqueue_script( 'tf-visibility', TitanFramework::getURL( 'js/visibility.js', __FILE__ ) );
 			wp_enqueue_style( 'tf-admin-styles', TitanFramework::getURL( 'css/admin-styles.css', __FILE__ ) );
+            wp_localize_script("tf-visibility","fdata",array("namespace"=>$this->optionNamespace));
 		}
 	}
 
diff --git a/js/visibility.js b/js/visibility.js
new file mode 100644
index 00000000..b23586ac
--- /dev/null
+++ b/js/visibility.js
@@ -0,0 +1,45 @@
+(function ($) {
+    $(document).ready(function () {
+        $(".tf-text input, .tf-select select").each(function () {
+            var that = this;
+            var did = ($(this).data("did")); //dependency id
+            var dv = ($(this).data("dvalue")); //dependency value
+
+            if (did != "") {
+
+                var id = "#" + fdata.namespace + "_" + did;
+//                alert(id + "\n"+$(id).prop("tagName"));
+
+                if ($(id).prop("tagName") == "INPUT") {
+                    $(id).on("blur", function () {
+                        if ($(this).val() != dv) {
+                            $(that).parent().parent().hide();
+                        } else {
+                            $(that).parent().parent().show();
+                        }
+                    });
+                    $(id).on("keyup", function () {
+                        if ($(this).val() != dv) {
+                            $(that).parent().parent().hide();
+                        } else {
+                            $(that).parent().parent().show();
+                        }
+                    });
+                } else if ($(id).prop("tagName") == "SELECT") {
+                    $(id).on("change", function () {
+//                        console.log($(this).val());
+                        if ($(this).val() != dv) {
+                            $(that).parent().parent().hide();
+                        } else {
+                            $(that).parent().parent().show();
+                        }
+                    });
+                }
+
+                if ($("#" + did).val() != dv) {
+                    $(that).parent().parent().hide();
+                }
+            }
+        })
+    });
+})(jQuery)
\ No newline at end of file

From 5eb1295b99d15142fc1dde98197ad32cefc461cf Mon Sep 17 00:00:00 2001
From: hasin <hasin@leevio.com>
Date: Sat, 13 Sep 2014 20:08:53 +0600
Subject: [PATCH 02/26] Initial value validation

---
 js/visibility.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/visibility.js b/js/visibility.js
index b23586ac..e02fc74e 100644
--- a/js/visibility.js
+++ b/js/visibility.js
@@ -36,7 +36,7 @@
                     });
                 }
 
-                if ($("#" + did).val() != dv) {
+                if ($(id).val() != dv) {
                     $(that).parent().parent().hide();
                 }
             }

From bdc75851f87c0850f9c34ba6b4c2ce42c98439e9 Mon Sep 17 00:00:00 2001
From: Hasin Hayder <hasin@leevio.com>
Date: Sat, 13 Sep 2014 22:57:27 +0600
Subject: [PATCH 03/26] Gallery Placeholder

---
 class-option-gallery.php | 31 +++++++++++++++++++++++++++++++
 class-option-text.php    |  1 +
 js/gallery.js            | 35 +++++++++++++++++++++++++++++++++++
 titan-framework.php      |  1 +
 4 files changed, 68 insertions(+)
 create mode 100644 class-option-gallery.php
 create mode 100644 js/gallery.js

diff --git a/class-option-gallery.php b/class-option-gallery.php
new file mode 100644
index 00000000..6e8d272c
--- /dev/null
+++ b/class-option-gallery.php
@@ -0,0 +1,31 @@
+<?php
+
+if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
+
+class TitanFrameworkOptionGallery extends TitanFrameworkOption {
+
+
+    function __construct($settings, $owner){
+        parent::__construct($settings,$owner);
+        add_action("admin_enqueue_scripts",array($this,'enqueueScripts'));
+    }
+    /*
+     * Display for options and meta
+     */
+    public function display() {
+        if(!isset($this->settings['dependency'])) $this->settings['dependency']=array("id"=>"","value"=>"");
+        $this->echoOptionHeader();
+        echo "Galery Placeholder";
+        echo "<input name='".$this->getID()."'  type='hidden' value='".$this->getValue()."'/>";
+        echo "<input type='button' value='click' id='galgal'>";
+        $this->echoOptionFooter();
+    }
+
+    public function enqueueScripts(){
+        wp_enqueue_media();
+        wp_enqueue_script("tf-gallery",get_template_directory_uri()."/libs/titan-framework/js/gallery.js","jquery","1.0",true);
+    }
+
+
+
+}
\ No newline at end of file
diff --git a/class-option-text.php b/class-option-text.php
index 5c3ebb69..65d27d9a 100755
--- a/class-option-text.php
+++ b/class-option-text.php
@@ -16,6 +16,7 @@ class TitanFrameworkOptionText extends TitanFrameworkOption {
 	 * Display for options and meta
 	 */
 	public function display() {
+        if(!isset($this->settings['dependency'])) $this->settings['dependency']=array("id"=>"","value"=>"");
 		$this->echoOptionHeader();
 		printf("<input class=\"regular-text\" name=\"%s\" placeholder=\"%s\" maxlength=\"%s\" id=\"%s\" type=\"%s\" value=\"%s\"  data-did=\"%s\"   data-dvalue=\"%s\" \> %s",
 			$this->getID(),
diff --git a/js/gallery.js b/js/gallery.js
new file mode 100644
index 00000000..16df15c5
--- /dev/null
+++ b/js/gallery.js
@@ -0,0 +1,35 @@
+(function($){
+    $(document).ready(function(){
+        alert("hi");
+    });
+
+    $("#galgal").on("click",function(){
+        file_frame = wp.media.frames.file_frame = wp.media({
+            frame:    'post',
+            state:    'insert',
+            multiple: true
+        });
+
+        /**
+         * Setup an event handler for what to do when an image has been
+         * selected.
+         *
+         * Since we're using the 'view' state when initializing
+         * the file_frame, we need to make sure that the handler is attached
+         * to the insert event.
+         */
+        file_frame.on( 'insert', function() {
+
+            /**
+             * We'll cover this in the next version.
+             */
+            var data = file_frame.state().get( 'selection' ).toJSON();
+            console.log(data);
+
+        });
+
+        // Now display the actual file_frame
+        file_frame.open();
+
+    })
+})(jQuery);
\ No newline at end of file
diff --git a/titan-framework.php b/titan-framework.php
index 2e2cfe3f..dac79e93 100644
--- a/titan-framework.php
+++ b/titan-framework.php
@@ -49,6 +49,7 @@
 require_once( TF_PATH . 'class-option-select-posts.php' );
 require_once( TF_PATH . 'class-option-select.php' );
 require_once( TF_PATH . 'class-option-sortable.php' );
+require_once( TF_PATH . 'class-option-gallery.php' );
 require_once( TF_PATH . 'class-option-text.php' );
 require_once( TF_PATH . 'class-option-textarea.php' );
 require_once( TF_PATH . 'class-option-upload.php' );

From 2e2ae411ae9b20eefd2ce7ce95a9f1c51970a207 Mon Sep 17 00:00:00 2001
From: Hasin Hayder <hasin@leevio.com>
Date: Sun, 14 Sep 2014 02:37:01 +0600
Subject: [PATCH 04/26] Gallery Placeholder

---
 js/gallery.js | 36 +++++++++++++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/js/gallery.js b/js/gallery.js
index 16df15c5..f7433ec8 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -1,9 +1,19 @@
 (function($){
+    var file_frame,data,ats;
+    ats = [];
     $(document).ready(function(){
         alert("hi");
     });
 
+
+
     $("#galgal").on("click",function(){
+
+        if ( file_frame ) {
+            file_frame.open();
+            return;
+        }
+
         file_frame = wp.media.frames.file_frame = wp.media({
             frame:    'post',
             state:    'insert',
@@ -19,13 +29,33 @@
          * to the insert event.
          */
         file_frame.on( 'insert', function() {
-
             /**
              * We'll cover this in the next version.
              */
-            var data = file_frame.state().get( 'selection' ).toJSON();
-            console.log(data);
+            var data = file_frame.state().get( 'selection' );
+            alert("ss");
+            data.map( function( attachment ) {
+
+                //console.log(attachment);
+                ats.push(attachment.id);
+                console.log(attachment.attributes);
+                attachment = attachment.toJSON();
+
+                // Do something with attachment.id and/or attachment.url here
+            });
+            var jdata = data.toJSON();
+
+            console.log(jdata);
+
+        });
+
+        file_frame.on('open', function(){
+            var selection = file_frame.state().get('selection');
 
+            if (ats.length>0) {
+                for(i in ats)
+                selection.add(wp.media.attachment(ats[i]));
+            }
         });
 
         // Now display the actual file_frame

From 56fa1f66bd778f0410477e365b5a017a1e0a0dde Mon Sep 17 00:00:00 2001
From: hasin <hasin@leevio.com>
Date: Mon, 15 Sep 2014 19:53:56 +0600
Subject: [PATCH 05/26] Functional Gallery

---
 class-option-gallery.php     |   7 +-
 css/admin-styles.css         | 544 ++++++++++++++++-------------------
 css/class-option-gallery.css |  18 ++
 js/gallery.js                | 121 ++++----
 js/visibility.js             |   5 +-
 5 files changed, 336 insertions(+), 359 deletions(-)
 create mode 100644 css/class-option-gallery.css

diff --git a/class-option-gallery.php b/class-option-gallery.php
index 6e8d272c..6036f7c9 100644
--- a/class-option-gallery.php
+++ b/class-option-gallery.php
@@ -15,15 +15,16 @@ function __construct($settings, $owner){
     public function display() {
         if(!isset($this->settings['dependency'])) $this->settings['dependency']=array("id"=>"","value"=>"");
         $this->echoOptionHeader();
-        echo "Galery Placeholder";
-        echo "<input name='".$this->getID()."'  type='hidden' value='".$this->getValue()."'/>";
-        echo "<input type='button' value='click' id='galgal'>";
+        echo "<ul class='gallery-ph'></ul>";
+        echo "<input class='galleryinfo' name='".$this->getID()."'  type='hidden' value='".$this->getValue()."'/>";
+        echo "<input type='button' value='Add Images To Gallery' class='galgal button button-primary button-large'>";
         $this->echoOptionFooter();
     }
 
     public function enqueueScripts(){
         wp_enqueue_media();
         wp_enqueue_script("tf-gallery",get_template_directory_uri()."/libs/titan-framework/js/gallery.js","jquery","1.0",true);
+        wp_enqueue_style("tf-gallery-css",get_template_directory_uri()."/libs/titan-framework/css/class-option-gallery.css");
     }
 
 
diff --git a/css/admin-styles.css b/css/admin-styles.css
index d03e489b..511f4607 100644
--- a/css/admin-styles.css
+++ b/css/admin-styles.css
@@ -1,415 +1,351 @@
-/*
- * TODO: separate styles into multiple imports
- */
-
-@import "class-option-font.css";
+/* Styles for the preview image option */
+.tf-image-preview img {
+    max-width: 100%;
+    max-height: 200px;
+    padding: 2px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    box-sizing: border-box;
+    background: #666;
+}
+.tf-image-preview img:hover {
+    cursor: pointer;
+}
 
 /* note option padding issue */
 .tf-note .updated p {
-	margin-bottom: 4px;
+    margin-bottom: 4px;
 }
 
 @media screen and (min-width: 783px) {
-	.tf-select-googlefont iframe {
-		width: 100%;
-		height: 120px;
-		background: #FFF;
-		background: rgba(255, 255, 255, .7);
-		margin-top: 4px;
-	}
-	.form-table td.tf-select-googlefont fieldset label {
-		display: inline-block;
-		padding-left: 20px;
-		width: 200px;
-	}
+    .tf-select-googlefont iframe {
+        width: 100%;
+        height: 120px;
+        background: #FFF;
+        background: rgba(255, 255, 255, .7);
+        margin-top: 4px;
+    }
+    .form-table td.tf-select-googlefont fieldset label {
+        display: inline-block;
+        padding-left: 20px;
+        width: 200px;
+    }
 }
 
 /*
- * Styles for metaboxes in the sidebar
+ * Base styling for admin pages
  */
-#side-sortables .tf-form-table,
-#side-sortables .tf-form-table tbody,
-#side-sortables .tf-form-table tr,
-#side-sortables .tf-form-table th,
-#side-sortables .tf-form-table td {
-	display:block;
-}
 
-#side-sortables .tf-form-table th {
-	padding: 10px 0px 0px;
+/* main wrapper */
+.titan-framework-panel-wrap.wrap {
+    background: #FFF;
+    border: 1px solid #eaeaea;
+}
+/* title */
+.titan-framework-panel-wrap.wrap h2 {
+    padding: 20px 15px;
+    border-bottom: 1px solid #EEE;
+    font-weight: normal;
+    font-size: 21px;
+    background: #333;
+    color: #FFF;
+}
+.titan-framework-panel-wrap.wrap .nav-tab-wrapper + h2 {
+    background: #333;
+    color: #FFF;
+    border: 0;
+}
+/* tabs */
+.titan-framework-panel-wrap h2.nav-tab-wrapper, .titan-framework-panel-wrap h3.nav-tab-wrapper {
+    border: 0;
+    padding: 0;
+    background: #1E8CBE;
 }
-
-#side-sortables .tf-form-table td {
-	padding: 5px 0px;
+.titan-framework-panel-wrap h2 .nav-tab {
+    border: 0;
+    margin: 0;
+    background: transparent;
+    padding: 10px 15px;
+    color: #FFF;
+    font-weight: normal;
+    margin-right: 5px;
 }
-
-#side-sortables .tf-form-table td input {
-	max-width:100%;
+.titan-framework-panel-wrap h2 .nav-tab:hover {
+    background: rgba(255, 255, 255, .2);
 }
-
-#side-sortables .tf-radio-image label:first-child,
-#side-sortables .tf-radio-image label {
-	display: inline-block;
-	margin-left: 10px;
-	margin-top: 10px;
+.titan-framework-panel-wrap h2 .nav-tab.nav-tab-active, .titan-framework-panel-wrap h2 .nav-tab.nav-tab-active:hover {
+    background: rgba(0, 0, 0, .3);
 }
-
-/*
- * Base styling for admin pages
- */
-
-/* main wrapper */
-.titan-framework-panel-wrap {
-	border-bottom: 1px solid #DDD;
-    margin-bottom: 20px;
-}
-
-/* Tabs */
-.titan-framework-panel-wrap .nav-tab-wrapper { margin-bottom: 20px; }
-
 /* option tables */
-.titan-framework-panel-wrap .form-table th,
-.titan-framework-panel-wrap .form-table td {
-	padding: 20px 20px;
+.titan-framework-panel-wrap .form-table th {
+    padding-left: 15px;
 }
-
-.titan-framework-panel-wrap .wp_themeSkin table td {
-	padding: 0;
+.titan-framework-panel-wrap .form-table tr {
+    border-bottom: 1px solid #eee;
 }
-
-.titan-framework-panel-wrap .form-table {
-	margin-top: 0;
+/* submit buttons */
+.titan-framework-panel-wrap table.form-table+p.submit {
+    padding: 15px;
+    /*	margin-top: 5px;*/
+    background: #333;
+    margin: 0;
+    /*	border-bottom: 1px solid #EEE;*/
+    border-radius: 0;
 }
-.titan-framework-panel-wrap .form-table tr {
-	background: white;
-	border-bottom: 1px solid #eee;
+.titan-framework-panel-wrap table.form-table+p.submit+table.form-table {
+    margin-top: 0;
 }
-
-.titan-framework-panel-wrap .form-table .wp_themeSkin .mceStatusbar { padding: 0 0 0 8px; }
-.titan-framework-panel-wrap .form-table .wp_themeSkin .mceToolbar { padding: 1px; }
-
-.titan-framework-panel-wrap p.submit {
-	background: #FFF;
-	margin-top: 0;
-	margin-bottom: 0;
-	padding: 15px 20px;
-	border-bottom: 1px solid #eee;
+.titan-framework-panel-wrap table.form-table+p.submit+table.form-table tbody tr.tf-heading:first-child th {
+    padding-top: 30px;
+    position: relative;
 }
-.titan-framework-panel-wrap .form-table+p.submit {
-	padding: 15px 20px;
+.titan-framework-panel-wrap table.form-table+p.submit+table.form-table tbody tr.tf-heading:first-child th h3 {
+    font-size: 21px;
 }
-
-/* This line is for font options description */
-.titan-framework-panel-wrap .tf-font p.description,
-.titan-framework-panel-wrap .tf-radio p.description,
-.titan-framework-panel-wrap .tf-multicheck p.description {
-	margin-bottom: 8px;
+.titan-framework-panel-wrap table.form-table+p.submit+table.form-table tbody tr.tf-heading:first-child th:after {
+    position: absolute;
+    content: '';
+    top: 0;
+    left: -1px;
+    right: -1px;
+    height: 30px;
+    z-index: 9;
+    background: #F1F1F1;
+}
+.titan-framework-panel-wrap form p.submit:nth-last-of-type(1) {
+    border-bottom: 0;
+}
+.titan-framework-panel-wrap .submit .button-primary, .titan-framework-panel-wrap .submit .button-secondary {
+    background: #1E8CBE;
+    border: 0;
+    box-shadow: none;
+    border-radius: 2px;
+    height: auto;
+    line-height: 36px;
+    padding: 0 15px;
+    margin-right: 10px;
+}
+.titan-framework-panel-wrap .submit .button-secondary {
+    background: #777;
+    color: #fff;
+}
+.titan-framework-panel-wrap .submit .button-primary:hover {
+    background: #2980b9;
+}
+.titan-framework-panel-wrap .submit .button-secondary:hover {
+    background: #666;
 }
-
 /* google font iframe */
 .tf-select-googlefont iframe {
-	background: #fafafa;
+    background: #fafafa;
 }
-
 /* notifications */
-.titan-framework-panel-wrap div.updated,
-.titan-framework-panel-wrap div.error {
-
-}
-
-.titan-framework-panel-wrap h2 + div.updated,
-.titan-framework-panel-wrap h2 + div.error {
-
+.titan-framework-panel-wrap div.updated, .titan-framework-panel-wrap div.error {
+    margin: 15px;
+    box-shadow: none;
+    border-top: 1px solid #EEE;
+    border-right: 1px solid #EEE;
+    border-bottom: 1px solid #EEE;
+}
+.titan-framework-panel-wrap h2 + div.updated, .titan-framework-panel-wrap h2 + div.error {
+    background: #2ECC71;
+    border: 0;
+    color: #FFF;
+    margin: 0;
 }
-
 .titan-framework-panel-wrap h2 + div.error {
+    background: #e74c3c;
 }
-
 /* notes */
 .titan-framework-panel-wrap .tf-note .updated {
-
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-style: italic;
+    color: #999;
 }
-
 /* heading */
 .titan-framework-panel-wrap .tf-heading th {
-    background: #F1F1F1;
-    padding: 0;
+    padding: 0 15px;
+    background: #333;
 }
-
-
-.titan-framework-panel-wrap .options-container h2,
-.titan-framework-panel-wrap .tf-heading h3 {
-    background: none repeat scroll 0 0 #F5F5F5;
-	border-left: 1px solid #DFDFDF;
-	border-top: 1px solid #DFDFDF;
-    border-right: 1px solid #DFDFDF;
-	border-bottom: 1px solid #DFDFDF;
-    color: #222222;
-	font-size: 14px;
-	font-weight: 600;
-    line-height: 1.4;
-    margin: 20px 0 0;
-    padding: 10px 20px;
+.titan-framework-panel-wrap .tf-heading th * {
+    color: #fff;
+    font-weight: normal;
 }
-
-.titan-framework-panel-wrap .options-container h2 { margin-bottom: -6px; }
-
 /* radio-palette */
 .tf-radio-palette span {
-	display: inline-block;
-	height: 40px;
+    display: inline-block;
+    height: 40px;
 }
-
 .tf-radio-palette span span {
-	width: 15px;
+    width: 15px;
 }
-
 .tf-radio-palette > label > span {
-	padding: 2px;
-	border: 1px solid #ddd;
+    padding: 2px;
+    border: 1px solid #ddd;
 }
-
 .tf-radio-palette input[type=radio] {
-	vertical-align: top;
-	margin-top: 17px;
+    vertical-align: top;
+    margin-top: 17px;
 }
-
 .tf-radio-palette label {
-	margin: 0 30px 10px 0;
-	display: inline-block;
+    margin-left: 30px;
+    white-space: nowrap;
 }
-
 .tf-radio-palette label:first-child {
-	margin-left: 0
+    margin-left: 0
 }
-
 /* radio images */
 .tf-radio-image label {
-	white-space: nowrap;
-	display: inline-block;
-	margin-right: 30px;
-	margin-bottom: 10px;
+    margin-left: 30px;
+    white-space: nowrap;
+}
+.tf-radio-image label:first-child {
+    margin-left: 0;
 }
-
 .form-table .tf-radio-image input[type=radio] {
-	margin-top: 0;
+    margin-top: 0;
 }
-
 .tf-radio-image img {
-	vertical-align: middle;
+    vertical-align: middle;
 }
-
 /* code */
 .tf-code > div:first-of-type {
-	border-radius: 3px;
-	border: 1px solid #DDD;
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	-o-box-sizing: border-box;
-	box-sizing: border-box;
-	position: relative;
-	font-size: 14px;
+    border-radius: 3px;
+    border: 1px solid #DDD;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    box-sizing: border-box;
+    position: relative;
+    font-size: 14px;
 }
-
 /* sortable */
 .tf-sortable li {
-	cursor: move;
-	background: #fafafa;
-	padding: 0 0 0 15px;
-	border: 1px solid #DDD;
-	position: relative;
-	line-height: 40px;
+    cursor: move;
+    background: #fafafa;
+    padding: 0 0 0 15px;
+    border: 1px solid #DDD;
+    position: relative;
+    line-height: 40px;
 }
-
 .tf-sortable ul {
-	margin-top: 0;
-	background: rgba(0, 0, 0, 0);
-	border: 1px solid #EEE;
-	padding: 5px;
-	display: inline-block;
+    margin-top: 0;
+    background: rgba(0, 0, 0, 0);
+    border: 1px solid #EEE;
+    padding: 5px;
+    display: inline-block;
 }
-
 .tf-sortable ul li:last-of-type {
-	margin-bottom: 0;
+    margin-bottom: 0;
 }
-
 .tf-sortable ul li i {
-	float: right;
-	background: #fcfcfc;
-	display: inline-block;
-	border-left: 1px solid #ddd;
-	border-bottom: 1px solid #DDD;
-	width: 40px;
-	line-height: 40px;
-	text-align: center;
-	color: #777;
+    float: right;
+    background: #fcfcfc;
+    display: inline-block;
+    border-left: 1px solid #ddd;
+    border-bottom: 1px solid #DDD;
+    width: 40px;
+    line-height: 40px;
+    text-align: center;
+    color: #777;
 }
-
 .tf-sortable ul li i.visibility {
-	cursor: pointer;
+    cursor: pointer;
 }
-
 .tf-sortable ul li i:last-of-type {
-	margin-left: 50px;
+    margin-left: 50px;
 }
-
 .tf-sortable li.invisible {
-	color: #ccc;
-	background: transparent;
+    color: #ccc;
+    background: transparent;
 }
-
 /* number slider */
 .tf-number .ui-slider-handle {
     position: absolute;
     z-index: 2;
-	border-radius: 3px;
+    border-radius: 3px;
     cursor: move;
-	margin-left: -6px;
-	pointer-events: none;
-	outline: none;
-	top: -5px;
-	background: #EEE;
-	border: 1px solid #CCC;
-	height: 23px;
-	width: 12px;
+    margin-left: -6px;
+    pointer-events: none;
+    outline: none;
+    top: -5px;
+    background: #EEE;
+    border: 1px solid #CCC;
+    height: 23px;
+    width: 12px;
 }
-
 .tf-number .ui-slider a:focus {
-	outline: none;
+    outline: none;
 }
-
 .tf-number .ui-slider-range {
     background: #eee;
     height: 100%;
 }
-
 .tf-number .number-slider {
-	position: relative;
-	background: #fcfcfc;
+    position: relative;
+    background: #fcfcfc;
     border: 1px solid #ddd;
-	border-radius: 3px;
-	width: 250px;
-	height: 15px;
-	margin-right: 20px;
-	display: inline-block;
-	vertical-align: bottom;
-	margin-bottom: 6px;
+    border-radius: 3px;
+    width: 250px;
+    height: 15px;
+    margin-right: 20px;
+    display: inline-block;
+    vertical-align: bottom;
+    margin-bottom: 6px;
 }
-
 /* google webfont new */
 .tf-font label {
-	border: 1px solid #DDD;
-	vertical-align: middle;
-	display: inline-block;
-	padding: 4px 4px 4px 13px;
-	margin-right: 10px;
-	background: #fcfcfc;
-	margin-bottom: 10px;
+    border: 1px solid #DDD;
+    vertical-align: middle;
+    display: inline-block;
+    padding: 4px 4px 4px 13px;
+    margin-right: 10px;
+    background: #fcfcfc;
+    margin-bottom: 10px;
 }
-
 .tf-font select {
-	margin-left: 10px;
+    margin-left: 10px;
 }
-
 .tf-font .wp-picker-container {
-	line-height: 28px;
-	height: 28px;
-	margin: 1px;
+    line-height: 28px;
+    height: 28px;
+    margin: 1px;
 }
-
 .tf-font .wp-picker-container > a {
-	margin: 2px 7px 2px 10px;
+    margin: 2px 7px 2px 10px;
 }
-
 .tf-font .wp-picker-container .wp-picker-default {
-	margin: 2px 2px 2px 7px;
+    margin: 2px 2px 2px 7px;
 }
-
 .tf-font iframe {
-	width: 100%;
-	height: 200px;
-	background: #FCFCFC;
-	border: 1px solid #DDD;
+    width: 100%;
+    height: 200px;
+    background: #FCFCFC;
+    border: 1px solid #DDD;
 }
-
 .tf-font div {
-	position: relative;
+    position: relative;
 }
-
 .tf-font i {
-	position: absolute;
-	top: 0;
-	left: 0;
-	line-height: 30px !important;
-	width: 30px;
-	background: #EEE;
-	text-align: center;
-	border: 1px solid #DDD;
-	cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    line-height: 30px !important;
+    width: 30px;
+    background: #EEE;
+    text-align: center;
+    border: 1px solid #DDD;
+    cursor: pointer;
 }
-
 .tf-font i:hover {
-	background: #333;
-	color: #FFF;
-	border-bottom: 1px solid #333;
-	border-right: 1px solid #333;
+    background: #333;
+    color: #FFF;
+    border-bottom: 1px solid #333;
+    border-right: 1px solid #333;
 }
-
 .tf-font .wp-picker-container {
-	z-index: 9;
-}
-
-.dashicons-visibility-faint:before {
-	opacity: .2;
-}
-
-/* We're using dashicons instead of font-awesome, this fixed the incompatibility */
-[class*=tf-] i.dashicons {
-	height: auto;
+    z-index: 9;
 }
-
-
-/*
- * Enable option styles
- */
-
-
-.tf-enable input {
-	width: 0;
-	height: 0;
-	overflow: hidden;
-	float: right;
-	z-index: -9999;
-	position: absolute;
-}
-.tf-enable .button {
-	-moz-user-select: none;
-	-khtml-user-select: none;
-	-webkit-user-select: none;
-	user-select: none;
-}
-.tf-enable .button + .button-primary {
-	background: #6C7A89;
-	border-color: #56606B;
-	-webkit-box-shadow: none;
-	box-shadow: none;
-	color: #fff;
-	pointer-events: none;
-}
-.tf-enable .button-primary:first-of-type {
-	pointer-events: none;
-}
-.tf-enable .button:first-of-type {
-	border-top-right-radius: 0;
-	border-bottom-right-radius: 0;
-}
-.tf-enable .button-secondary:first-of-type {
-	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
-	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
-}
-.tf-enable .button + .button {
-	border-top-left-radius: 0;
-	border-bottom-left-radius: 0;
-	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
-	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
-}
\ No newline at end of file
diff --git a/css/class-option-gallery.css b/css/class-option-gallery.css
new file mode 100644
index 00000000..46917cdf
--- /dev/null
+++ b/css/class-option-gallery.css
@@ -0,0 +1,18 @@
+ul.gallery-ph{
+    list-style: none;
+    list-style-type: none;
+    padding:0px;
+    margin:0px;
+}
+
+ul.gallery-ph li{
+    display: inline;
+    padding: 0px;
+    margin: 0px;
+    margin-right: 10px;
+}
+
+ul.gallery-ph li {
+    width:150px;
+    height:150px;
+}
\ No newline at end of file
diff --git a/js/gallery.js b/js/gallery.js
index f7433ec8..707179e8 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -1,65 +1,86 @@
-(function($){
-    var file_frame,data,ats;
-    ats = [];
-    $(document).ready(function(){
-        alert("hi");
-    });
+(function ($) {
+    var file_frame;
 
+    $(document).ready(function () {
+        var query = wp.media.query();
 
+        query.filterWithIds = function (ids) {
+            return _(this.models.filter(function (c) {
+                return _.contains(ids, c.id);
+            }));
+        };
 
-    $("#galgal").on("click",function(){
-
-        if ( file_frame ) {
-            file_frame.open();
-            return;
-        }
+        $(".galgal").each(function () {
+            var container = $(this).siblings("ul");
+            var selected_ids = $(this).prev("input").val().split(",");
+            if (selected_ids.length > 0) {
+                $(this).val("Customize This Gallery");
+                $(this).css("marginTop", "10px");
+            }
+            for (i = 0; i < selected_ids.length; i++) {
+                if (selected_ids[i] > 0) {
+                    var attachment = new wp.media.model.Attachment.get(selected_ids[i]);
+                    attachment.fetch({success: function (att) {
+                        container.append("<li><img src='" + att.attributes.sizes.thumbnail.url + "'</li>");
+                    }});
+                }
+            }
 
-        file_frame = wp.media.frames.file_frame = wp.media({
-            frame:    'post',
-            state:    'insert',
-            multiple: true
         });
+    })
+
+    $(".galgal").each(function () {
+        $(this).on("click", function () {
+
+            var that = this;
+
+            if (file_frame) {
+                file_frame.open();
+                return;
+            }
 
-        /**
-         * Setup an event handler for what to do when an image has been
-         * selected.
-         *
-         * Since we're using the 'view' state when initializing
-         * the file_frame, we need to make sure that the handler is attached
-         * to the insert event.
-         */
-        file_frame.on( 'insert', function() {
-            /**
-             * We'll cover this in the next version.
-             */
-            var data = file_frame.state().get( 'selection' );
-            alert("ss");
-            data.map( function( attachment ) {
-
-                //console.log(attachment);
-                ats.push(attachment.id);
-                console.log(attachment.attributes);
-                attachment = attachment.toJSON();
-
-                // Do something with attachment.id and/or attachment.url here
+            file_frame = wp.media.frames.file_frame = wp.media({
+                frame: 'post',
+                state: 'insert',
+                multiple: true
             });
-            var jdata = data.toJSON();
 
-            console.log(jdata);
+            file_frame.on('insert', function () {
 
-        });
+                var data = file_frame.state().get('selection');
+                var jdata = data.toJSON();
+                var selected_ids = _.pluck(jdata, "id");
+                var container = $(that).siblings("ul");
 
-        file_frame.on('open', function(){
-            var selection = file_frame.state().get('selection');
+                if (selected_ids.length > 0) {
+                    $(that).css("marginTop", "10px");
+                    $(that).val("Customize This Gallery");
+                }
+                $(that).prev('input').val(selected_ids.join(","));
+                container.html("");
 
-            if (ats.length>0) {
-                for(i in ats)
-                selection.add(wp.media.attachment(ats[i]));
-            }
-        });
+                data.map(function (attachment) {
+                    if (attachment.attributes.subtype == "png" || attachment.attributes.subtype == "jpeg" || attachment.attributes.subtype == "jpg") {
+                        try {
+                            container.append("<li><img src='" + attachment.attributes.sizes.thumbnail.url + "'</li>");
+                        } catch (e) {
+                        }
+                    }
+                });
+            });
 
-        // Now display the actual file_frame
-        file_frame.open();
+            file_frame.on('open', function () {
+                var selection = file_frame.state().get('selection');
+                var ats = $(that).prev("input").val().split(",");
+
+                for (i = 0; i < ats.length; i++) {
+                    if (ats[i] > 0)
+                        selection.add(wp.media.attachment(ats[i]));
+                }
+            });
+
+            file_frame.open();
 
+        })
     })
 })(jQuery);
\ No newline at end of file
diff --git a/js/visibility.js b/js/visibility.js
index e02fc74e..6de69740 100644
--- a/js/visibility.js
+++ b/js/visibility.js
@@ -1,3 +1,4 @@
+;
 (function ($) {
     $(document).ready(function () {
         $(".tf-text input, .tf-select select").each(function () {
@@ -40,6 +41,6 @@
                     $(that).parent().parent().hide();
                 }
             }
-        })
+        });
     });
-})(jQuery)
\ No newline at end of file
+})(jQuery);
\ No newline at end of file

From d49fc8a88a232364037f475ff984c2e4a81c8494 Mon Sep 17 00:00:00 2001
From: Hasin Hayder <hasin@leevio.com>
Date: Mon, 15 Sep 2014 22:26:04 +0600
Subject: [PATCH 06/26] Metabox visibility based on post format

---
 class-meta-box.php |  3 ++-
 js/visibility.js   | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/class-meta-box.php b/class-meta-box.php
index 8e08bf6a..b1e24e84 100644
--- a/class-meta-box.php
+++ b/class-meta-box.php
@@ -16,6 +16,7 @@ class TitanFrameworkMetaBox {
 		'hide_custom_fields' => true, // If true, the custom fields box will not be shown
         'priority' => 'high', //  high, core, default, low
 		'desc' => '', // Description displayed below the title
+        'post_format'=>array('standard','aside','chat','link','gallery','image','audio','video','status')
 	);
 
 	public $settings;
@@ -82,7 +83,7 @@ public function display( $post ) {
 		}
 
 		?>
-		<table class="form-table tf-form-table">
+		<table class="form-table tf-form-table " data-post-format="<?php echo join(",",$this->settings['post_format']);?>">
 		<tbody>
 		<?php
 		foreach ( $this->options as $option ) {
diff --git a/js/visibility.js b/js/visibility.js
index 6de69740..6983958a 100644
--- a/js/visibility.js
+++ b/js/visibility.js
@@ -42,5 +42,22 @@
                 }
             }
         });
+
+        //metabox display depenedency on post format
+        function resetmetaBox(){
+            $(".postbox table.tf-form-table").each(function(){
+                var dependency = $(this).data("post-format");
+                var selected_post_type = $("#post-formats-select input:checked").attr("id");
+                if(selected_post_type=="post-format-0") selected_post_type = "post-format-standard";
+                if(dependency.indexOf(selected_post_type.replace("post-format-",""))==-1){
+                    $(this).parent().parent().hide();
+                }else{
+                    $(this).parent().parent().show();
+                }
+
+            });
+        }
+        $("#post-formats-select input").on("change",resetmetaBox);
+        resetmetaBox();
     });
 })(jQuery);
\ No newline at end of file

From 3125ce8994ec95757dc96bd6eedc94dd153d628a Mon Sep 17 00:00:00 2001
From: Hasin Hayder <hasin@leevio.com>
Date: Mon, 15 Sep 2014 22:31:40 +0600
Subject: [PATCH 07/26] error fix when post format metabox is not shwon

---
 js/visibility.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/js/visibility.js b/js/visibility.js
index 6983958a..7b237911 100644
--- a/js/visibility.js
+++ b/js/visibility.js
@@ -44,20 +44,23 @@
         });
 
         //metabox display depenedency on post format
-        function resetmetaBox(){
-            $(".postbox table.tf-form-table").each(function(){
+        function resetmetaBox() {
+            $(".postbox table.tf-form-table").each(function () {
                 var dependency = $(this).data("post-format");
                 var selected_post_type = $("#post-formats-select input:checked").attr("id");
-                if(selected_post_type=="post-format-0") selected_post_type = "post-format-standard";
-                if(dependency.indexOf(selected_post_type.replace("post-format-",""))==-1){
-                    $(this).parent().parent().hide();
-                }else{
-                    $(this).parent().parent().show();
+                if (selected_post_type) {
+                    if (selected_post_type == "post-format-0") selected_post_type = "post-format-standard";
+                    if (dependency.indexOf(selected_post_type.replace("post-format-", "")) == -1) {
+                        $(this).parent().parent().hide();
+                    } else {
+                        $(this).parent().parent().show();
+                    }
                 }
 
             });
         }
-        $("#post-formats-select input").on("change",resetmetaBox);
+
+        $("#post-formats-select input").on("change", resetmetaBox);
         resetmetaBox();
     });
 })(jQuery);
\ No newline at end of file

From 4118f8c8c871bc7e19e79ca79a325d69f7737de8 Mon Sep 17 00:00:00 2001
From: Hasin Hayder <hasin@leevio.com>
Date: Mon, 15 Sep 2014 22:49:29 +0600
Subject: [PATCH 08/26] added quote in the default list of post formats for
 metaboxes

---
 class-meta-box.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/class-meta-box.php b/class-meta-box.php
index b1e24e84..cac1ecc7 100644
--- a/class-meta-box.php
+++ b/class-meta-box.php
@@ -16,7 +16,7 @@ class TitanFrameworkMetaBox {
 		'hide_custom_fields' => true, // If true, the custom fields box will not be shown
         'priority' => 'high', //  high, core, default, low
 		'desc' => '', // Description displayed below the title
-        'post_format'=>array('standard','aside','chat','link','gallery','image','audio','video','status')
+        'post_format'=>array('standard','aside','chat','link','gallery','image','audio','video','status','quote')
 	);
 
 	public $settings;

From 41464cde510e5c3218f94c3b944e733102990c08 Mon Sep 17 00:00:00 2001
From: Hasin Hayder <hasin@leevio.com>
Date: Tue, 16 Sep 2014 00:06:43 +0600
Subject: [PATCH 09/26] Visibility dependency support for color field

---
 class-option-color.php |  2 +-
 class-option.php       |  1 +
 js/visibility.js       | 16 ++++++++--------
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/class-option-color.php b/class-option-color.php
index 0c7dfc66..817c8397 100644
--- a/class-option-color.php
+++ b/class-option-color.php
@@ -20,7 +20,7 @@ public function display() {
 		$this->echoOptionHeader();
 
 		?>
-		<input class="tf-colorpicker" type="text" name="<?php echo $this->getID() ?>" id="<?php echo $this->getID() ?>" value="<?php echo $this->getValue() ?>"  data-default-color="<?php echo $this->getValue() ?>"/>
+		<input  class="tf-colorpicker" type="text" name="<?php echo $this->getID() ?>" id="<?php echo $this->getID() ?>" value="<?php echo $this->getValue() ?>"  data-default-color="<?php echo $this->getValue() ?>" data-did="<?php echo $this->settings['dependency']['id']; ?>" data-dvalue="<?php echo $this->settings['dependency']['value']; ?>" />
 		<?php
 
 		// load the javascript to init the colorpicker
diff --git a/class-option.php b/class-option.php
index 239c33a3..5c7709d6 100644
--- a/class-option.php
+++ b/class-option.php
@@ -27,6 +27,7 @@ class TitanFrameworkOption {
 		'default' => '', // Menu icon for top level menus only
 		'example' => '', // An example value for this field, will be displayed in a <code>
 		'livepreview' => '', // jQuery script to update something in the site. For theme customizer only
+        'dependency' =>array('id'=>'','value'=>'')
 	);
 
 	public $defaultSecondarySettings = array();
diff --git a/js/visibility.js b/js/visibility.js
index 7b237911..823463f7 100644
--- a/js/visibility.js
+++ b/js/visibility.js
@@ -1,7 +1,7 @@
 ;
 (function ($) {
     $(document).ready(function () {
-        $(".tf-text input, .tf-select select").each(function () {
+        $(".tf-text input, .tf-select select, .tf-color input.tf-colorpicker").each(function () {
             var that = this;
             var did = ($(this).data("did")); //dependency id
             var dv = ($(this).data("dvalue")); //dependency value
@@ -14,31 +14,31 @@
                 if ($(id).prop("tagName") == "INPUT") {
                     $(id).on("blur", function () {
                         if ($(this).val() != dv) {
-                            $(that).parent().parent().hide();
+                            $(that).parents(".odd, .even").hide();
                         } else {
-                            $(that).parent().parent().show();
+                            $(that).parents(".odd, .even").show();
                         }
                     });
                     $(id).on("keyup", function () {
                         if ($(this).val() != dv) {
-                            $(that).parent().parent().hide();
+                            $(that).parents(".odd, .even").hide();
                         } else {
-                            $(that).parent().parent().show();
+                            $(that).parents(".odd, .even").show();
                         }
                     });
                 } else if ($(id).prop("tagName") == "SELECT") {
                     $(id).on("change", function () {
 //                        console.log($(this).val());
                         if ($(this).val() != dv) {
-                            $(that).parent().parent().hide();
+                            $(that).parents(".odd, .even").hide();
                         } else {
-                            $(that).parent().parent().show();
+                            $(that).parents(".odd, .even").show();
                         }
                     });
                 }
 
                 if ($(id).val() != dv) {
-                    $(that).parent().parent().hide();
+                    $(that).parents(".odd, .even").hide();
                 }
             }
         });

From e6180e5d5e86403bea88cb85bb9bcb1a911637aa Mon Sep 17 00:00:00 2001
From: Hasin Hayder <hasin@leevio.com>
Date: Tue, 16 Sep 2014 01:09:18 +0600
Subject: [PATCH 10/26] Visibility dependency support for checkbox and radio

---
 class-option-checkbox.php |  2 +-
 class-option-radio.php    |  2 +-
 js/visibility.js          | 35 ++++++++++++++++++++++++++++++++---
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/class-option-checkbox.php b/class-option-checkbox.php
index d8cd1bd1..10cdea18 100644
--- a/class-option-checkbox.php
+++ b/class-option-checkbox.php
@@ -12,7 +12,7 @@ public function display() {
 
 		?>
 		<label for="<?php echo $this->getID() ?>">
-		<input name="<?php echo $this->getID() ?>" type="checkbox" id="<?php echo $this->getID() ?>" value="1" <?php checked( $this->getValue(), 1 ) ?>>
+		<input name="<?php echo $this->getID() ?>" type="checkbox" id="<?php echo $this->getID() ?>" value="1"  data-did="<?php echo $this->settings['dependency']['id']; ?>" data-dvalue="<?php echo $this->settings['dependency']['value']; ?>" <?php checked( $this->getValue(), 1 ) ?>>
 		<?php echo $this->getDesc( true ) ?>
 		</label>
 		<?php
diff --git a/class-option-radio.php b/class-option-radio.php
index c2e3eca4..3a696dc9 100644
--- a/class-option-radio.php
+++ b/class-option-radio.php
@@ -14,7 +14,7 @@ class TitanFrameworkOptionRadio extends TitanFrameworkOption {
 	public function display() {
 		$this->echoOptionHeader( true );
 
-		echo "<fieldset>";
+		echo "<fieldset data-did='{$this->settings['dependency']['id']}' data-dvalue='{$this->settings['dependency']['value']}' >";
 
 		foreach ( $this->settings['options'] as $value => $label ) {
 			printf('<label for="%s"><input id="%s" type="radio" name="%s" value="%s" %s/> %s</label><br>',
diff --git a/js/visibility.js b/js/visibility.js
index 823463f7..d98274d1 100644
--- a/js/visibility.js
+++ b/js/visibility.js
@@ -1,7 +1,7 @@
 ;
 (function ($) {
     $(document).ready(function () {
-        $(".tf-text input, .tf-select select, .tf-color input.tf-colorpicker").each(function () {
+        $(".tf-text input, .tf-select select, .tf-color input.tf-colorpicker, .tf-checkbox input, .tf-radio fieldset").each(function () {
             var that = this;
             var did = ($(this).data("did")); //dependency id
             var dv = ($(this).data("dvalue")); //dependency value
@@ -11,7 +11,7 @@
                 var id = "#" + fdata.namespace + "_" + did;
 //                alert(id + "\n"+$(id).prop("tagName"));
 
-                if ($(id).prop("tagName") == "INPUT") {
+                if ($(id).prop("tagName") == "INPUT" && $(id).attr("type") == 'text') {
                     $(id).on("blur", function () {
                         if ($(this).val() != dv) {
                             $(that).parents(".odd, .even").hide();
@@ -35,10 +35,39 @@
                             $(that).parents(".odd, .even").show();
                         }
                     });
+                } else if ($(id).prop("tagName") == "INPUT" && $(id).attr("type") == 'checkbox') {
+                    $(id).on("change", function () {
+                        if (($(this).is(":checked") && dv == "checked") || (!$(this).is(":checked") && dv != "checked")) {
+                            $(that).parents(".odd, .even").show();
+                        } else if (($(this).is(":checked") && dv == "unchecked") || (!$(this).is(":checked") && dv == "checked")) {
+                            $(that).parents(".odd, .even").hide();
+                        }
+                    });
+                } else if($(id+"1").prop("tagName") == "INPUT" && $(id+"1").attr("type") == 'radio'){
+                    $(id+"1").parents("fieldset").find("input").on("change",function(){
+                        if($(this).val()!=dv){
+                            $(that).parents(".odd, .even").hide();
+                        }else{
+                            $(that).parents(".odd, .even").show();
+                        }
+                    });
                 }
 
-                if ($(id).val() != dv) {
+
+                if (($(id).attr("type") != 'checkbox' && $(id+"1").attr("type") != 'radio') && $(id).val() != dv) {
                     $(that).parents(".odd, .even").hide();
+                } else if ($(id).attr("type") == 'checkbox') {
+                    if (($(this).is(":checked") && dv == "checked") || (!$(this).is(":checked") && dv != "checked")) {
+                        $(that).parents(".odd, .even").show();
+                    } else if (($(this).is(":checked") && dv == "unchecked") || (!$(this).is(":checked") && dv == "checked")) {
+                        $(that).parents(".odd, .even").hide();
+                    }
+                } else if($(id+"1").attr("type") == 'radio'){
+                    if($(id+"1").parents("fieldset").find("input:checked").val()!=dv){
+                        $(that).parents(".odd, .even").hide();
+                    }else{
+                        $(that).parents(".odd, .even").show();
+                    }
                 }
             }
         });

From d9c7a48178b779e9f16e6565297153131cde9b56 Mon Sep 17 00:00:00 2001
From: hasin <hasin@leevio.com>
Date: Tue, 16 Sep 2014 19:23:10 +0600
Subject: [PATCH 11/26] Single and Multiple Image Support for Gallery

---
 js/gallery.js | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/js/gallery.js b/js/gallery.js
index 707179e8..79526fa8 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -1,5 +1,5 @@
 (function ($) {
-    var file_frame;
+    //var file_frame;
 
     $(document).ready(function () {
         var query = wp.media.query();
@@ -12,11 +12,13 @@
 
         $(".galgal").each(function () {
             var container = $(this).siblings("ul");
-            var selected_ids = $(this).prev("input").val().split(",");
-            if (selected_ids.length > 0) {
+            var selected_ids = $(this).prev("input").val();
+            if (selected_ids && selected_ids.length > 0) {
                 $(this).val("Customize This Gallery");
                 $(this).css("marginTop", "10px");
             }
+
+            selected_ids = selected_ids.split(",");
             for (i = 0; i < selected_ids.length; i++) {
                 if (selected_ids[i] > 0) {
                     var attachment = new wp.media.model.Attachment.get(selected_ids[i]);
@@ -34,15 +36,19 @@
 
             var that = this;
 
+            var multiple = $(this).data("multiple");
+            if(multiple == undefined) multiple = true;
+
+
             if (file_frame) {
                 file_frame.open();
                 return;
             }
 
-            file_frame = wp.media.frames.file_frame = wp.media({
+            var file_frame = wp.media.frames.file_frame = wp.media({
                 frame: 'post',
                 state: 'insert',
-                multiple: true
+                multiple: multiple
             });
 
             file_frame.on('insert', function () {
@@ -54,7 +60,10 @@
 
                 if (selected_ids.length > 0) {
                     $(that).css("marginTop", "10px");
-                    $(that).val("Customize This Gallery");
+                    if(multiple)
+                        $(that).val("Customize This Gallery");
+                    else
+                        $(that).val("Change Image");
                 }
                 $(that).prev('input').val(selected_ids.join(","));
                 container.html("");
@@ -71,7 +80,7 @@
 
             file_frame.on('open', function () {
                 var selection = file_frame.state().get('selection');
-                var ats = $(that).prev("input").val().split(",");
+                var ats = $(that).prev(".galleryinfo").val().split(",");
 
                 for (i = 0; i < ats.length; i++) {
                     if (ats[i] > 0)

From ec512db4a11dd29b4c3eb2e7c46148043c3afcd8 Mon Sep 17 00:00:00 2001
From: hasin <hasin@leevio.com>
Date: Tue, 16 Sep 2014 19:25:09 +0600
Subject: [PATCH 12/26] Single Image field

---
 class-option-image.php | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 class-option-image.php

diff --git a/class-option-image.php b/class-option-image.php
new file mode 100644
index 00000000..8cd6dced
--- /dev/null
+++ b/class-option-image.php
@@ -0,0 +1,32 @@
+<?php
+
+if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
+
+class TitanFrameworkOptionImage extends TitanFrameworkOption {
+
+
+    function __construct($settings, $owner){
+        parent::__construct($settings,$owner);
+        add_action("admin_enqueue_scripts",array($this,'enqueueScripts'));
+    }
+    /*
+     * Display for options and meta
+     */
+    public function display() {
+        if(!isset($this->settings['dependency'])) $this->settings['dependency']=array("id"=>"","value"=>"");
+        $this->echoOptionHeader();
+        echo "<ul class='gallery-ph'></ul>";
+        echo "<input class='galleryinfo' name='".$this->getID()."'  type='hidden' value='".$this->getValue()."'/>";
+        echo "<input type='button' value='Add Image' class='galgal button button-primary button-large' data-multiple='false'>";
+        $this->echoOptionFooter();
+    }
+
+    public function enqueueScripts(){
+        wp_enqueue_media();
+        wp_enqueue_script("tf-gallery",get_template_directory_uri()."/libs/titan-framework/js/gallery.js","jquery","1.0",true);
+        wp_enqueue_style("tf-gallery-css",get_template_directory_uri()."/libs/titan-framework/css/class-option-gallery.css");
+    }
+
+
+
+}
\ No newline at end of file

From 95a9d08a056bbb422db83981d36a56a83b5c4cf8 Mon Sep 17 00:00:00 2001
From: Hasin Hayder <hasin@leevio.com>
Date: Wed, 17 Sep 2014 22:03:59 +0600
Subject: [PATCH 13/26] broken img fix

---
 js/gallery.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/gallery.js b/js/gallery.js
index 79526fa8..b068dfab 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -23,7 +23,7 @@
                 if (selected_ids[i] > 0) {
                     var attachment = new wp.media.model.Attachment.get(selected_ids[i]);
                     attachment.fetch({success: function (att) {
-                        container.append("<li><img src='" + att.attributes.sizes.thumbnail.url + "'</li>");
+                        container.append("<li><img src='" + att.attributes.sizes.thumbnail.url + "'/></li>");
                     }});
                 }
             }
@@ -71,7 +71,7 @@
                 data.map(function (attachment) {
                     if (attachment.attributes.subtype == "png" || attachment.attributes.subtype == "jpeg" || attachment.attributes.subtype == "jpg") {
                         try {
-                            container.append("<li><img src='" + attachment.attributes.sizes.thumbnail.url + "'</li>");
+                            container.append("<li><img src='" + attachment.attributes.sizes.thumbnail.url + "'/></li>");
                         } catch (e) {
                         }
                     }

From 7068b60662326e25efe464e066a076d7353e4fc4 Mon Sep 17 00:00:00 2001
From: Hasin Hayder <hasin@leevio.com>
Date: Wed, 17 Sep 2014 22:07:01 +0600
Subject: [PATCH 14/26] Empty the container before prefetching attachments

---
 js/gallery.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/js/gallery.js b/js/gallery.js
index b068dfab..7ab2009a 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -17,7 +17,7 @@
                 $(this).val("Customize This Gallery");
                 $(this).css("marginTop", "10px");
             }
-
+            container.html("");
             selected_ids = selected_ids.split(",");
             for (i = 0; i < selected_ids.length; i++) {
                 if (selected_ids[i] > 0) {
@@ -81,7 +81,6 @@
             file_frame.on('open', function () {
                 var selection = file_frame.state().get('selection');
                 var ats = $(that).prev(".galleryinfo").val().split(",");
-
                 for (i = 0; i < ats.length; i++) {
                     if (ats[i] > 0)
                         selection.add(wp.media.attachment(ats[i]));

From 70f9c09a372bc3bab6abbe4a3035d8e4fb001378 Mon Sep 17 00:00:00 2001
From: Hasin Hayder <hasin@leevio.com>
Date: Wed, 17 Sep 2014 23:32:22 +0600
Subject: [PATCH 15/26] Repeatable Text Field

---
 class-option-repeatabletext.php | 27 ++++++++++++++
 js/repeatable.js                | 62 +++++++++++++++++++++++++++++++++
 titan-framework.php             |  1 +
 3 files changed, 90 insertions(+)
 create mode 100644 class-option-repeatabletext.php
 create mode 100644 js/repeatable.js

diff --git a/class-option-repeatabletext.php b/class-option-repeatabletext.php
new file mode 100644
index 00000000..f1c74155
--- /dev/null
+++ b/class-option-repeatabletext.php
@@ -0,0 +1,27 @@
+<?php
+
+if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
+
+class TitanFrameworkOptionRepeatableText extends TitanFrameworkOption {
+
+    function __construct($settings, $owner){
+        parent::__construct($settings,$owner);
+        add_action("admin_enqueue_scripts",array($this,'enqueueScripts'));
+    }
+    /*
+     * Display for options and meta
+     */
+    public function display() {
+        if(!isset($this->settings['dependency'])) $this->settings['dependency']=array("id"=>"","value"=>"");
+        $this->echoOptionHeader();
+        echo "<input name='".$this->getID()."' type='hidden' class='repeaterjson' id='{$this->getID()}' value='".$this->getValue()."' >";
+        echo "<div class='repeaterplaceholder'></div>";
+        echo "<div class='repeater' style='margin-top:10px;'><input type='button' class='repeaterbtn button button-primary' value='Add More'/> </div>";
+        $this->echoOptionFooter();
+    }
+
+    function enqueueScripts(){
+        wp_enqueue_script("tf-repeatable",get_template_directory_uri()."/libs/titan-framework/js/repeatable.js","jquery","1.0",true);
+    }
+
+}
\ No newline at end of file
diff --git a/js/repeatable.js b/js/repeatable.js
new file mode 100644
index 00000000..f72b44af
--- /dev/null
+++ b/js/repeatable.js
@@ -0,0 +1,62 @@
+;
+(function ($) {
+"use strict"
+    $(document).ready(function () {
+        $(".repeaterjson").each(function () {
+            var container = $(this).next("div.repeaterplaceholder");
+            var val = $(this).val();
+
+            if (val) {
+                var parts = val.split("|||");
+            }else{
+                parts = [""];
+            }
+            for (i in parts) {
+                $("<input>").attr("type", "text").addClass("repeatable").val(parts[i]).appendTo($(container));
+                $("<input>").attr("type", "button").addClass("button removert").val("Remove").appendTo($(container));
+                $(container).append("<br/>");
+            }
+
+            $(this).parent().on("blur",".repeatable",function(){
+                var _parent = $(this).parent();
+                serializert(_parent);
+            });
+
+            $(this).parent().on("click",".removert",function(){
+                //serialize
+                var _parent = $(this).parent();
+                if($(this).parent().find(".repeatable").length>1){
+                    $(this).prev().remove();
+                    $(this).next().remove();
+                    $(this).remove();
+                }else{
+                    $(this).prev().val("");
+                }
+                serializert(_parent);
+            });
+
+
+        });
+
+        $(".repeater").each(function () {
+            var that = this;
+            var container = $(that).prev();
+            $(this).on('click','.repeaterbtn',function(){
+                $("<input>").attr("type", "text").addClass("repeatable").appendTo(container).focus();
+                $("<input>").attr("type", "button").addClass("button removert").val("Remove").appendTo(container);
+                $("<br/>").appendTo(container);
+
+            });
+        });
+
+        function serializert(container){
+            //alert($(container).html());
+            var values = [];
+            $(container).find("input[type='text']").each(function () {
+                //alert($(this).val());
+                values.push($(this).val());
+            });
+            $(container).prev(".repeaterjson").val(values.join("|||"));
+        }
+    });
+})(jQuery);
\ No newline at end of file
diff --git a/titan-framework.php b/titan-framework.php
index dac79e93..2ed5cee0 100644
--- a/titan-framework.php
+++ b/titan-framework.php
@@ -59,6 +59,7 @@
 require_once( TF_PATH . 'class-titan-tracking.php' );
 require_once( TF_PATH . 'class-wp-customize-control.php' );
 require_once( TF_PATH . 'functions-googlefonts.php' );
+require_once( TF_PATH . 'class-option-repeatabletext.php');
 require_once( TF_PATH . 'functions-utils.php' );
 
 

From 1cecfaf328e87ab4bf93738d4bd831e8dbf9b137 Mon Sep 17 00:00:00 2001
From: Hasin Hayder <hasin@leevio.com>
Date: Wed, 17 Sep 2014 23:58:22 +0600
Subject: [PATCH 16/26] Return Repeater field's value properly

---
 class-option-repeatabletext.php | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/class-option-repeatabletext.php b/class-option-repeatabletext.php
index f1c74155..85e18cdd 100644
--- a/class-option-repeatabletext.php
+++ b/class-option-repeatabletext.php
@@ -24,4 +24,15 @@ function enqueueScripts(){
         wp_enqueue_script("tf-repeatable",get_template_directory_uri()."/libs/titan-framework/js/repeatable.js","jquery","1.0",true);
     }
 
+    function cleanValueForGetting($value){
+
+        if( !is_array($value)){
+            $parts = explode("|||",$value);
+            return $parts;
+        }else{
+            return $value;
+        }
+
+    }
+
 }
\ No newline at end of file

From f6d3b5006c7bf6223cdd685f7425e96639c6fe9a Mon Sep 17 00:00:00 2001
From: Hasin Hayder <hasin@leevio.com>
Date: Thu, 18 Sep 2014 00:09:27 +0600
Subject: [PATCH 17/26] Renamed RepeaterText to Multitext

---
 class-option-repeatabletext.php => class-option-multitext.php | 4 ++--
 titan-framework.php                                           | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename class-option-repeatabletext.php => class-option-multitext.php (88%)

diff --git a/class-option-repeatabletext.php b/class-option-multitext.php
similarity index 88%
rename from class-option-repeatabletext.php
rename to class-option-multitext.php
index 85e18cdd..15a8be46 100644
--- a/class-option-repeatabletext.php
+++ b/class-option-multitext.php
@@ -2,7 +2,7 @@
 
 if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
 
-class TitanFrameworkOptionRepeatableText extends TitanFrameworkOption {
+class TitanFrameworkOptionMultitext extends TitanFrameworkOption {
 
     function __construct($settings, $owner){
         parent::__construct($settings,$owner);
@@ -14,7 +14,7 @@ function __construct($settings, $owner){
     public function display() {
         if(!isset($this->settings['dependency'])) $this->settings['dependency']=array("id"=>"","value"=>"");
         $this->echoOptionHeader();
-        echo "<input name='".$this->getID()."' type='hidden' class='repeaterjson' id='{$this->getID()}' value='".$this->getValue()."' >";
+        echo "<input name='".$this->getID()."' type='hidden' class='repeaterjson' id='{$this->getID()}' value='".join("|||",$this->getValue())."' >";
         echo "<div class='repeaterplaceholder'></div>";
         echo "<div class='repeater' style='margin-top:10px;'><input type='button' class='repeaterbtn button button-primary' value='Add More'/> </div>";
         $this->echoOptionFooter();
diff --git a/titan-framework.php b/titan-framework.php
index b1314b92..fd4893f3 100644
--- a/titan-framework.php
+++ b/titan-framework.php
@@ -58,7 +58,7 @@
 require_once( TF_PATH . 'class-titan-tracking.php' );
 require_once( TF_PATH . 'class-wp-customize-control.php' );
 require_once( TF_PATH . 'functions-googlefonts.php' );
-require_once( TF_PATH . 'class-option-repeatabletext.php');
+require_once( TF_PATH . 'class-option-multitext.php');
 require_once( TF_PATH . 'functions-utils.php' );
 
 

From d011fe4d6119a4ad88fa72adff8ae10f9a81d6a5 Mon Sep 17 00:00:00 2001
From: hasin <hasin@leevio.com>
Date: Thu, 18 Sep 2014 12:51:07 +0600
Subject: [PATCH 18/26] Single Image Field file include

---
 titan-framework.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/titan-framework.php b/titan-framework.php
index fd4893f3..3d918e13 100644
--- a/titan-framework.php
+++ b/titan-framework.php
@@ -49,6 +49,7 @@
 require_once( TF_PATH . 'class-option-select.php' );
 require_once( TF_PATH . 'class-option-sortable.php' );
 require_once( TF_PATH . 'class-option-gallery.php' );
+require_once( TF_PATH . 'class-option-image.php' );
 require_once( TF_PATH . 'class-option-text.php' );
 require_once( TF_PATH . 'class-option-textarea.php' );
 require_once( TF_PATH . 'class-option-upload.php' );

From c5ce55e7abe3dc4e81406871c343509131c6f790 Mon Sep 17 00:00:00 2001
From: hasin <hasin@leevio.com>
Date: Thu, 18 Sep 2014 13:37:24 +0600
Subject: [PATCH 19/26] Multitext default value fix

---
 class-option-multitext.php | 12 +++++++++++-
 js/repeatable.js           |  1 +
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/class-option-multitext.php b/class-option-multitext.php
index 15a8be46..9ce9057d 100644
--- a/class-option-multitext.php
+++ b/class-option-multitext.php
@@ -12,9 +12,19 @@ function __construct($settings, $owner){
      * Display for options and meta
      */
     public function display() {
+        $value = $this->getValue();
+        if(empty($value))
+            $value = $this->settings['default'];
+
+        if(is_array($value))
+            $value=join("|||",$value);
+
+        echo $value;
+
+
         if(!isset($this->settings['dependency'])) $this->settings['dependency']=array("id"=>"","value"=>"");
         $this->echoOptionHeader();
-        echo "<input name='".$this->getID()."' type='hidden' class='repeaterjson' id='{$this->getID()}' value='".join("|||",$this->getValue())."' >";
+        echo "<input name='".$this->getID()."' type='hidden' class='repeaterjson' id='{$this->getID()}' value='".$value."' >";
         echo "<div class='repeaterplaceholder'></div>";
         echo "<div class='repeater' style='margin-top:10px;'><input type='button' class='repeaterbtn button button-primary' value='Add More'/> </div>";
         $this->echoOptionFooter();
diff --git a/js/repeatable.js b/js/repeatable.js
index f72b44af..ed701a28 100644
--- a/js/repeatable.js
+++ b/js/repeatable.js
@@ -11,6 +11,7 @@
             }else{
                 parts = [""];
             }
+            var i=0;
             for (i in parts) {
                 $("<input>").attr("type", "text").addClass("repeatable").val(parts[i]).appendTo($(container));
                 $("<input>").attr("type", "button").addClass("button removert").val("Remove").appendTo($(container));

From 9849c809b273fbe31fbc8d30d6cf31eab06b8631 Mon Sep 17 00:00:00 2001
From: hasin <hasin@leevio.com>
Date: Thu, 18 Sep 2014 13:38:07 +0600
Subject: [PATCH 20/26] Multitext default value fix

---
 class-option-multitext.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/class-option-multitext.php b/class-option-multitext.php
index 9ce9057d..4e0d3c5a 100644
--- a/class-option-multitext.php
+++ b/class-option-multitext.php
@@ -19,7 +19,6 @@ public function display() {
         if(is_array($value))
             $value=join("|||",$value);
 
-        echo $value;
 
 
         if(!isset($this->settings['dependency'])) $this->settings['dependency']=array("id"=>"","value"=>"");

From bef36513afa7c6b306ef67c817fd30a762dadfd6 Mon Sep 17 00:00:00 2001
From: hasin <hasin@leevio.com>
Date: Sun, 28 Sep 2014 15:14:09 +0600
Subject: [PATCH 21/26] Improved visibility dependency. If some field gets
 hidden due to it's dependency on other field's value then all the fields
 which are depending on this field also hides

---
 js/visibility.js | 55 ++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 53 insertions(+), 2 deletions(-)

diff --git a/js/visibility.js b/js/visibility.js
index d98274d1..ce68efcc 100644
--- a/js/visibility.js
+++ b/js/visibility.js
@@ -1,7 +1,7 @@
 ;
 (function ($) {
     $(document).ready(function () {
-        $(".tf-text input, .tf-select select, .tf-color input.tf-colorpicker, .tf-checkbox input, .tf-radio fieldset").each(function () {
+        $(".tf-text input, .tf-select select, .tf-color input.tf-colorpicker, .tf-checkbox input, .tf-radio fieldset, .tf-image .galleryinfo").each(function () {
             var that = this;
             var did = ($(this).data("did")); //dependency id
             var dv = ($(this).data("dvalue")); //dependency value
@@ -9,21 +9,38 @@
             if (did != "") {
 
                 var id = "#" + fdata.namespace + "_" + did;
-//                alert(id + "\n"+$(id).prop("tagName"));
+                var deps = $(id).data("dependents");
+                if(deps!="" && deps!=undefined){
+                    deps = deps.split(".");
+                }else{
+                    deps = [];
+                }
+                deps.push($(this).attr("id"));
+                $(id).data("dependents",deps.join("."));
+
+                $(id).on("hidden",function(){
+                    $(that).parents(".odd, .even").hide();
+                });
+
+
 
                 if ($(id).prop("tagName") == "INPUT" && $(id).attr("type") == 'text') {
                     $(id).on("blur", function () {
                         if ($(this).val() != dv) {
                             $(that).parents(".odd, .even").hide();
+                            hideDependents($(id));
                         } else {
                             $(that).parents(".odd, .even").show();
+                            showDependents($(id));
                         }
                     });
                     $(id).on("keyup", function () {
                         if ($(this).val() != dv) {
                             $(that).parents(".odd, .even").hide();
+                            hideDependents($(id));
                         } else {
                             $(that).parents(".odd, .even").show();
+                            showDependents($(id));
                         }
                     });
                 } else if ($(id).prop("tagName") == "SELECT") {
@@ -31,24 +48,30 @@
 //                        console.log($(this).val());
                         if ($(this).val() != dv) {
                             $(that).parents(".odd, .even").hide();
+                            hideDependents($(id));
                         } else {
                             $(that).parents(".odd, .even").show();
+                            showDependents($(id));
                         }
                     });
                 } else if ($(id).prop("tagName") == "INPUT" && $(id).attr("type") == 'checkbox') {
                     $(id).on("change", function () {
                         if (($(this).is(":checked") && dv == "checked") || (!$(this).is(":checked") && dv != "checked")) {
                             $(that).parents(".odd, .even").show();
+                            showDependents($(id));
                         } else if (($(this).is(":checked") && dv == "unchecked") || (!$(this).is(":checked") && dv == "checked")) {
                             $(that).parents(".odd, .even").hide();
+                            hideDependents($(id));
                         }
                     });
                 } else if($(id+"1").prop("tagName") == "INPUT" && $(id+"1").attr("type") == 'radio'){
                     $(id+"1").parents("fieldset").find("input").on("change",function(){
                         if($(this).val()!=dv){
                             $(that).parents(".odd, .even").hide();
+                            hideDependents($(id));
                         }else{
                             $(that).parents(".odd, .even").show();
+                            showDependents($(id));
                         }
                     });
                 }
@@ -56,22 +79,50 @@
 
                 if (($(id).attr("type") != 'checkbox' && $(id+"1").attr("type") != 'radio') && $(id).val() != dv) {
                     $(that).parents(".odd, .even").hide();
+                    hideDependents($(id));
                 } else if ($(id).attr("type") == 'checkbox') {
                     if (($(this).is(":checked") && dv == "checked") || (!$(this).is(":checked") && dv != "checked")) {
                         $(that).parents(".odd, .even").show();
+                        showDependents($(id));
                     } else if (($(this).is(":checked") && dv == "unchecked") || (!$(this).is(":checked") && dv == "checked")) {
                         $(that).parents(".odd, .even").hide();
+                        hideDependents($(id));
                     }
                 } else if($(id+"1").attr("type") == 'radio'){
                     if($(id+"1").parents("fieldset").find("input:checked").val()!=dv){
                         $(that).parents(".odd, .even").hide();
+                        hideDependents($(id));
                     }else{
                         $(that).parents(".odd, .even").show();
+                        showDependents($(id));
                     }
                 }
             }
         });
 
+        function hideDependents(obj){
+            var deps = $(obj).data("dependents");
+            if(deps!="" && deps!=undefined){
+                deps = deps.split(".");
+                for(var i in deps){
+                    var id = "#"+deps[i];
+                    $(id).trigger("hidden");
+                }
+            }
+        }
+
+        function showDependents(obj){
+            var deps = $(obj).data("dependents");
+            if(deps!="" && deps!=undefined){
+                deps = deps.split(".");
+                for(var i in deps){
+                    var id = "#"+deps[i];
+                    $(id).trigger("change");
+                    $(id).trigger("keyup");
+                }
+            }
+        }
+
         //metabox display depenedency on post format
         function resetmetaBox() {
             $(".postbox table.tf-form-table").each(function () {

From 88d36980f0ff8e0436d65bacd970afb92c85732e Mon Sep 17 00:00:00 2001
From: Hasin Hayder <hasin@leevio.com>
Date: Sun, 28 Sep 2014 23:30:24 +0600
Subject: [PATCH 22/26] Hide all the dependendant feilds if the parent field
 hides. Added support for metabox display condition based on page templates

---
 class-meta-box.php       | 3 ++-
 class-option-gallery.php | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/class-meta-box.php b/class-meta-box.php
index cac1ecc7..44b9dd98 100644
--- a/class-meta-box.php
+++ b/class-meta-box.php
@@ -16,7 +16,8 @@ class TitanFrameworkMetaBox {
 		'hide_custom_fields' => true, // If true, the custom fields box will not be shown
         'priority' => 'high', //  high, core, default, low
 		'desc' => '', // Description displayed below the title
-        'post_format'=>array('standard','aside','chat','link','gallery','image','audio','video','status','quote')
+        'post_format'=>array('standard','aside','chat','link','gallery','image','audio','video','status','quote'),
+        'page_template'=>array()
 	);
 
 	public $settings;
diff --git a/class-option-gallery.php b/class-option-gallery.php
index 6036f7c9..0fa49f94 100644
--- a/class-option-gallery.php
+++ b/class-option-gallery.php
@@ -16,7 +16,7 @@ public function display() {
         if(!isset($this->settings['dependency'])) $this->settings['dependency']=array("id"=>"","value"=>"");
         $this->echoOptionHeader();
         echo "<ul class='gallery-ph'></ul>";
-        echo "<input class='galleryinfo' name='".$this->getID()."'  type='hidden' value='".$this->getValue()."'/>";
+        echo "<input class='galleryinfo' data-did='{$this->settings['dependency']['id']}' data-dvalue='{$this->settings['dependency']['value']}'  name='".$this->getID()."'  type='hidden' value='".$this->getValue()."'/>";
         echo "<input type='button' value='Add Images To Gallery' class='galgal button button-primary button-large'>";
         $this->echoOptionFooter();
     }

From 70d7b70a1b9c955ea35701fc43da8d0e3f17af89 Mon Sep 17 00:00:00 2001
From: Hasin Hayder <hasin@leevio.com>
Date: Mon, 29 Sep 2014 00:04:12 +0600
Subject: [PATCH 23/26] Hide all the dependendant feilds if the parent field
 hides. Added support for metabox display condition based on page templates

---
 class-meta-box.php     |  2 +-
 class-option-image.php |  5 ++--
 js/gallery.js          | 27 ++++++++++++++++++---
 js/visibility.js       | 54 ++++++++++++++++++++++++++----------------
 4 files changed, 61 insertions(+), 27 deletions(-)

diff --git a/class-meta-box.php b/class-meta-box.php
index 44b9dd98..30d0ce72 100644
--- a/class-meta-box.php
+++ b/class-meta-box.php
@@ -84,7 +84,7 @@ public function display( $post ) {
 		}
 
 		?>
-		<table class="form-table tf-form-table " data-post-format="<?php echo join(",",$this->settings['post_format']);?>">
+		<table class="form-table tf-form-table " data-post-format="<?php echo join(",",$this->settings['post_format']);?>" data-page-template="<?php echo join(",",$this->settings['page_template']);?>">
 		<tbody>
 		<?php
 		foreach ( $this->options as $option ) {
diff --git a/class-option-image.php b/class-option-image.php
index 8cd6dced..eda87893 100644
--- a/class-option-image.php
+++ b/class-option-image.php
@@ -16,8 +16,9 @@ public function display() {
         if(!isset($this->settings['dependency'])) $this->settings['dependency']=array("id"=>"","value"=>"");
         $this->echoOptionHeader();
         echo "<ul class='gallery-ph'></ul>";
-        echo "<input class='galleryinfo' name='".$this->getID()."'  type='hidden' value='".$this->getValue()."'/>";
+        echo "<input class='galleryinfo' data-did='{$this->settings['dependency']['id']}' data-dvalue='{$this->settings['dependency']['value']}' name='".$this->getID()."'  type='hidden' value='".$this->getValue()."'/>";
         echo "<input type='button' value='Add Image' class='galgal button button-primary button-large' data-multiple='false'>";
+        echo "<input type='button' value='Clear' style='margin-left:10px;' class='galgalremove button button-large' >";
         $this->echoOptionFooter();
     }
 
@@ -29,4 +30,4 @@ public function enqueueScripts(){
 
 
 
-}
\ No newline at end of file
+}
diff --git a/js/gallery.js b/js/gallery.js
index 7ab2009a..090e05f9 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -10,12 +10,30 @@
             }));
         };
 
+        $(".galgalremove").each(function(){
+            $(this).on("click",function(){
+                var container = $(this).siblings("ul");
+                var valcontainer = $(this).siblings(".galleryinfo");
+                container.html("");
+                valcontainer.val("");
+            });
+        });
+
         $(".galgal").each(function () {
             var container = $(this).siblings("ul");
             var selected_ids = $(this).prev("input").val();
             if (selected_ids && selected_ids.length > 0) {
-                $(this).val("Customize This Gallery");
+                if($(this).data("multiple"))
+                    $(this).val("Customize This Gallery");
+                else
+                    $(this).val("Change Image");
+
+
                 $(this).css("marginTop", "10px");
+                $(this).next().css("marginTop", "10px");
+
+            }else{
+                $(this).next().hide();
             }
             container.html("");
             selected_ids = selected_ids.split(",");
@@ -60,6 +78,8 @@
 
                 if (selected_ids.length > 0) {
                     $(that).css("marginTop", "10px");
+                    $(that).next().css("marginTop", "10px");
+                    $(that).next().show();
                     if(multiple)
                         $(that).val("Customize This Gallery");
                     else
@@ -69,10 +89,11 @@
                 container.html("");
 
                 data.map(function (attachment) {
-                    if (attachment.attributes.subtype == "png" || attachment.attributes.subtype == "jpeg" || attachment.attributes.subtype == "jpg") {
+                    if (_.contains(['png','jpg','gif','jpeg'],attachment.get('subtype'))) {
                         try {
                             container.append("<li><img src='" + attachment.attributes.sizes.thumbnail.url + "'/></li>");
                         } catch (e) {
+                            console.log(e);
                         }
                     }
                 });
@@ -91,4 +112,4 @@
 
         })
     })
-})(jQuery);
\ No newline at end of file
+})(jQuery);
diff --git a/js/visibility.js b/js/visibility.js
index ce68efcc..7ecd08ef 100644
--- a/js/visibility.js
+++ b/js/visibility.js
@@ -18,12 +18,6 @@
                 deps.push($(this).attr("id"));
                 $(id).data("dependents",deps.join("."));
 
-                $(id).on("hidden",function(){
-                    $(that).parents(".odd, .even").hide();
-                });
-
-
-
                 if ($(id).prop("tagName") == "INPUT" && $(id).attr("type") == 'text') {
                     $(id).on("blur", function () {
                         if ($(this).val() != dv) {
@@ -76,39 +70,39 @@
                     });
                 }
 
+                if(!$(id).is(":visible")){
+                    $(that).parents(".odd, .even").hide();
+                };
+
 
                 if (($(id).attr("type") != 'checkbox' && $(id+"1").attr("type") != 'radio') && $(id).val() != dv) {
                     $(that).parents(".odd, .even").hide();
-                    hideDependents($(id));
                 } else if ($(id).attr("type") == 'checkbox') {
                     if (($(this).is(":checked") && dv == "checked") || (!$(this).is(":checked") && dv != "checked")) {
                         $(that).parents(".odd, .even").show();
-                        showDependents($(id));
                     } else if (($(this).is(":checked") && dv == "unchecked") || (!$(this).is(":checked") && dv == "checked")) {
                         $(that).parents(".odd, .even").hide();
-                        hideDependents($(id));
                     }
                 } else if($(id+"1").attr("type") == 'radio'){
                     if($(id+"1").parents("fieldset").find("input:checked").val()!=dv){
                         $(that).parents(".odd, .even").hide();
-                        hideDependents($(id));
                     }else{
                         $(that).parents(".odd, .even").show();
-                        showDependents($(id));
                     }
                 }
             }
         });
 
         function hideDependents(obj){
-            var deps = $(obj).data("dependents");
-            if(deps!="" && deps!=undefined){
-                deps = deps.split(".");
-                for(var i in deps){
-                    var id = "#"+deps[i];
-                    $(id).trigger("hidden");
+            $(".tf-text input, .tf-select select, .tf-color input.tf-colorpicker, .tf-checkbox input, .tf-radio fieldset, .tf-image .galleryinfo").each(function () {
+                var did = ($(this).data("did")); //dependency id
+                if (did != "") {
+                    var id = "#" + fdata.namespace + "_" + did;
+                    if(!$(id).is(":visible")){
+                        $(this).parents(".odd, .even").hide();
+                    }
                 }
-            }
+            });
         }
 
         function showDependents(obj){
@@ -126,21 +120,39 @@
         //metabox display depenedency on post format
         function resetmetaBox() {
             $(".postbox table.tf-form-table").each(function () {
-                var dependency = $(this).data("post-format");
+
+                //post format
+                var dependency_post_format = $(this).data("post-format");
                 var selected_post_type = $("#post-formats-select input:checked").attr("id");
                 if (selected_post_type) {
                     if (selected_post_type == "post-format-0") selected_post_type = "post-format-standard";
-                    if (dependency.indexOf(selected_post_type.replace("post-format-", "")) == -1) {
+                    if (dependency_post_format.indexOf(selected_post_type.replace("post-format-", "")) == -1) {
                         $(this).parent().parent().hide();
                     } else {
                         $(this).parent().parent().show();
                     }
                 }
 
+                //page template
+                if($("#page_template").length>0) {
+                    var dependency_page_template = $(this).data("page-template");
+                    var selected_page_template = $("#page_template").val();
+                    if(dependency_page_template) {
+                        if (dependency_page_template.indexOf(selected_page_template)==-1) {
+                            $(this).parent().parent().hide();
+                        } else {
+                            $(this).parent().parent().show();
+                        }
+                    }
+                }
+
             });
         }
 
+
+
         $("#post-formats-select input").on("change", resetmetaBox);
+        $("#page_template").on("change", resetmetaBox);
         resetmetaBox();
     });
-})(jQuery);
\ No newline at end of file
+})(jQuery);

From 3e9687651ad572a0ad6699209eac2083e392ea2a Mon Sep 17 00:00:00 2001
From: Hasin Hayder <hasin@leevio.com>
Date: Mon, 29 Sep 2014 02:23:34 +0600
Subject: [PATCH 24/26] Clear Images button in the gallery field

---
 class-option-gallery.php | 5 +++--
 js/gallery.js            | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/class-option-gallery.php b/class-option-gallery.php
index 0fa49f94..0374e3ce 100644
--- a/class-option-gallery.php
+++ b/class-option-gallery.php
@@ -17,7 +17,8 @@ public function display() {
         $this->echoOptionHeader();
         echo "<ul class='gallery-ph'></ul>";
         echo "<input class='galleryinfo' data-did='{$this->settings['dependency']['id']}' data-dvalue='{$this->settings['dependency']['value']}'  name='".$this->getID()."'  type='hidden' value='".$this->getValue()."'/>";
-        echo "<input type='button' value='Add Images To Gallery' class='galgal button button-primary button-large'>";
+        echo "<input type='button' data-multiple='true' value='Add Images To Gallery' class='galgal button button-primary button-large'>";
+        echo "<input type='button' value='Clear' style='margin-left:10px;' class='galgalremove button button-large' >";
         $this->echoOptionFooter();
     }
 
@@ -29,4 +30,4 @@ public function enqueueScripts(){
 
 
 
-}
\ No newline at end of file
+}
diff --git a/js/gallery.js b/js/gallery.js
index 090e05f9..40967949 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -16,6 +16,7 @@
                 var valcontainer = $(this).siblings(".galleryinfo");
                 container.html("");
                 valcontainer.val("");
+                $(this).hide();
             });
         });
 

From cbe7d9de7033f2b4bf5bccf19c431f41792b9120 Mon Sep 17 00:00:00 2001
From: Hasin Hayder <hasin@leevio.com>
Date: Mon, 29 Sep 2014 03:13:19 +0600
Subject: [PATCH 25/26] Images in the gallery field is now sortable

---
 css/class-option-gallery.css | 16 +++++++++---
 js/gallery.js                | 50 ++++++++++++++++++++++++++----------
 2 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/css/class-option-gallery.css b/css/class-option-gallery.css
index 46917cdf..430072a6 100644
--- a/css/class-option-gallery.css
+++ b/css/class-option-gallery.css
@@ -6,13 +6,23 @@ ul.gallery-ph{
 }
 
 ul.gallery-ph li{
-    display: inline;
+    display: inline-block;
     padding: 0px;
     margin: 0px;
     margin-right: 10px;
+    height: 150px;
+    width: 150px;
 }
 
-ul.gallery-ph li {
+ul.gallery-ph li img{
     width:150px;
     height:150px;
-}
\ No newline at end of file
+    display: block;
+}
+
+.placeholder {
+    background-color: #f3f3f3;
+    text-align:center;
+    width:150px;
+    height:150px;
+}
diff --git a/js/gallery.js b/js/gallery.js
index 40967949..cd5b5e57 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -10,8 +10,8 @@
             }));
         };
 
-        $(".galgalremove").each(function(){
-            $(this).on("click",function(){
+        $(".galgalremove").each(function () {
+            $(this).on("click", function () {
                 var container = $(this).siblings("ul");
                 var valcontainer = $(this).siblings(".galleryinfo");
                 container.html("");
@@ -21,10 +21,27 @@
         });
 
         $(".galgal").each(function () {
+            var that = this;
             var container = $(this).siblings("ul");
+            $(container).sortable({
+                    items: "> li",
+                    cursor: "move",
+                    refreshPositions: true,
+                    opacity: 0.6,
+                    scroll: true,
+                    placeholder: 'placeholder',
+                    dropOnEmpty: true,
+
+                    tolerance: 'intersect',
+                    update: function () {
+                        var _items = $(container).sortable("toArray");
+                        $(that).prev("input").val(_items.join(","));
+                    }
+                }
+            ).disableSelection();
             var selected_ids = $(this).prev("input").val();
             if (selected_ids && selected_ids.length > 0) {
-                if($(this).data("multiple"))
+                if ($(this).data("multiple"))
                     $(this).val("Customize This Gallery");
                 else
                     $(this).val("Change Image");
@@ -33,7 +50,7 @@
                 $(this).css("marginTop", "10px");
                 $(this).next().css("marginTop", "10px");
 
-            }else{
+            } else {
                 $(this).next().hide();
             }
             container.html("");
@@ -41,14 +58,17 @@
             for (i = 0; i < selected_ids.length; i++) {
                 if (selected_ids[i] > 0) {
                     var attachment = new wp.media.model.Attachment.get(selected_ids[i]);
-                    attachment.fetch({success: function (att) {
-                        container.append("<li><img src='" + att.attributes.sizes.thumbnail.url + "'/></li>");
-                    }});
+                    attachment.fetch({
+                        success: function (att) {
+                            var _id = att.get("id");
+                            container.append("<li id='"+_id+"'><img src='" + att.attributes.sizes.thumbnail.url + "'/></li>");
+                        }
+                    });
                 }
             }
 
         });
-    })
+    });
 
     $(".galgal").each(function () {
         $(this).on("click", function () {
@@ -56,7 +76,7 @@
             var that = this;
 
             var multiple = $(this).data("multiple");
-            if(multiple == undefined) multiple = true;
+            if (multiple == undefined) multiple = true;
 
 
             if (file_frame) {
@@ -81,7 +101,7 @@
                     $(that).css("marginTop", "10px");
                     $(that).next().css("marginTop", "10px");
                     $(that).next().show();
-                    if(multiple)
+                    if (multiple)
                         $(that).val("Customize This Gallery");
                     else
                         $(that).val("Change Image");
@@ -90,9 +110,10 @@
                 container.html("");
 
                 data.map(function (attachment) {
-                    if (_.contains(['png','jpg','gif','jpeg'],attachment.get('subtype'))) {
+                    if (_.contains(['png', 'jpg', 'gif', 'jpeg'], attachment.get('subtype'))) {
                         try {
-                            container.append("<li><img src='" + attachment.attributes.sizes.thumbnail.url + "'/></li>");
+                            var _id = attachment.get("id");
+                            container.append("<li id='"+_id+"'><img src='" + attachment.attributes.sizes.thumbnail.url + "'/></li>");
                         } catch (e) {
                             console.log(e);
                         }
@@ -100,6 +121,7 @@
                 });
             });
 
+
             file_frame.on('open', function () {
                 var selection = file_frame.state().get('selection');
                 var ats = $(that).prev(".galleryinfo").val().split(",");
@@ -111,6 +133,6 @@
 
             file_frame.open();
 
-        })
-    })
+        });
+    });
 })(jQuery);

From 5ea5aa96cf6484d982ac3af4358771aefd84b077 Mon Sep 17 00:00:00 2001
From: Hasin Hayder <hasin@leevio.com>
Date: Sat, 11 Oct 2014 23:24:55 +0600
Subject: [PATCH 26/26] Several Fixes

---
 class-option-radio-palette.php |  4 +++-
 css/class-option-gallery.css   |  5 +++--
 js/gallery.js                  | 17 ++++++++---------
 js/visibility.js               |  2 +-
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/class-option-radio-palette.php b/class-option-radio-palette.php
index 08dfb7c1..a4048dd1 100644
--- a/class-option-radio-palette.php
+++ b/class-option-radio-palette.php
@@ -36,6 +36,8 @@ public function display() {
 			$value = $this->settings['options'][$value];
 		}
 
+        echo "<input type='hidden' class='dep' id='".$this->getID()."dep' data-did='{$this->settings['dependency']['id']}' data-dvalue='{$this->settings['dependency']['value']}'  />";
+
 		// print the palettes
 		foreach ( $this->settings['options'] as $key => $colorSet ) {
 			printf( '<label id="%s"><input id="%s" type="radio" name="%s" value="%s" %s/> <span>',
@@ -163,4 +165,4 @@ public function render_content() {
 			}
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/css/class-option-gallery.css b/css/class-option-gallery.css
index 430072a6..0e1365e9 100644
--- a/css/class-option-gallery.css
+++ b/css/class-option-gallery.css
@@ -15,9 +15,10 @@ ul.gallery-ph li{
 }
 
 ul.gallery-ph li img{
-    width:150px;
-    height:150px;
+    /*width:150px;*/
+    /*height:150px;*/
     display: block;
+    cursor: move;
 }
 
 .placeholder {
diff --git a/js/gallery.js b/js/gallery.js
index cd5b5e57..8d261e71 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -2,13 +2,7 @@
     //var file_frame;
 
     $(document).ready(function () {
-        var query = wp.media.query();
-
-        query.filterWithIds = function (ids) {
-            return _(this.models.filter(function (c) {
-                return _.contains(ids, c.id);
-            }));
-        };
+        
 
         $(".galgalremove").each(function () {
             $(this).on("click", function () {
@@ -61,7 +55,12 @@
                     attachment.fetch({
                         success: function (att) {
                             var _id = att.get("id");
-                            container.append("<li id='"+_id+"'><img src='" + att.attributes.sizes.thumbnail.url + "'/></li>");
+                            try {
+                                container.append("<li id='" + _id + "'><img src='" + att.attributes.sizes.thumbnail.url + "'/></li>");
+                            } catch (e){
+                                container.append("<li id='" + _id + "'><img src='" + att.attributes.sizes.full.url + "'/></li>");
+
+                            }
                         }
                     });
                 }
@@ -115,7 +114,7 @@
                             var _id = attachment.get("id");
                             container.append("<li id='"+_id+"'><img src='" + attachment.attributes.sizes.thumbnail.url + "'/></li>");
                         } catch (e) {
-                            console.log(e);
+                            container.append("<li id='"+_id+"'><img src='" + attachment.attributes.sizes.full.url + "'/></li>");
                         }
                     }
                 });
diff --git a/js/visibility.js b/js/visibility.js
index 7ecd08ef..b431becc 100644
--- a/js/visibility.js
+++ b/js/visibility.js
@@ -1,7 +1,7 @@
 ;
 (function ($) {
     $(document).ready(function () {
-        $(".tf-text input, .tf-select select, .tf-color input.tf-colorpicker, .tf-checkbox input, .tf-radio fieldset, .tf-image .galleryinfo").each(function () {
+        $(".tf-text input, .tf-select select, .tf-color input.tf-colorpicker, .tf-checkbox input, .tf-radio fieldset, .tf-image .galleryinfo, .tf-radio-palette .dep").each(function () {
             var that = this;
             var did = ($(this).data("did")); //dependency id
             var dv = ($(this).data("dvalue")); //dependency value