diff --git a/class-meta-box.php b/class-meta-box.php
index 8e08bf6a..30d0ce72 100644
--- a/class-meta-box.php
+++ b/class-meta-box.php
@@ -16,6 +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'),
+        'page_template'=>array()
 	);
 
 	public $settings;
@@ -82,7 +84,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']);?>" data-page-template="<?php echo join(",",$this->settings['page_template']);?>">
 		<tbody>
 		<?php
 		foreach ( $this->options as $option ) {
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-color.php b/class-option-color.php
index 1820042c..d219d600 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-gallery.php b/class-option-gallery.php
new file mode 100644
index 00000000..0374e3ce
--- /dev/null
+++ b/class-option-gallery.php
@@ -0,0 +1,33 @@
+<?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 "<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' 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();
+    }
+
+    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/class-option-image.php b/class-option-image.php
new file mode 100644
index 00000000..eda87893
--- /dev/null
+++ b/class-option-image.php
@@ -0,0 +1,33 @@
+<?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' 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();
+    }
+
+    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/class-option-multitext.php b/class-option-multitext.php
new file mode 100644
index 00000000..4e0d3c5a
--- /dev/null
+++ b/class-option-multitext.php
@@ -0,0 +1,47 @@
+<?php
+
+if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
+
+class TitanFrameworkOptionMultitext 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() {
+        $value = $this->getValue();
+        if(empty($value))
+            $value = $this->settings['default'];
+
+        if(is_array($value))
+            $value=join("|||",$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='".$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();
+    }
+
+    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
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/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/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..65d27d9a
--- a/class-option-text.php
+++ b/class-option-text.php
@@ -16,15 +16,19 @@ 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\"\> %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-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/class-titan-framework.php b/class-titan-framework.php
old mode 100644
new mode 100755
index 673f443a..294951be
--- 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/css/admin-styles.css b/css/admin-styles.css
index 9c3e0d25..56707d0d 100644
--- a/css/admin-styles.css
+++ b/css/admin-styles.css
@@ -1,3 +1,4 @@
+
 /*
  * TODO: separate styles into multiple imports
  */
@@ -5,412 +6,354 @@
 @import "class-option-font.css";
 @import "class-option-date.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;
-}
-
-#side-sortables .tf-form-table td {
-	padding: 5px 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 input {
-	max-width:100%;
+.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-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:hover {
+    background: rgba(255, 255, 255, .2);
 }
-
-/*
- * Base styling for admin pages
- */
-
-/* main wrapper */
-.titan-framework-panel-wrap {
-	border-bottom: 1px solid #DDD;
-    margin-bottom: 20px;
+.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);
 }
-
-/* 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..0e1365e9
--- /dev/null
+++ b/css/class-option-gallery.css
@@ -0,0 +1,29 @@
+ul.gallery-ph{
+    list-style: none;
+    list-style-type: none;
+    padding:0px;
+    margin:0px;
+}
+
+ul.gallery-ph li{
+    display: inline-block;
+    padding: 0px;
+    margin: 0px;
+    margin-right: 10px;
+    height: 150px;
+    width: 150px;
+}
+
+ul.gallery-ph li img{
+    /*width:150px;*/
+    /*height:150px;*/
+    display: block;
+    cursor: move;
+}
+
+.placeholder {
+    background-color: #f3f3f3;
+    text-align:center;
+    width:150px;
+    height:150px;
+}
diff --git a/js/gallery.js b/js/gallery.js
new file mode 100644
index 00000000..8d261e71
--- /dev/null
+++ b/js/gallery.js
@@ -0,0 +1,137 @@
+(function ($) {
+    //var file_frame;
+
+    $(document).ready(function () {
+        
+
+        $(".galgalremove").each(function () {
+            $(this).on("click", function () {
+                var container = $(this).siblings("ul");
+                var valcontainer = $(this).siblings(".galleryinfo");
+                container.html("");
+                valcontainer.val("");
+                $(this).hide();
+            });
+        });
+
+        $(".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"))
+                    $(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(",");
+            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) {
+                            var _id = att.get("id");
+                            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>");
+
+                            }
+                        }
+                    });
+                }
+            }
+
+        });
+    });
+
+    $(".galgal").each(function () {
+        $(this).on("click", function () {
+
+            var that = this;
+
+            var multiple = $(this).data("multiple");
+            if (multiple == undefined) multiple = true;
+
+
+            if (file_frame) {
+                file_frame.open();
+                return;
+            }
+
+            var file_frame = wp.media.frames.file_frame = wp.media({
+                frame: 'post',
+                state: 'insert',
+                multiple: multiple
+            });
+
+            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");
+
+                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
+                        $(that).val("Change Image");
+                }
+                $(that).prev('input').val(selected_ids.join(","));
+                container.html("");
+
+                data.map(function (attachment) {
+                    if (_.contains(['png', 'jpg', 'gif', 'jpeg'], attachment.get('subtype'))) {
+                        try {
+                            var _id = attachment.get("id");
+                            container.append("<li id='"+_id+"'><img src='" + attachment.attributes.sizes.thumbnail.url + "'/></li>");
+                        } catch (e) {
+                            container.append("<li id='"+_id+"'><img src='" + attachment.attributes.sizes.full.url + "'/></li>");
+                        }
+                    }
+                });
+            });
+
+
+            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]));
+                }
+            });
+
+            file_frame.open();
+
+        });
+    });
+})(jQuery);
diff --git a/js/repeatable.js b/js/repeatable.js
new file mode 100644
index 00000000..ed701a28
--- /dev/null
+++ b/js/repeatable.js
@@ -0,0 +1,63 @@
+;
+(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 = [""];
+            }
+            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));
+                $(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/js/visibility.js b/js/visibility.js
new file mode 100644
index 00000000..b431becc
--- /dev/null
+++ b/js/visibility.js
@@ -0,0 +1,158 @@
+;
+(function ($) {
+    $(document).ready(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
+
+            if (did != "") {
+
+                var id = "#" + fdata.namespace + "_" + did;
+                var deps = $(id).data("dependents");
+                if(deps!="" && deps!=undefined){
+                    deps = deps.split(".");
+                }else{
+                    deps = [];
+                }
+                deps.push($(this).attr("id"));
+                $(id).data("dependents",deps.join("."));
+
+                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") {
+                    $(id).on("change", function () {
+//                        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));
+                        }
+                    });
+                }
+
+                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();
+                } 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();
+                    }
+                }
+            }
+        });
+
+        function hideDependents(obj){
+            $(".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){
+            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 () {
+
+                //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_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);
diff --git a/titan-framework.php b/titan-framework.php
index 40c7e581..a71bf377 100644
--- a/titan-framework.php
+++ b/titan-framework.php
@@ -50,6 +50,8 @@
 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-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' );
@@ -59,6 +61,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-multitext.php');
 require_once( TF_PATH . 'functions-utils.php' );