1st commit

2024-04-06 11:45:36 +02:00
commit 62a52850bc
228 changed files with 37418 additions and 0 deletions
--- a/admin/class_check_ver.php
+++ b/admin/class_check_ver.php
@@ -0,0 +1,105 @@
+<?php
+/**
+* Title		: Theme Version Checker
+* Description	: Checks for new version of installed theme
+* Version	: 1.0
+* Author	: Constantine K.
+* Author URI	: http://themes.easysite.by/
+* License	: WTFPL - http://sam.zoy.org/wtfpl/
+**/
+
+if ( !defined( 'ABSPATH' ) ) exit;
+
+if ( !class_exists( 'kkCheckThemeVer' ) ) {
+
+	class kkCheckThemeVer {
+
+		public $url = 'http://easysite.by/API/check_ver.json';
+		public $sign_url = 'https://themeforest.net/sign_in?ref=kotofey';
+		public $version;
+		public $themeName;
+		public $themeId;
+		public $logUrl;
+		public $interval = 21600; // How often check for new version ( in seconds )
+
+		public function get_HTTP_data() {
+		
+			$response = wp_remote_get( $this->url );
+
+			if ( ! is_wp_error( $response ) && 200 === $response['response']['code'] ) {			
+				$response_body = wp_remote_retrieve_body( $response );	
+				$arr = json_decode( $response_body, true );	
+
+				if ( !isset( $arr['themes'][$this->themeName] ) ) return;				
+				return $arr;			
+			} 
+			
+			return;
+
+		}
+		
+		public function __construct() {
+		
+			if ( !is_admin() ) return;
+		
+			$themeData = wp_get_theme(get_template());
+			$this->version = $themeData->get( 'Version' );
+			$this->themeName = $themeData->get( 'Name' );
+			
+			if ( !apply_filters( 'kkHideUpdateNotice', false ) ) {
+			
+				add_action( 'admin_notices', array($this, 'print_notice' ));				
+			}			
+		}
+		
+		public function print_notice() {		
+					
+			if ( false === ( $setV = get_transient( 'kkRemoteVersion'.$this->themeName ) ) ) {
+			
+				 // this code runs when there is no valid transient set					 
+				$arr = $this->get_HTTP_data();
+				$remoteVer = $arr['themes'][$this->themeName]['ver'];				
+				$interval = isset( $arr['interval'] ) ? $arr['interval'] : $this->interval;
+				$this->logUrl = isset( $arr['themes'][$this->themeName]['logurl'] ) ? esc_url( $arr['themes'][$this->themeName]['logurl'] ) : $this->logUrl;
+				$this->themeId = isset( $arr['themes'][$this->themeName]['id'] ) ? esc_attr( $arr['themes'][$this->themeName]['id'] ) : $this->themeId;
+						
+				if ( $arr === NULL ) {
+				
+					$interval = 1200;
+					
+				}
+				
+				set_transient( 'kkRemoteVersion'.$this->themeName, $remoteVer, $interval );
+				
+				if ( $this->logUrl !== NULL ) {				
+					set_transient( 'kkLogUrl'.$this->themeName, $this->logUrl, $interval );					
+				}
+				
+				if ( $this->themeId !== NULL ) {				
+					set_transient( 'kkthemeId'.$this->themeName, $this->themeId, $interval );					
+				}
+				
+			} else {	
+			
+				$remoteVer = $setV;
+				$this->logUrl = get_transient( 'kkLogUrl'.$this->themeName );
+				$this->themeId = get_transient( 'kkthemeId'.$this->themeName );
+				
+			}	
+
+			// text strings in the code below should not be translatable.
+			
+			if ( version_compare( $remoteVer, $this->version, '>' ) ) { 
+				echo '<div class="updated notice is-dismissible">
+						<p><strong>New version of your '. $this->themeName .' theme is available for download.</strong></p>
+						<p>Installed version: '.$this->version.'<br>
+						Available version: '.$remoteVer. ( !empty( $this->logUrl ) ? ' ( <a href="'.$this->logUrl.'" target="_blank">Changelog</a> )' : '' ).'</p>
+						<p>Please,'. ( empty( $this->themeId ) ? ' login to your <a href="'. $this->sign_url .' " target="_blank" >ThemeForest account</a>' : 'go to the <a href="https://themeforest.net/item/i/'.$this->themeId.'?ref=kotofey&utm_source=wordpress%20dashboard&utm_medium=notice" target="_blank"> item\'s page</a>' ) .'  and download latest version. Don\'t forget to renew support if needed.</p>
+					  </div>';			
+			}	
+		}
+	}
+	
+	new kkCheckThemeVer;
+}
+?>
--- a/admin/css/colorpicker.css
+++ b/admin/css/colorpicker.css
@@ -0,0 +1,179 @@
+.colorpicker {
+	width: 356px;
+	height: 176px;
+	overflow: hidden;
+	position: absolute;
+	background: url(../i/colorpicker/colorpicker_background.png);
+	font-family: Arial, Helvetica, sans-serif;
+	display: none;
+}
+.colorpicker_color {
+	width: 150px;
+	height: 150px;
+	left: 14px;
+	top: 13px;
+	position: absolute;
+	background: #f00;
+	overflow: hidden;
+	cursor: crosshair;
+}
+.colorpicker_color div {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 150px;
+	height: 150px;
+	background: url(../i/colorpicker/colorpicker_overlay.png);
+}
+.colorpicker_color div div {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 11px;
+	height: 11px;
+	overflow: hidden;
+	background: url(../i/colorpicker/colorpicker_select.gif);
+	margin: -5px 0 0 -5px;
+}
+.colorpicker_hue {
+	position: absolute;
+	top: 13px;
+	left: 171px;
+	width: 35px;
+	height: 150px;
+	cursor: n-resize;
+}
+.colorpicker_hue div {
+	position: absolute;
+	width: 35px;
+	height: 9px;
+	overflow: hidden;
+	background: url(../i/colorpicker/colorpicker_indic.gif) left top;
+	margin: -4px 0 0 0;
+	left: 0px;
+}
+.colorpicker_new_color {
+	position: absolute;
+	width: 60px;
+	height: 30px;
+	left: 213px;
+	top: 13px;
+	background: #f00;
+}
+.colorpicker_current_color {
+	position: absolute;
+	width: 60px;
+	height: 30px;
+	left: 283px;
+	top: 13px;
+	background: #f00;
+}
+.colorpicker input {
+	background-color: transparent;
+	border: 1px solid transparent;
+	position: absolute;
+	font-size: 10px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #898989;
+	top: 4px;
+	right: 11px;
+	text-align: right;
+	margin: 0;
+	padding: 0;
+	height: 12px;
+	width:40px!important;
+	height:14px!important;
+}
+.colorpicker_hex {
+	position: absolute;
+	width: 72px;
+	height: 22px;
+	background: url(../i/colorpicker/colorpicker_hex.png) top;
+	left: 212px;
+	top: 142px;
+}
+.colorpicker_hex input {
+	right: 6px;
+}
+.colorpicker_field {
+	height: 22px;
+	width: 62px;
+	background-position: top;
+	position: absolute;
+}
+.colorpicker_field span {
+	position: absolute;
+	width: 12px;
+	height: 22px;
+	overflow: hidden;
+	top: 0;
+	right: 0;
+	cursor: n-resize;
+}
+.colorpicker_rgb_r {
+	background-image: url(../i/colorpicker/colorpicker_rgb_r.png);
+	top: 52px;
+	left: 212px;
+}
+.colorpicker_rgb_g {
+	background-image: url(../i/colorpicker/colorpicker_rgb_g.png);
+	top: 82px;
+	left: 212px;
+}
+.colorpicker_rgb_b {
+	background-image: url(../i/colorpicker/colorpicker_rgb_b.png);
+	top: 112px;
+	left: 212px;
+}
+.colorpicker_hsb_h {
+	background-image: url(../i/colorpicker/colorpicker_hsb_h.png);
+	top: 52px;
+	left: 282px;
+}
+.colorpicker_hsb_s {
+	background-image: url(../i/colorpicker/colorpicker_hsb_s.png);
+	top: 82px;
+	left: 282px;
+}
+.colorpicker_hsb_b {
+	background-image: url(../i/colorpicker/colorpicker_hsb_b.png);
+	top: 112px;
+	left: 282px;
+}
+.colorpicker_submit {
+	position: absolute;
+	width: 22px;
+	height: 22px;
+	background: url(../i/colorpicker/colorpicker_submit.png) top;
+	left: 322px;
+	top: 142px;
+	overflow: hidden;
+}
+.colorpicker_focus {
+	background-position: center;
+}
+.colorpicker_hex.colorpicker_focus {
+	background-position: bottom;
+}
+.colorpicker_submit.colorpicker_focus {
+	background-position: bottom;
+}
+.colorpicker_slider {
+	background-position: bottom;
+}
+
+.colorSelector {
+    position: relative;
+    width: 27px;
+    height: 27px;
+    background: url(../i/colorpicker/select.png);
+    float:left;
+}
+.colorSelector div {
+    position: absolute;
+    top: 4px;
+    left: 3px;
+    width: 21px;
+    height: 19px;
+    background: url(../i/colorpicker/select.png) center;
+}
--- a/admin/css/itoggle.png
+++ b/admin/css/itoggle.png
--- a/admin/css/simple-slider.css
+++ b/admin/css/simple-slider.css
@@ -0,0 +1,37 @@
+.slider {
+	width: 265px;
+	display: inline-block;
+	margin: 4px 0 0 !important
+}
+
+.slider > .dragger {
+	background: url('../i/knob.png');
+	width: 28px;
+	height: 28px;
+}
+
+.slider > .track, .slider > .highlight-track {
+	background: #898989;
+	background: -moz-linear-gradient(top, #898989, #a2a2a2);
+	background: -webkit-linear-gradient(top, #898989, #a2a2a2);
+	background: linear-gradient(top, #898989, #a2a2a2);
+
+	-moz-box-shadow: inset 0 2px 5px 1px rgba(0,0,0,0.15), 0 1px 0px 0px rgba(230,230,230,0.9), inset 0 0 1px 1px rgba(0,0,0,0.2);
+	-webkit-box-shadow: inset 0 2px 5px 1px rgba(0,0,0,0.15), 0 1px 0px 0px rgba(230,230,230,0.9), inset 0 0 1px 1px rgba(0,0,0,0.2);
+	box-shadow: inset 0 2px 5px 1px rgba(0,0,0,0.15), 0 1px 0px 0px rgba(230,230,230,0.9), inset 0 0 1px 1px rgba(0,0,0,0.2);
+
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	border-radius: 5px;
+	height: 8px;
+}
+
+.slider > .highlight-track {
+	background-color: #9dd53a;
+	background: -webkit-linear-gradient(top, #9dd53a, #7cbc0a);
+	background: -moz-linear-gradient(top, #9dd53a, #7cbc0a);
+	background: linear-gradient(top, #9dd53a, #7cbc0a);
+
+	border-color: #496805;
+}
+
--- a/admin/css/style.css
+++ b/admin/css/style.css
@@ -0,0 +1,525 @@
+/* Admin Styles */
+.updated, .error{display:none !important;}
+#of_container{
+	margin: 15px;
+	width: 780px;
+	position:relative;
+	z-index: 0
+}
+.section .option {
+	padding-bottom:15px;
+}
+#header{
+	height: 60px;
+	background-color:#f1f1f1;
+	border: 1px solid #d8d8d8;
+	border-radius: 6px;
+	-moz-border-radius: 6px;
+	-webkit-border-radius: 6px;
+	margin-bottom:20px;
+}
+#header .logo{
+	float: left;
+	margin: 7px 0 0 20px;
+}
+.logo h1 {
+    font-size: 20px;
+    line-height: 1.2em;
+}
+
+#js-warning{
+    color: red;
+    float: left;
+    margin: 20px 10px;
+    width: 330px;
+}
+.js #js-warning{
+	display: none;
+}
+ 
+#header .icon-option{
+	float: right;
+	height: 32px;
+	width: 32px;
+	background: url(../i/icon_option.png) no-repeat;
+	margin:15px 20px;
+}
+
+#main{
+	background-color: #f1f1f1;
+	border: 1px solid #d8d8d8;
+	-webkit-border-top-left-radius: 6px;
+	-moz-border-radius-topleft: 6px;
+	border-top-left-radius: 6px;
+	-webkit-border-top-right-radius: 6px;
+	-moz-border-radius-topright: 6px;
+	border-top-right-radius: 6px;
+}
+#of-nav {
+	float: left;
+	position: relative;
+	z-index: 9999;
+	width: 160px;
+}
+
+#of-nav  ul {
+	margin: 0;
+}
+
+#of-nav li{
+	margin-bottom:0
+}
+
+#of-nav ul li a {
+    border-bottom: 1px solid #D8D8D8;
+    color: #666;
+    display: block;
+    font: 12px/26px Arial;
+    padding: 10px 10px 10px 15px;
+    text-decoration: none;
+	font-weight: 600;
+}
+
+#of-nav ul li a img{
+	position:relative;
+	visibility:hidden;
+	width:24px;
+	height:24px;
+	top:6px;
+	margin-right:4px;
+}
+#of-nav ul li a:hover{
+	background-color: #fff;
+
+	}
+#of-nav ul li.current a{
+	background-color: #fff;color: #21759B;
+}
+	
+#of-nav ul li a img, #of-nav ul li.current a img{
+	visibility:visible;
+}
+
+#of-nav ul li.first a{
+	-webkit-border-top-left-radius: 6px;
+	-moz-border-radius-topleft: 6px;
+	border-top-left-radius: 6px;
+}
+
+#content{
+	float: left;
+	min-height: 590px;
+	width: 590px;
+	margin-left: -1px;
+	padding: 0 14px;
+	font-family: "Lucida Grande", Sans-serif;
+	background: #fff url(../i/menu-shr.png) right top repeat-y;
+	border-left: 1px solid #d8d8d8;
+	-webkit-border-top-right-radius: 6px;
+	-moz-border-radius-topright: 6px;
+	border-top-right-radius: 6px;
+}
+#content .section{
+	margin-bottom: 20px;
+}
+#content .section h3.heading {
+    border-bottom: 1px solid #E7E7E7;
+    font-family: Arial;
+    font-size: 13px;
+    font-weight: inherit;
+    margin: 10px 0;
+    padding: 7px 0;
+	font-weight: bold;
+}
+
+#content .section .controls{
+	float: left;
+	width: 345px;
+	margin: 0 15px 0 0;
+}
+#content .section .explain{
+	float: left;
+	width: 220px;
+	padding: 0 10px 0 0;
+	font-size: 11px;
+	color: #666666;
+}
+#content .section-checkbox .controls{
+	width:25px
+}
+#content .section-checkbox .explain{
+	width:540px
+}
+#content .section-color .controls{
+	width:125px
+}
+#content .section-color .explain{
+	width:440px
+}
+#content .section-info h3.heading{
+	font-size: 12px;
+	font-weight: 100;
+	border: 0;
+	margin-top: 20px;
+	letter-spacing: 1px;
+	border-top: 1px solid #FFF298;
+	margin-bottom: 0;
+	background:#EFE186;
+	padding: 10px 20px;
+}
+#content .section-info .controls{
+	margin: 0 0 20px;
+	padding: 15px 20px;
+	width: auto;
+	line-height: 1.5em;
+	font-size: 14px;
+	font-style: italic;
+	font-family: Georgia, arial;
+	background: #FFF298;
+	border:1px solid #ECD852;
+	color:#424242;
+}
+#content .section-info .controls small{
+	font-size: 12px
+}
+#content .section-info h3.heading{
+	-moz-border-radius-topleft:4px;
+	-moz-border-radius-topright:4px;
+}
+#content .section-info .controls{
+	-moz-border-radius-bottomleft:4px;
+	-moz-border-radius-bottomright:4px;
+}
+textarea, input, select{
+	-moz-border-radius-bottomleft:4px;
+	-moz-border-radius-bottomright:4px;
+	-moz-border-radius-topleft:4px;
+	-moz-border-radius-topright:4px;
+	border-style:solid;
+	border-width:1px;
+}
+.controls input, .controls select, .controls textarea{
+	margin-top: 5px !important;
+	margin-bottom: 7px !important;
+    background-color: #FFFFFF;
+    border-color: #DFDFDF;
+	border: 1px solid;
+	border-color: #ccc #e6e6e6 #e6e6e6 #ccc;
+	width: 340px;
+	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
+	font-size: 12px;
+}
+.controls input[type="checkbox"] {
+    float: left;
+    margin-right: 10px;
+    position: relative;
+    top: -4px;
+    width: auto;
+}
+.controls select{
+	padding: 2px 0 0 4px;
+	width: 340px
+}
+.controls textarea{
+	width: 340px;
+	height:120px;
+}
+input[type=text]{
+	width: 340px;
+}
+.range_slider_holder input[type=text]{
+	width: 50px;
+	float: right;
+}
+input.checkbox{
+	width: 30px;
+}
+input.of-radio{
+	width: 30px;
+}
+.controls .input-text-small{
+	width: 60px;
+	margin-right:10px
+}
+.meta-two{
+	margin-right:10px
+}
+.controls .of-color{
+	float:left;
+	width: 80px;
+	margin-left:5px; /* font-size:20px; height:34px;*/
+}
+#content .section-typography .controls{
+	width:425px
+}
+#content .section-typography .explain{
+	width:140px
+}
+.controls .of-typography-size{
+	width:80px;
+	float:left
+}
+.controls .of-typography-unit{
+	width:50px;
+	float:left
+}
+.controls .of-typography-face{
+	width:100px;
+	float:left
+}
+.controls .of-typography-style{
+	width:80px;
+	float:left
+}
+.controls .of-radio-img-img{
+	border:3px solid #fff;
+	margin:0 5px 10px 0;
+	display:none;
+	cursor:pointer;
+	float:left;
+}
+.controls .of-radio-img-selected{
+	border:3px solid #ccc
+}
+.controls .of-radio-img-img:hover{
+	opacity:.8;
+}
+.controls .of-border-width{
+	width:80px;
+	float:left
+}
+.controls .of-border-style{
+	width:120px;
+	float:left
+}
+.group{
+	padding-bottom:20px
+}
+.group h2{
+	display:none;
+	border-bottom:3px solid #e7e7e7
+}
+.controls input:focus, select:focus, textarea:focus{
+	background:#fff;
+}
+.accept{
+	background: #DBF6BE no-repeat 10px center;
+	border: solid #9BBF65;
+	border-width: 0px 1px 1px 1px;
+	color: #060;
+	font-weight: bold;
+	padding: 10px;
+	text-align: center;
+}
+.warning{
+	background: #ffeeee no-repeat 10px center;
+	border: solid #dfbfbf;
+	border-width: 0px 1px 1px 1px;
+	color: #333;
+	font-weight: bold;
+	padding: 10px;
+	text-align: center;
+}
+.update_available{
+	background: #FFFEEB no-repeat 10px center;
+	border: solid #CCCCCC;
+	border-width: 0px 1px 1px 1px;
+	color: #333;
+	font-weight: bold;
+	padding: 10px;
+	text-align: center;
+}
+.of-save-popup{
+	position:fixed;
+	margin-left:450px;
+	-moz-border-radius:12px;
+	-webkit-border-radius:12px;
+	border-radius:12px;
+	background:rgba(0, 0, 0, 0.8);
+	color:#fff;
+	font-size:16px;
+	text-align:center;
+	display:none;
+	z-index: 9999;
+}
+.of-save-save{
+	background:url(../i/accept.png) 20px 50% no-repeat;
+	padding:30px 30px 30px 70px
+}
+.of-save-reset{
+	background:url(../i/warning.png) 20px 50% no-repeat;
+	padding:30px 30px 30px 70px
+}
+.upload_button_div{
+	margin-bottom: 15px;
+	margin-top:5px;
+}
+.upload_button_div .button{
+	cursor:pointer;
+}
+.upload_button_div .image_reset_button{
+	margin-left:10px
+}
+.upload-error{
+	float:left;
+	color:#666;
+	font-size:10px;
+	font-weight:bold;
+	text-decoration:none;
+	text-shadow:1px 1px 0 #FFFFFF;
+	margin: 0 10px 0 0;
+	padding:3px 10px;
+	background:#FFDFEC;
+	-moz-border-radius:4px;
+	-webkit-border:4px;
+}
+.reset-button{
+	float:left;
+}
+.save_bar_top{
+	background: #f3f3f3;
+	border:solid #ccc;
+	border-width:0px 1px 1px 1px;
+	padding: 10px 20px 0px 20px;
+	height: 35px;
+	text-align: right;
+	-moz-border-radius-bottomright: 6px;
+	-moz-border-radius-bottomleft: 6px;
+	-webkit-border-bottom-right-radius: 6px;
+	-webkit-border-bottom-left-radius: 6px;
+	border-bottom-right-radius: 6px;
+	border-bottom-left-radius: 6px;
+}
+
+.hide{
+	display:none
+}
+.ajax-loading-img-top{
+	margin: 8px 4px 0;
+	float:left
+}
+.ajax-loading-img-bottom{
+}
+.of-option-image{
+	max-width:340px;
+}
+.mini .controls select, #content .section .mini .controls{
+	width: 70px;
+}
+.mini .controls input, #content .mini .controls{
+	width: 70px;
+}
+#content .mini .explain{
+	width:500px;
+}
+.of-notice{
+	background: #ffd1d1;
+	border:1px solid #DFA8A7;
+	-moz-border-radius:8px;
+	-webkit-border-radius:8px;
+	text-align: center;
+	margin-bottom: 15px
+}
+
+#ofform-reset{
+	position:relative;
+	left:20px;
+	top:-35px;
+}
+
+.color_picker input[type="text"]{width:300px;}
+.color_picker .preview{
+	width:30px;
+	height:25px;
+	border:solid 1px #ccc;
+	border-color:#CCCCCC #eee #eee #CCCCCC;
+	-moz-border-radius:4px;
+	-webkit-border-radius:4px;
+	cursor:pointer;
+	margin:5px 0;
+}
+.color_picker:hover{
+	border-color:#aaa #ccc #ccc #aaa;
+}
+
+/* GENERAL STYLES */
+html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear{
+	background: none;
+	border: 0;
+	clear: both;
+	display: block;
+	float: none;
+	font-size: 0;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	visibility: hidden;
+	width: 0;
+	height: 0;
+}
+
+/* On/off button */
+
+.kk-toggle {
+	position: absolute;
+	margin-left: -9999px;
+	visibility: hidden;
+	display: none!important;
+}
+.kk-toggle + label {
+	display: inline-block;
+	position: relative;
+	cursor: pointer;
+	outline: none;
+	user-select: none;
+	-moz-user-select: none;
+}
+input.kk-toggle-round + label {
+	padding: 2px;
+	width: 40px;
+	height: 20px;
+	background-color: #dddddd;
+	border-radius: 20px;
+	-moz-border-radius: 20px;
+	-webkit-border-radius: 20px;
+	margin-right: 15px;
+}
+input.kk-toggle-round + label:before,
+input.kk-toggle-round + label:after {
+	display: block;
+	position: absolute;
+	top: 1px;
+	left: 1px;
+	bottom: 1px;
+	content: "";
+}
+input.kk-toggle-round + label:before {
+	right: 1px;
+	background-color: #c52424;
+	border-radius: 20px;
+	-moz-border-radius: 20px;
+	-webkit-border-radius: 20px;
+	-webkit-transition: background 0.4s;
+	-moz-transition: background 0.4s;
+	-o-transition: background 0.4s;
+	transition: background 0.4s;
+}
+input.kk-toggle-round + label:after {
+	width: 22px;
+	background-color: #f1f1f1;
+	border-radius: 100%;
+	-moz-border-radius: 100%;
+	-webkit-border-radius: 100%;
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+	-webkit-transition: margin 0.4s;
+	-moz-transition: margin 0.4s;
+	-o-transition: margin 0.4s;
+	transition: margin 0.4s;
+}
+input.kk-toggle-round:checked + label:before {
+	background-color: #7cbc0a;
+}
+input.kk-toggle-round:checked + label:after {
+	margin-left: 22px;
+}
--- a/admin/i/accept.png
+++ b/admin/i/accept.png
--- a/admin/i/accept1.png
+++ b/admin/i/accept1.png
--- a/admin/i/admin-bg.jpg
+++ b/admin/i/admin-bg.jpg
--- a/admin/i/colorpicker/blank.gif
+++ b/admin/i/colorpicker/blank.gif
--- a/admin/i/colorpicker/colorpicker_background.png
+++ b/admin/i/colorpicker/colorpicker_background.png
--- a/admin/i/colorpicker/colorpicker_hex.png
+++ b/admin/i/colorpicker/colorpicker_hex.png
--- a/admin/i/colorpicker/colorpicker_hsb_b.png
+++ b/admin/i/colorpicker/colorpicker_hsb_b.png
--- a/admin/i/colorpicker/colorpicker_hsb_h.png
+++ b/admin/i/colorpicker/colorpicker_hsb_h.png
--- a/admin/i/colorpicker/colorpicker_hsb_s.png
+++ b/admin/i/colorpicker/colorpicker_hsb_s.png
--- a/admin/i/colorpicker/colorpicker_indic.gif
+++ b/admin/i/colorpicker/colorpicker_indic.gif
--- a/admin/i/colorpicker/colorpicker_overlay.png
+++ b/admin/i/colorpicker/colorpicker_overlay.png
--- a/admin/i/colorpicker/colorpicker_rgb_b.png
+++ b/admin/i/colorpicker/colorpicker_rgb_b.png
--- a/admin/i/colorpicker/colorpicker_rgb_g.png
+++ b/admin/i/colorpicker/colorpicker_rgb_g.png
--- a/admin/i/colorpicker/colorpicker_rgb_r.png
+++ b/admin/i/colorpicker/colorpicker_rgb_r.png
--- a/admin/i/colorpicker/colorpicker_select.gif
+++ b/admin/i/colorpicker/colorpicker_select.gif
--- a/admin/i/colorpicker/colorpicker_submit.png
+++ b/admin/i/colorpicker/colorpicker_submit.png
--- a/admin/i/colorpicker/select.png
+++ b/admin/i/colorpicker/select.png
--- a/admin/i/icon_option.png
+++ b/admin/i/icon_option.png
--- a/admin/i/knob.png
+++ b/admin/i/knob.png
--- a/admin/i/loading.gif
+++ b/admin/i/loading.gif
--- a/admin/i/menu-bg.png
+++ b/admin/i/menu-bg.png
--- a/admin/i/menu-shr.png
+++ b/admin/i/menu-shr.png
--- a/admin/i/warning.png
+++ b/admin/i/warning.png
--- a/admin/interface.php
+++ b/admin/interface.php
@@ -0,0 +1,171 @@
+<?php
+  get_template_part('/admin/js/main.js');
+  if(!isset($page)) $page='main';
+  $options = $this->validate_options($this->options[$page]);
+?>
+
+<div id="of_container" class="kktfwp-admin-wrap">
+	<div class="of-save-popup" id="of-popup-save">
+	<div class="of-save-save"><?php esc_html_e( 'Options Updated','toppic' )?></div>
+</div>
+
+
+<div class="of-save-popup" id="of-popup-reset">
+	<div class="of-save-reset"><?php esc_html_e( 'Options Reset','toppic' )?></div>
+</div>
+
+<form id="ofform" enctype="multipart/form-data" action="" method="post">
+
+	<div id="header">
+	
+		<div class="logo">
+			<h1><?php echo esc_html( $options['title'] )?></h1>
+		</div>
+		
+		<div class="icon-option"> </div>
+		
+		<div class="clear">&nbsp;</div>
+		
+	</div>
+
+	<div id="main">
+	
+		<div id="of-nav">
+			<ul>
+			
+				<?php $first=true;foreach($options as $group=>$data) if($group != "title"){?>
+				
+				<li <?php if( $first ){ echo 'class="first"';$first=false; }?>>
+				
+					<a href="#<?php echo str_replace(' ', '', $group);?>" title="<?php echo esc_attr( $group )?>">				
+						<?php echo esc_html( $group ); ?>
+					</a>
+				
+				</li>
+				<?php }?>
+				
+			</ul>
+			
+			<div class="clear">&nbsp;</div>
+		</div>
+
+		<div id="content">
+			<?php foreach($options as $group=>$gdata) if($group != "title"){?>
+			
+				<div id="<?php echo str_replace(' ', '', $group)?>" class="group" style="display: block;">
+				
+					<h2><?php echo esc_html( $group );?></h2>
+
+					<?php foreach($gdata as $section=>$sdata){?>
+					
+					<div class="section <?php echo esc_attr( $section )?>">
+					<h3 class="heading"><?php echo esc_html( $sdata['options']['title'] )?></h3>
+
+					<?php foreach($sdata as $id=>$v) if($id != 'options'){?>
+						<div class="option <?php echo esc_attr( $id )?>"><div class="controls">
+						<?php $id=$this->name."_".$id;
+						
+						switch($v['type']){
+						
+							case 'text':?>
+							<input type="text" class="regular-text" id="<?php echo esc_attr( $id )?>" name="<?php echo esc_attr( $id )?>" value="<?php echo stripslashes($v['val'])?>">
+							<?php break;
+							
+							case "rangeslider":?>
+							<div id="<?php echo esc_attr( $id )?>" class="range_slider_holder">
+							
+								<input type="text" class="kk_range_slider" data-slider-highlight="true" data-slider-step="<?php echo esc_attr( $v['step'] ) ?>" data-slider="true" data-slider-range="<?php echo esc_attr( $v['range'] ) ?>" value="<?php echo stripslashes($v['val'])?>" >
+								
+								<input type="text" class="regular-text" id="<?php echo esc_attr( $id )?>" name="<?php echo esc_attr( $id )?>" value="<?php echo stripslashes($v['val'])?>">
+								
+							</div>
+							<?php break;
+							
+							case 'textarea':?>
+							<textarea name="<?php echo esc_attr( $id )?>" type="<?php echo esc_attr( $v['type'] )?>" cols="" rows=""><?php echo esc_html(stripslashes($v['val']))?></textarea>
+							<?php break;
+							
+							case 'select':?>
+							
+							<select name="<?php echo esc_attr( $id )?>" id="<?php echo esc_attr( $id )?>">
+							
+							<?php foreach($v['options'] as $value=>$text){
+							
+								if(is_array($text)){
+									$select_opts=$text;
+									$text=$select_opts['text'];
+								}?>
+								
+								<option value="<?php echo esc_attr( $value )?>" 
+								<?php if($value==$v['val']) echo 'selected="selected"'?>>
+								<?php echo esc_html( $text )?>
+								</option>
+								
+							<?php }?>
+							
+							</select>
+							<?php break;
+														
+							case "checkbox":?>
+							<label for="<?php echo esc_attr( $id )?>">
+								<input type="checkbox" name="<?php echo esc_attr( $id )?>" id="<?php echo esc_attr( $id )?>" <?php if($v['val']=='true') echo 'checked="checked"'?>><?php echo esc_html( $v['name'] )?>
+							</label>
+							<?php
+							break;
+							
+							case "onoff":?>
+							<?php $kktfwp_val = ( empty( $v['val'] ) ? $v['std'] : $v['val'] ); ?>
+							<input type="checkbox" name="<?php echo esc_attr( $id )?>" class="kk-toggle kk-toggle-round" id="<?php echo esc_attr( $id )?>" <?php echo (( $kktfwp_val ==='true' ) ? 'checked="checked"' : '')?>>
+							<label for="<?php echo esc_attr( $id )?>"></label>
+							<span><?php echo esc_html( $v['name'] )?></span>
+							<?php
+							break;
+							
+							case "image":?>
+							<?php siteoptions_uploader_function($id,$v['std'],null)?>
+							<?php break;
+							
+							case "color":?>
+							<div id="<?php echo esc_attr( $id )?>" class="color_picker">
+								<input type="text" id="<?php echo esc_attr( $id )?>" name="<?php echo esc_attr( $id )?>" value="<?php echo esc_attr( $v['val'] )?>">
+								<div class="preview"></div>
+							</div>
+							<?php break;
+							
+							case "wpeditor":
+							wp_editor('', $id, array( 'media_buttons' => false )  );
+							break;
+					}?>
+				</div>
+				
+				<div class="explain"><?php echo esc_html( $v['desc'] ); ?></div>
+				<div class="clear">&nbsp;</div>
+			</div>
+				<?php }?>
+				<div class="clear">&nbsp;</div>
+				</div>
+				<?php }?>
+				<div class="clear">&nbsp;</div>
+				</div>
+			<?php }?>
+			<div class="clear">&nbsp;</div>
+		</div>
+		<div class="clear">&nbsp;</div>
+	</div>
+
+	<div class="save_bar_top">
+		<input type="hidden" name="type" value="save">
+		<img alt="Saving..." class="ajax-loading-img ajax-loading-img-bottom" src="<?php echo esc_url( $this->turl )?>/admin/i/loading.gif" style="display:none">
+		<input type="submit" class="button-primary" value="<?php esc_html_e( 'Save All Changes', 'toppic' ) ?>">
+	</div>
+	
+</form>
+
+<form id="ofform-reset" method="post" action="">
+	<span class="submit-footer-reset">
+		<input type="hidden" name="type" value="reset">
+		<input type="submit" onclick="return confirm('CAUTION: Any and all settings will be lost! Click OK to reset.');" class="button submit-button reset-button" value="<?php esc_html_e( 'Reset All Options', 'toppic' ) ?>" name="reset">
+	</span>
+</form>
+<div class="clear">&nbsp;</div>
+</div>
--- a/admin/js/jquery.admin.js
+++ b/admin/js/jquery.admin.js
@@ -0,0 +1,203 @@
+jQuery(document).ready(function ($) {
+	String.prototype.bool = function () {
+		return (/^true$/i).test(this);
+	};
+
+	// Message popups
+	$.fn.center = function () {
+		this.css({
+			"position" : "fixed",
+			"left" : $("#wpbody").css('margin-left'),
+			"top" : $(window).height() / 2 - this.height() + "px"
+		});
+		return this;
+	}
+	$(window).scroll(function () {
+		$('#of-popup-save').center();
+		$('#of-popup-reset').center();
+	});
+	$(window).scroll();
+
+	// Tabs fading
+	$('.group').hide();
+	$('.group:first').fadeIn();
+	$('.group .collapsed').each(function () {
+		$(this).find('input:checked').parent().parent().parent().nextAll().each(function () {
+			if ($(this).hasClass('last')) {
+				$(this).removeClass('hidden');
+				return false;
+			}
+			$(this).filter('.hidden').removeClass('hidden');
+		});
+	});
+
+	// Tabs navigation fading
+	$('#of-nav li:first').addClass('current');
+	$('#of-nav li a').click(function (e) {
+		var clicked_group = $(this).attr('href');
+		$('#of-nav li').removeClass('current');
+		$(this).parent().addClass('current');
+		$('.group').hide();
+		$(clicked_group).fadeIn(100);
+		e.preventDefault();
+	});
+
+	// Colorpicker
+	$('.color_picker .preview').each(function () {
+		var elem = $(this);
+		var color = elem.parent().find('input').val();
+		elem.css('backgroundColor', color).ColorPicker({
+			color : color,
+			onShow : function (cp) {
+				$(cp).fadeIn(100);
+				return false;
+			},
+			onHide : function (cp) {
+				$(cp).fadeOut(100);
+				return false;
+			},
+			onChange : function (hsb, hex, rgb) {
+				elem.css('backgroundColor', '#' + hex).parent().find('input').attr('value', '#' + hex);
+			}
+		});
+	});
+	$('.color_picker :input').blur(function () {
+		$(this).parent().find(".preview").css('backgroundColor', $(this).val());
+	});
+
+	// Range slider
+	$(window).load(function () {
+		$('.kk_range_slider').each(function () {
+			var elem = $(this);
+
+			elem.bind("slider:changed", function (event, data) {
+				// The currently selected value of the slider
+				elem.parent().find('.regular-text').attr('value', data.value);
+
+			});
+		});
+	});
+
+	// AJAX Upload
+	$('.image_upload_button').each(function () {
+		var clickedObject = $(this);
+		var clickedID = $(this).attr('id');
+		new AjaxUpload(clickedID, {
+			action : kk_ajax_data.ajaxurl,
+			name : clickedID,
+			data : {
+				action : 'of_ajax_post_action',
+				type : 'upload',
+				data : clickedID
+			},
+			autoSubmit : true,
+			responseType : false,
+			onChange : function (file, extension) {},
+			onSubmit : function (file, extension) {
+				clickedObject.text('Uploading');
+				this.disable();
+				interval = window.setInterval(function () {
+						var text = clickedObject.text();
+						if (text.length < 13) {
+							clickedObject.text(text + '.');
+						} else {
+							clickedObject.text('Uploading');
+						}
+					}, 200);
+			},
+
+			onComplete : function (file, response) {
+				window.clearInterval(interval);
+				clickedObject.text('Upload Image');
+				this.enable();
+				if (response.search('Upload Error') > -1) {
+					var buildReturn = '<span class="upload-error">' + response + '</span>';
+					$(".upload-error").remove();
+					clickedObject.parent().after(buildReturn);
+				} else {
+					var buildReturn = '<img class="hide of-option-image" id="image_' + clickedID + '" src="' + response + '" alt="" />';
+					$(".upload-error").remove();
+					$("#image_" + clickedID).remove();
+					clickedObject.parent().after(buildReturn);
+					$('img#image_' + clickedID).fadeIn();
+					clickedObject.next('span').fadeIn();
+					clickedObject.parent().prev('input').val(response);
+				}
+			}
+		});
+	});
+
+	// AJAX Remove (clear option value)
+	$('.image_reset_button').click(function () {
+		var clickedObject = $(this);
+		var clickedID = $(this).attr('id');
+		var theID = $(this).attr('title');
+
+		var ajax_url = kk_ajax_data.ajaxurl;
+		var data = {
+			type : 'image_reset',
+			action : 'of_ajax_post_action',
+			data : theID
+		};
+		$.post(ajax_url, data, function (response) {
+			var image_to_remove = $('#image_' + theID);
+			var button_to_hide = $('#reset_' + theID);
+			image_to_remove.fadeOut(500, function () {
+				$(this).remove();
+			});
+			button_to_hide.fadeOut();
+			clickedObject.parent().prev('input').val('');
+		});
+
+		return false;
+	});
+
+	// Save everything else
+	$('#ofform').submit(function () {
+		$(":checkbox").each(function () {
+			this.value = this.checked;
+			this.checked = true
+		});
+		var serializedReturn = $("#ofform").serialize();
+		$(":checkbox").each(function () {
+			this.checked = this.value.bool()
+		});
+
+		$('.ajax-loading-img').fadeIn();
+		var ajax_url = kk_ajax_data.ajaxurl;
+		var data = {
+			type : 'save',
+			action : 'of_ajax_post_action',
+			data : serializedReturn
+		};
+		$.post(ajax_url, data, function (response) {
+			$('.ajax-loading-img').fadeOut();
+			var success = $('#of-popup-save');
+			success.fadeIn();
+			window.setTimeout(function () {
+				success.fadeOut();
+			}, 1000);
+		});
+
+		return false;
+	});
+
+	// Reset all options
+	$('#ofform-reset').submit(function () {
+		var ajax_url = kk_ajax_data.ajaxurl;
+		var data = {
+			type : 'reset',
+			action : 'of_ajax_post_action',
+		};
+		$.post(ajax_url, data, function (response) {
+			var reset = $('#of-popup-reset');
+			reset.fadeIn();
+			window.setTimeout(function () {
+				location.reload()
+			}, 250);
+		});
+
+		return false;
+	});
+
+});
--- a/admin/js/jquery.ajaxupload.js
+++ b/admin/js/jquery.ajaxupload.js
@@ -0,0 +1,606 @@
+/**
+ * AJAX Upload
+ * Project page - http://valums.com/ajax-upload/
+ * Copyright (c) 2008 Andris Valums, http://valums.com
+ * Licensed under the MIT license (http://valums.com/mit-license/)
+ */
+(function(){
+	
+var d = document, w = window;
+
+/**
+ * Get element by id
+ */	
+function get(element){
+	if (typeof element == "string")
+		element = d.getElementById(element);
+	return element;
+}
+
+/**
+ * Attaches event to a dom element
+ */
+function addEvent(el, type, fn){
+	if (w.addEventListener){
+		el.addEventListener(type, fn, false);
+	} else if (w.attachEvent){
+		var f = function(){
+		  fn.call(el, w.event);
+		};			
+		el.attachEvent('on' + type, f)
+	}
+}
+
+
+/**
+ * Creates and returns element from html chunk
+ */
+var toElement = function(){
+	var div = d.createElement('div');
+	return function(html){
+		div.innerHTML = html;
+		var el = div.childNodes[0];
+		div.removeChild(el);
+		return el;
+	}
+}();
+
+function hasClass(ele,cls){
+	return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
+}
+function addClass(ele,cls) {
+	if (!hasClass(ele,cls)) ele.className += " "+cls;
+}
+function removeClass(ele,cls) {
+	var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
+	ele.className=ele.className.replace(reg,' ');
+}
+
+// getOffset function copied from jQuery lib (http://jquery.com/)
+if (document.documentElement["getBoundingClientRect"]){
+	// Get Offset using getBoundingClientRect
+	// http://ejohn.org/blog/getboundingclientrect-is-awesome/
+	var getOffset = function(el){
+		var box = el.getBoundingClientRect(),
+		doc = el.ownerDocument,
+		body = doc.body,
+		docElem = doc.documentElement,
+		
+		// for ie 
+		clientTop = docElem.clientTop || body.clientTop || 0,
+		clientLeft = docElem.clientLeft || body.clientLeft || 0,
+		
+		// In Internet Explorer 7 getBoundingClientRect property is treated as physical,
+		// while others are logical. Make all logical, like in IE8.		
+		
+		zoom = 1;
+		
+		if (body.getBoundingClientRect) {
+			var bound = body.getBoundingClientRect();
+			zoom = (bound.right - bound.left)/body.clientWidth;
+		}
+		
+		if (zoom > 1){
+			clientTop = 0;
+			clientLeft = 0;
+		}
+		
+		var top = box.top/zoom + (window.pageYOffset || docElem && docElem.scrollTop/zoom || body.scrollTop/zoom) - clientTop,
+		left = box.left/zoom + (window.pageXOffset|| docElem && docElem.scrollLeft/zoom || body.scrollLeft/zoom) - clientLeft;
+				
+		return {
+			top: top,
+			left: left
+		};
+	}
+	
+} else {
+	// Get offset adding all offsets 
+	var getOffset = function(el){
+		if (w.jQuery){
+			return jQuery(el).offset();
+		}		
+			
+		var top = 0, left = 0;
+		do {
+			top += el.offsetTop || 0;
+			left += el.offsetLeft || 0;
+		}
+		while (el = el.offsetParent);
+		
+		return {
+			left: left,
+			top: top
+		};
+	}
+}
+
+function getBox(el){
+	var left, right, top, bottom;	
+	var offset = getOffset(el);
+	left = offset.left;
+	top = offset.top;
+						
+	right = left + el.offsetWidth;
+	bottom = top + el.offsetHeight;		
+		
+	return {
+		left: left,
+		right: right,
+		top: top,
+		bottom: bottom
+	};
+}
+
+/**
+ * Crossbrowser mouse coordinates
+ */
+function getMouseCoords(e){		
+	// pageX/Y is not supported in IE
+	// http://www.quirksmode.org/dom/w3c_cssom.html			
+	if (!e.pageX && e.clientX){
+		// In Internet Explorer 7 some properties (mouse coordinates) are treated as physical,
+		// while others are logical (offset).
+		var zoom = 1;	
+		var body = document.body;
+		
+		if (body.getBoundingClientRect) {
+			var bound = body.getBoundingClientRect();
+			zoom = (bound.right - bound.left)/body.clientWidth;
+		}
+
+		return {
+			x: e.clientX / zoom + d.body.scrollLeft + d.documentElement.scrollLeft,
+			y: e.clientY / zoom + d.body.scrollTop + d.documentElement.scrollTop
+		};
+	}
+	
+	return {
+		x: e.pageX,
+		y: e.pageY
+	};		
+
+}
+/**
+ * Function generates unique id
+ */		
+var getUID = function(){
+	var id = 0;
+	return function(){
+		return 'ValumsAjaxUpload' + id++;
+	}
+}();
+
+function fileFromPath(file){
+	return file.replace(/.*(\/|\\)/, "");			
+}
+
+function getExt(file){
+	return (/[.]/.exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : '';
+}			
+
+/**
+ * Cross-browser way to get xhr object  
+ */
+var getXhr = function(){
+	var xhr;
+	
+	return function(){
+		if (xhr) return xhr;
+				
+		if (typeof XMLHttpRequest !== 'undefined') {
+			xhr = new XMLHttpRequest();
+		} else {
+			var v = [
+				"Microsoft.XmlHttp",
+				"MSXML2.XmlHttp.5.0",
+				"MSXML2.XmlHttp.4.0",
+				"MSXML2.XmlHttp.3.0",
+				"MSXML2.XmlHttp.2.0"					
+			];
+			
+			for (var i=0; i < v.length; i++){
+				try {
+					xhr = new ActiveXObject(v[i]);
+					break;
+				} catch (e){}
+			}
+		} 			
+
+		return xhr;
+	}
+}();
+
+// Please use AjaxUpload , Ajax_upload will be removed in the next version
+Ajax_upload = AjaxUpload = function(button, options){
+	if (button.jquery){
+		// jquery object was passed
+		button = button[0];
+	} else if (typeof button == "string" && /^#.*/.test(button)){					
+		button = button.slice(1);				
+	}
+	button = get(button);	
+	
+	this._input = null;
+	this._button = button;
+	this._disabled = false;
+	this._submitting = false;
+	// Variable changes to true if the button was clicked
+	// 3 seconds ago (requred to fix Safari on Mac error)
+	this._justClicked = false;
+	this._parentDialog = d.body;
+		
+	if (window.jQuery && jQuery.ui && jQuery.ui.dialog){
+		var parentDialog = jQuery(this._button).parents('.ui-dialog');
+		if (parentDialog.length){
+			this._parentDialog = parentDialog[0];
+		}
+	}			
+					
+	this._settings = {
+		// Location of the server-side upload script
+		action: 'upload.php',			
+		// File upload name
+		name: 'userfile',
+		// Additional data to send
+		data: {},
+		// Submit file as soon as it's selected
+		autoSubmit: true,
+		// The type of data that you're expecting back from the server.
+		// Html and xml are detected automatically.
+		// Only useful when you are using json data as a response.
+		// Set to "json" in that case. 
+		responseType: false,
+		// Location of the server-side script that fixes Safari 
+		// hanging problem returning "Connection: close" header
+		closeConnection: '',
+		// Class applied to button when mouse is hovered
+		hoverClass: 'hover',		
+		// When user selects a file, useful with autoSubmit disabled			
+		onChange: function(file, extension){},					
+		// Callback to fire before file is uploaded
+		// You can return false to cancel upload
+		onSubmit: function(file, extension){},
+		// Fired when file upload is completed
+		// WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
+		onComplete: function(file, response) {}
+	};
+
+	// Merge the users options with our defaults
+	for (var i in options) {
+		this._settings[i] = options[i];
+	}
+	
+	this._createInput();
+	this._rerouteClicks();
+}
+			
+// assigning methods to our class
+AjaxUpload.prototype = {
+	setData : function(data){
+		this._settings.data = data;
+	},
+	disable : function(){
+		this._disabled = true;
+	},
+	enable : function(){
+		this._disabled = false;
+	},
+	// removes instance
+	destroy : function(){
+		if(this._input){
+			if(this._input.parentNode){
+				this._input.parentNode.removeChild(this._input);
+			}
+			this._input = null;
+		}
+	},				
+	/**
+	 * Creates invisible file input above the button 
+	 */
+	_createInput : function(){
+		var self = this;
+		var input = d.createElement("input");
+		input.setAttribute('type', 'file');
+		input.setAttribute('name', this._settings.name);
+		var styles = {
+			'position' : 'absolute'
+			,'margin': '-5px 0 0 -175px'
+			,'padding': 0
+			,'width': '220px'
+			,'height': '30px'
+			,'fontSize': '14px'								
+			,'opacity': 0
+			,'cursor': 'pointer'
+			,'display' : 'none'
+			,'zIndex' :  2147483583 //Max zIndex supported by Opera 9.0-9.2x 
+			// Strange, I expected 2147483647
+			// Doesn't work in IE :(
+			//,'direction' : 'ltr'			
+		};
+		for (var i in styles){
+			input.style[i] = styles[i];
+		}
+		
+		// Make sure that element opacity exists
+		// (IE uses filter instead)
+		if ( ! (input.style.opacity === "0")){
+			input.style.filter = "alpha(opacity=0)";
+		}
+							
+		this._parentDialog.appendChild(input);
+
+		addEvent(input, 'change', function(){
+			// get filename from input
+			var file = fileFromPath(this.value);	
+			if(self._settings.onChange.call(self, file, getExt(file)) == false ){
+				return;				
+			}														
+			// Submit form when value is changed
+			if (self._settings.autoSubmit){
+				self.submit();						
+			}						
+		});
+		
+		// Fixing problem with Safari
+		// The problem is that if you leave input before the file select dialog opens
+		// it does not upload the file.
+		// As dialog opens slowly (it is a sheet dialog which takes some time to open)
+		// there is some time while you can leave the button.
+		// So we should not change display to none immediately
+		addEvent(input, 'click', function(){
+			self.justClicked = true;
+			setTimeout(function(){
+				// we will wait 3 seconds for dialog to open
+				self.justClicked = false;
+			}, 2500);			
+		});		
+		
+		this._input = input;
+	},
+	_rerouteClicks : function (){
+		var self = this;
+	
+		// IE displays 'access denied' error when using this method
+		// other browsers just ignore click()
+		// addEvent(this._button, 'click', function(e){
+		//   self._input.click();
+		// });
+				
+		var box, dialogOffset = {top:0, left:0}, over = false;
+									
+		addEvent(self._button, 'mouseover', function(e){
+			if (!self._input || over) return;
+			
+			over = true;
+			box = getBox(self._button);
+					
+			if (self._parentDialog != d.body){
+				dialogOffset = getOffset(self._parentDialog);
+			}	
+		});
+		
+	
+		// We can't use mouseout on the button,
+		// because invisible input is over it
+		addEvent(document, 'mousemove', function(e){
+			var input = self._input;			
+			if (!input || !over) return;
+			
+			if (self._disabled){
+				removeClass(self._button, self._settings.hoverClass);
+				input.style.display = 'none';
+				return;
+			}	
+										
+			var c = getMouseCoords(e);
+
+			if ((c.x >= box.left) && (c.x <= box.right) && 
+			(c.y >= box.top) && (c.y <= box.bottom)){
+							
+				input.style.top = c.y - dialogOffset.top + 'px';
+				input.style.left = c.x - dialogOffset.left + 'px';
+				input.style.display = 'block';
+				addClass(self._button, self._settings.hoverClass);
+								
+			} else {		
+				// mouse left the button
+				over = false;
+			
+				var check = setInterval(function(){
+					// if input was just clicked do not hide it
+					// to prevent safari bug
+					 
+					if (self.justClicked){
+						return;
+					}
+					
+					if ( !over ){
+						input.style.display = 'none';	
+					}						
+				
+					clearInterval(check);
+				
+				}, 25);
+					
+
+				removeClass(self._button, self._settings.hoverClass);
+			}			
+		});			
+			
+	},
+	/**
+	 * Creates iframe with unique name
+	 */
+	_createIframe : function(){
+		// unique name
+		// We cannot use getTime, because it somelustrel return
+		// same value in safari :(
+		var id = getUID();
+		
+		// Remove ie6 "This page contains both secure and nonsecure items" prompt 
+		// http://tinyurl.com/77w9wh
+		var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />');
+		iframe.id = id;
+		iframe.style.display = 'none';
+		d.body.appendChild(iframe);			
+		return iframe;						
+	},
+	/**
+	 * Upload file without refreshing the page
+	 */
+	submit : function(){
+		var self = this, settings = this._settings;	
+					
+		if (this._input.value === ''){
+			// there is no file
+			return;
+		}
+										
+		// get filename from input
+		var file = fileFromPath(this._input.value);			
+
+		// execute user event
+		if (! (settings.onSubmit.call(this, file, getExt(file)) == false)) {
+			// Create new iframe for this submission
+			var iframe = this._createIframe();
+			
+			// Do not submit if user function returns false										
+			var form = this._createForm(iframe);
+			form.appendChild(this._input);
+
+			// A pretty little hack to make uploads not hang in Safari. Just call this
+			// immediately before the upload is submitted. This does an Ajax call to
+			// the server, which returns an empty document with the "Connection: close"
+			// header, telling Safari to close the active connection.
+			// http://blog.airbladesoftware.com/2007/8/17/note-to-self-prevent-uploads-hanging-in-safari
+			if (settings.closeConnection && /AppleWebKit|MSIE/.test(navigator.userAgent)){
+				var xhr = getXhr();
+				// Open synhronous connection
+				xhr.open('GET', settings.closeConnection, false);
+				xhr.send('');
+			}
+			
+			form.submit();
+			
+			d.body.removeChild(form);				
+			form = null;
+			this._input = null;
+			
+			// create new input
+			this._createInput();
+			
+			var toDeleteFlag = false;
+			
+			addEvent(iframe, 'load', function(e){
+					
+				if (// For Safari
+					iframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" ||
+					// For FF, IE
+					iframe.src == "javascript:'<html></html>';"){						
+					
+					// First time around, do not delete.
+					if( toDeleteFlag ){
+						// Fix busy state in FF3
+						setTimeout( function() {
+							d.body.removeChild(iframe);
+						}, 0);
+					}
+					return;
+				}				
+				
+				var doc = iframe.contentDocument ? iframe.contentDocument : frames[iframe.id].document;
+
+				// fixing Opera 9.26
+				if (doc.readyState && doc.readyState != 'complete'){
+					// Opera fires load event multiple lustrel
+					// Even when the DOM is not ready yet
+					// this fix should not affect other browsers
+					return;
+				}
+				
+				// fixing Opera 9.64
+				if (doc.body && doc.body.innerHTML == "false"){
+					// In Opera 9.64 event was fired second time
+					// when body.innerHTML changed from false 
+					// to server response approx. after 1 sec
+					return;				
+				}
+				
+				var response;
+									
+				if (doc.XMLDocument){
+					// response is a xml document IE property
+					response = doc.XMLDocument;
+				} else if (doc.body){
+					// response is html document or plain text
+					response = doc.body.innerHTML;
+					if (settings.responseType && settings.responseType.toLowerCase() == 'json'){
+						// If the document was sent as 'application/javascript' or
+						// 'text/javascript', then the browser wraps the text in a <pre>
+						// tag and performs html encoding on the contents.  In this case,
+						// we need to pull the original text content from the text node's
+						// nodeValue property to retrieve the unmangled content.
+						// Note that IE6 only understands text/html
+						if (doc.body.firstChild && doc.body.firstChild.nodeName.toUpperCase() == 'PRE'){
+							response = doc.body.firstChild.firstChild.nodeValue;
+						}
+						if (response) {
+							response = window["eval"]("(" + response + ")");
+						} else {
+							response = {};
+						}
+					}
+				} else {
+					// response is a xml document
+					var response = doc;
+				}
+																			
+				settings.onComplete.call(self, file, response);
+						
+				// Reload blank page, so that reloading main page
+				// does not re-submit the post. Also, remember to
+				// delete the frame
+				toDeleteFlag = true;
+				
+				// Fix IE mixed content issue
+				iframe.src = "javascript:'<html></html>';";		 								
+			});
+	
+		} else {
+			// clear input to allow user to select same file
+			// Doesn't work in IE6
+			// this._input.value = '';
+			d.body.removeChild(this._input);				
+			this._input = null;
+			
+			// create new input
+			this._createInput();						
+		}
+	},		
+	/**
+	 * Creates form, that will be submitted to iframe
+	 */
+	_createForm : function(iframe){
+		var settings = this._settings;
+		
+		// method, enctype must be specified here
+		// because changing this attr on the fly is not allowed in IE 6/7		
+		var form = toElement('<form method="post" enctype="multipart/form-data"></form>');
+		form.style.display = 'none';
+		form.action = settings.action;
+		form.target = iframe.name;
+		d.body.appendChild(form);
+		
+		// Create hidden input element for each data key
+		for (var prop in settings.data){
+			var el = d.createElement("input");
+			el.type = 'hidden';
+			el.name = prop;
+			el.value = settings.data[prop];
+			form.appendChild(el);
+		}			
+		return form;
+	}	
+};
+})();
--- a/admin/js/jquery.colorpicker.js
+++ b/admin/js/jquery.colorpicker.js
@@ -0,0 +1,455 @@
+/**
+ *
+ * Color picker
+ * Author: Stefan Petre www.eyecon.ro
+ * 
+ * Dependencies: jQuery
+ *
+ */
+(function ($) {
+	var ColorPicker = function () {
+		var
+			ids = {},
+			inAction,
+			charMin = 65,
+			visible,
+			tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',
+			defaults = {
+				eventName: 'click',
+				onShow: function () {},
+				onBeforeShow: function(){},
+				onHide: function () {},
+				onChange: function () {},
+				onSubmit: function () {},
+				color: 'ff0000',
+				livePreview: true,
+				flat: false
+			},
+			fillRGBFields = function  (hsb, cal) {
+				var rgb = HSBToRGB(hsb);
+				$(cal).data('colorpicker').fields
+					.eq(1).val(rgb.r).end()
+					.eq(2).val(rgb.g).end()
+					.eq(3).val(rgb.b).end();
+			},
+			fillHSBFields = function  (hsb, cal) {
+				$(cal).data('colorpicker').fields
+					.eq(4).val(hsb.h).end()
+					.eq(5).val(hsb.s).end()
+					.eq(6).val(hsb.b).end();
+			},
+			fillHexFields = function (hsb, cal) {
+				$(cal).data('colorpicker').fields
+					.eq(0).val(HSBToHex(hsb)).end();
+			},
+			setSelector = function (hsb, cal) {
+				$(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100}));
+				$(cal).data('colorpicker').selectorIndic.css({
+					left: parseInt(150 * hsb.s/100, 10),
+					top: parseInt(150 * (100-hsb.b)/100, 10)
+				});
+			},
+			setHue = function (hsb, cal) {
+				$(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));
+			},
+			setCurrentColor = function (hsb, cal) {
+				$(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb));
+			},
+			setNewColor = function (hsb, cal) {
+				$(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb));
+			},
+			keyDown = function (ev) {
+				var pressedKey = ev.charCode || ev.keyCode || -1;
+				if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) {
+					return false;
+				}
+				var cal = $(this).parent().parent();
+				if (cal.data('colorpicker').livePreview === true) {
+					change.apply(this);
+				}
+			},
+			change = function (ev) {
+				var cal = $(this).parent().parent(), col;
+				if (this.parentNode.className.indexOf('_hex') > 0) {
+					cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));
+				} else if (this.parentNode.className.indexOf('_hsb') > 0) {
+					cal.data('colorpicker').color = col = fixHSB({
+						h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10),
+						s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10),
+						b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10)
+					});
+				} else {
+					cal.data('colorpicker').color = col = RGBToHSB(fixRGB({
+						r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10),
+						g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10),
+						b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10)
+					}));
+				}
+				if (ev) {
+					fillRGBFields(col, cal.get(0));
+					fillHexFields(col, cal.get(0));
+					fillHSBFields(col, cal.get(0));
+				}
+				setSelector(col, cal.get(0));
+				setHue(col, cal.get(0));
+				setNewColor(col, cal.get(0));
+				cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);
+			},
+			blur = function (ev) {
+				var cal = $(this).parent().parent();
+				cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus')
+			},
+			focus = function () {
+				charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65;
+				$(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');
+				$(this).parent().addClass('colorpicker_focus');
+			},
+			downIncrement = function (ev) {
+				var field = $(this).parent().find('input').focus();
+				var current = {
+					el: $(this).parent().addClass('colorpicker_slider'),
+					max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
+					y: ev.pageY,
+					field: field,
+					val: parseInt(field.val(), 10),
+					preview: $(this).parent().parent().data('colorpicker').livePreview					
+				};
+				$(document).bind('mouseup', current, upIncrement);
+				$(document).bind('mousemove', current, moveIncrement);
+			},
+			moveIncrement = function (ev) {
+				ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10))));
+				if (ev.data.preview) {
+					change.apply(ev.data.field.get(0), [true]);
+				}
+				return false;
+			},
+			upIncrement = function (ev) {
+				change.apply(ev.data.field.get(0), [true]);
+				ev.data.el.removeClass('colorpicker_slider').find('input').focus();
+				$(document).unbind('mouseup', upIncrement);
+				$(document).unbind('mousemove', moveIncrement);
+				return false;
+			},
+			downHue = function (ev) {
+				var current = {
+					cal: $(this).parent(),
+					y: $(this).offset().top
+				};
+				current.preview = current.cal.data('colorpicker').livePreview;
+				$(document).bind('mouseup', current, upHue);
+				$(document).bind('mousemove', current, moveHue);
+			},
+			moveHue = function (ev) {
+				change.apply(
+					ev.data.cal.data('colorpicker')
+						.fields
+						.eq(4)
+						.val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))
+						.get(0),
+					[ev.data.preview]
+				);
+				return false;
+			},
+			upHue = function (ev) {
+				fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
+				fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
+				$(document).unbind('mouseup', upHue);
+				$(document).unbind('mousemove', moveHue);
+				return false;
+			},
+			downSelector = function (ev) {
+				var current = {
+					cal: $(this).parent(),
+					pos: $(this).offset()
+				};
+				current.preview = current.cal.data('colorpicker').livePreview;
+				$(document).bind('mouseup', current, upSelector);
+				$(document).bind('mousemove', current, moveSelector);
+			},
+			moveSelector = function (ev) {
+				change.apply(
+					ev.data.cal.data('colorpicker')
+						.fields
+						.eq(6)
+						.val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
+						.end()
+						.eq(5)
+						.val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
+						.get(0),
+					[ev.data.preview]
+				);
+				return false;
+			},
+			upSelector = function (ev) {
+				fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
+				fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
+				$(document).unbind('mouseup', upSelector);
+				$(document).unbind('mousemove', moveSelector);
+				return false;
+			},
+			enterSubmit = function (ev) {
+				$(this).addClass('colorpicker_focus');
+			},
+			leaveSubmit = function (ev) {
+				$(this).removeClass('colorpicker_focus');
+			},
+			clickSubmit = function (ev) {
+				var cal = $(this).parent();
+				var col = cal.data('colorpicker').color;
+				cal.data('colorpicker').origColor = col;
+				setCurrentColor(col, cal.get(0));
+				cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col));
+				cal.hide();
+			},
+			show = function (ev) {
+				var cal = $('#' + $(this).data('colorpickerId'));
+				cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
+				var pos = $(this).offset();
+				var viewPort = getViewport();
+				var top = pos.top + this.offsetHeight;
+				var left = pos.left;
+				if (top + 176 > viewPort.t + viewPort.h) {
+					top -= this.offsetHeight + 176;
+				} else {
+				  top += 5;
+				}
+				if (left + 356 > viewPort.l + viewPort.w) {
+					left -= 356;
+				}
+				cal.css({left: left + 'px', top: top + 'px'});
+				if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
+					cal.show();
+				}
+				$(document).bind('mousedown', {cal: cal}, hide);
+				return false;
+			},
+			hide = function (ev) {
+				if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
+					if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
+						ev.data.cal.hide();
+					}
+					$(document).unbind('mousedown', hide);
+				}
+			},
+			isChildOf = function(parentEl, el, container) {
+				if (parentEl == el) {
+					return true;
+				}
+				if (parentEl.contains) {
+					return parentEl.contains(el);
+				}
+				if ( parentEl.compareDocumentPosition ) {
+					return !!(parentEl.compareDocumentPosition(el) & 16);
+				}
+				var prEl = el.parentNode;
+				while(prEl && prEl != container) {
+					if (prEl == parentEl)
+						return true;
+					prEl = prEl.parentNode;
+				}
+				return false;
+			},
+			getViewport = function () {
+				var m = document.compatMode == 'CSS1Compat';
+				return {
+					l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
+					t : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop),
+					w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth),
+					h : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight)
+				};
+			},
+			fixHSB = function (hsb) {
+				return {
+					h: Math.min(360, Math.max(0, hsb.h)),
+					s: Math.min(100, Math.max(0, hsb.s)),
+					b: Math.min(100, Math.max(0, hsb.b))
+				};
+			}, 
+			fixRGB = function (rgb) {
+				return {
+					r: Math.min(255, Math.max(0, rgb.r)),
+					g: Math.min(255, Math.max(0, rgb.g)),
+					b: Math.min(255, Math.max(0, rgb.b))
+				};
+			},
+			fixHex = function (hex) {
+				var len = 6 - hex.length;
+				if (len > 0) {
+					var o = [];
+					for (var i=0; i<len; i++) {
+						o.push('0');
+					}
+					o.push(hex);
+					hex = o.join('');
+				}
+				return hex;
+			}, 
+			HexToRGB = function (hex) {
+				var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
+				return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
+			},
+			HexToHSB = function (hex) {
+				return RGBToHSB(HexToRGB(hex));
+			},
+			RGBToHSB = function (rgb) {
+				var hsb = {};
+				hsb.b = Math.max(Math.max(rgb.r,rgb.g),rgb.b);
+				hsb.s = (hsb.b <= 0) ? 0 : Math.round(100*(hsb.b - Math.min(Math.min(rgb.r,rgb.g),rgb.b))/hsb.b);
+				hsb.b = Math.round((hsb.b /255)*100);
+				if((rgb.r==rgb.g) && (rgb.g==rgb.b)) hsb.h = 0;
+				else if(rgb.r>=rgb.g && rgb.g>=rgb.b) hsb.h = 60*(rgb.g-rgb.b)/(rgb.r-rgb.b);
+				else if(rgb.g>=rgb.r && rgb.r>=rgb.b) hsb.h = 60  + 60*(rgb.g-rgb.r)/(rgb.g-rgb.b);
+				else if(rgb.g>=rgb.b && rgb.b>=rgb.r) hsb.h = 120 + 60*(rgb.b-rgb.r)/(rgb.g-rgb.r);
+				else if(rgb.b>=rgb.g && rgb.g>=rgb.r) hsb.h = 180 + 60*(rgb.b-rgb.g)/(rgb.b-rgb.r);
+				else if(rgb.b>=rgb.r && rgb.r>=rgb.g) hsb.h = 240 + 60*(rgb.r-rgb.g)/(rgb.b-rgb.g);
+				else if(rgb.r>=rgb.b && rgb.b>=rgb.g) hsb.h = 300 + 60*(rgb.r-rgb.b)/(rgb.r-rgb.g);
+				else hsb.h = 0;
+				hsb.h = Math.round(hsb.h);
+				return hsb;
+			},
+			HSBToRGB = function (hsb) {
+				var rgb = {};
+				var h = Math.round(hsb.h);
+				var s = Math.round(hsb.s*255/100);
+				var v = Math.round(hsb.b*255/100);
+				if(s == 0) {
+					rgb.r = rgb.g = rgb.b = v;
+				} else {
+					var t1 = v;
+					var t2 = (255-s)*v/255;
+					var t3 = (t1-t2)*(h%60)/60;
+					if(h==360) h = 0;
+					if(h<60) {rgb.r=t1;	rgb.b=t2; rgb.g=t2+t3}
+					else if(h<120) {rgb.g=t1; rgb.b=t2;	rgb.r=t1-t3}
+					else if(h<180) {rgb.g=t1; rgb.r=t2;	rgb.b=t2+t3}
+					else if(h<240) {rgb.b=t1; rgb.r=t2;	rgb.g=t1-t3}
+					else if(h<300) {rgb.b=t1; rgb.g=t2;	rgb.r=t2+t3}
+					else if(h<360) {rgb.r=t1; rgb.g=t2;	rgb.b=t1-t3}
+					else {rgb.r=0; rgb.g=0;	rgb.b=0}
+				}
+				return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
+			},
+			RGBToHex = function (rgb) {
+				var hex = [
+					rgb.r.toString(16),
+					rgb.g.toString(16),
+					rgb.b.toString(16)
+				];
+				$.each(hex, function (nr, val) {
+					if (val.length == 1) {
+						hex[nr] = '0' + val;
+					}
+				});
+				return hex.join('');
+			},
+			HSBToHex = function (hsb) {
+				return RGBToHex(HSBToRGB(hsb));
+			};
+		return {
+			init: function (options) {
+				options = $.extend({}, defaults, options||{});
+				if (typeof options.color == 'string') {
+					options.color = HexToHSB(options.color);
+				} else if (options.color.r != undefined && options.color.g != undefined && options.color.b != undefined) {
+					options.color = RGBToHSB(options.color);
+				} else if (options.color.h != undefined && options.color.s != undefined && options.color.b != undefined) {
+					options.color = fixHSB(options.color);
+				} else {
+					return this;
+				}
+				options.origColor = options.color;
+				return this.each(function () {
+					if (!$(this).data('colorpickerId')) {
+						var id = 'collorpicker_' + parseInt(Math.random() * 1000);
+						$(this).data('colorpickerId', id);
+						var cal = $(tpl).attr('id', id);
+						if (options.flat) {
+							cal.appendTo(this).show();
+						} else {
+							cal.appendTo(document.body);
+						}
+						options.fields = cal
+											.find('input')
+												.bind('keydown', keyDown)
+												.bind('change', change)
+												.bind('blur', blur)
+												.bind('focus', focus);
+						cal.find('span').bind('mousedown', downIncrement);
+						options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);
+						options.selectorIndic = options.selector.find('div div');
+						options.hue = cal.find('div.colorpicker_hue div');
+						cal.find('div.colorpicker_hue').bind('mousedown', downHue);
+						options.newColor = cal.find('div.colorpicker_new_color');
+						options.currentColor = cal.find('div.colorpicker_current_color');
+						cal.data('colorpicker', options);
+						cal.find('div.colorpicker_submit')
+							.bind('mouseenter', enterSubmit)
+							.bind('mouseleave', leaveSubmit)
+							.bind('click', clickSubmit);
+						fillRGBFields(options.color, cal.get(0));
+						fillHSBFields(options.color, cal.get(0));
+						fillHexFields(options.color, cal.get(0));
+						setHue(options.color, cal.get(0));
+						setSelector(options.color, cal.get(0));
+						setCurrentColor(options.color, cal.get(0));
+						setNewColor(options.color, cal.get(0));
+						if (options.flat) {
+							cal.css({
+								position: 'relative',
+								display: 'block'
+							});
+						} else {
+							$(this).bind(options.eventName, show);
+						}
+					}
+				});
+			},
+			showPicker: function() {
+				return this.each( function () {
+					if ($(this).data('colorpickerId')) {
+						show.apply(this);
+					}
+				});
+			},
+			hidePicker: function() {
+				return this.each( function () {
+					if ($(this).data('colorpickerId')) {
+						$('#' + $(this).data('colorpickerId')).hide();
+					}
+				});
+			},
+			setColor: function(col) {
+				if (typeof col == 'string') {
+					col = HexToHSB(col);
+				} else if (col.r != undefined && col.g != undefined && col.b != undefined) {
+					col = RGBToHSB(col);
+				} else if (col.h != undefined && col.s != undefined && col.b != undefined) {
+					col = fixHSB(col);
+				} else {
+					return this;
+				}
+				return this.each(function(){
+					if ($(this).data('colorpickerId')) {
+						var cal = $('#' + $(this).data('colorpickerId'));
+						cal.data('colorpicker').color = col;
+						cal.data('colorpicker').origColor = col;
+						fillRGBFields(col, cal.get(0));
+						fillHSBFields(col, cal.get(0));
+						fillHexFields(col, cal.get(0));
+						setHue(col, cal.get(0));
+						setSelector(col, cal.get(0));
+						setCurrentColor(col, cal.get(0));
+						setNewColor(col, cal.get(0));
+					}
+				});
+			}
+		};
+	}();
+	$.fn.extend({
+		ColorPicker: ColorPicker.init,
+		ColorPickerHide: ColorPicker.hide,
+		ColorPickerShow: ColorPicker.show,
+		ColorPickerSetColor: ColorPicker.setColor
+	});
+})(jQuery)
--- a/admin/js/jquery.maskedinput-1.2.2.js
+++ b/admin/js/jquery.maskedinput-1.2.2.js
@@ -0,0 +1,252 @@
+/// <reference path="../../../lib/jquery-1.2.6.js" />
+/*
+	Masked Input plugin for jQuery
+	Copyright (c) 2007-2009 Josh Bush (digitalbush.com)
+	Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license) 
+	Version: 1.2.2 (03/09/2009 22:39:06)
+*/
+(function($) {
+	var pasteEventName = ($.browser.msie ? 'paste' : 'input') + ".mask";
+	var iPhone = (window.orientation != undefined);
+
+	$.mask = {
+		//Predefined character definitions
+		definitions: {
+			'9': "[0-9]",
+			'a': "[A-Za-z]",
+			'*': "[A-Za-z0-9]"
+		}
+	};
+
+	$.fn.extend({
+		//Helper Function for Caret positioning
+		caret: function(begin, end) {
+			if (this.length == 0) return;
+			if (typeof begin == 'number') {
+				end = (typeof end == 'number') ? end : begin;
+				return this.each(function() {
+					if (this.setSelectionRange) {
+						this.focus();
+						this.setSelectionRange(begin, end);
+					} else if (this.createTextRange) {
+						var range = this.createTextRange();
+						range.collapse(true);
+						range.moveEnd('character', end);
+						range.moveStart('character', begin);
+						range.select();
+					}
+				});
+			} else {
+				if (this[0].setSelectionRange) {
+					begin = this[0].selectionStart;
+					end = this[0].selectionEnd;
+				} else if (document.selection && document.selection.createRange) {
+					var range = document.selection.createRange();
+					begin = 0 - range.duplicate().moveStart('character', -100000);
+					end = begin + range.text.length;
+				}
+				return { begin: begin, end: end };
+			}
+		},
+		unmask: function() { return this.trigger("unmask"); },
+		mask: function(mask, settings) {
+			if (!mask && this.length > 0) {
+				var input = $(this[0]);
+				var tests = input.data("tests");
+				return $.map(input.data("buffer"), function(c, i) {
+					return tests[i] ? c : null;
+				}).join('');
+			}
+			settings = $.extend({
+				placeholder: "_",
+				completed: null
+			}, settings);
+
+			var defs = $.mask.definitions;
+			var tests = [];
+			var partialPosition = mask.length;
+			var firstNonMaskPos = null;
+			var len = mask.length;
+
+			$.each(mask.split(""), function(i, c) {
+				if (c == '?') {
+					len--;
+					partialPosition = i;
+				} else if (defs[c]) {
+					tests.push(new RegExp(defs[c]));
+					if(firstNonMaskPos==null)
+						firstNonMaskPos =  tests.length - 1;
+				} else {
+					tests.push(null);
+				}
+			});
+
+			return this.each(function() {
+				var input = $(this);
+				var buffer = $.map(mask.split(""), function(c, i) { if (c != '?') return defs[c] ? settings.placeholder : c });
+				var ignore = false;  			//Variable for ignoring control keys
+				var focusText = input.val();
+
+				input.data("buffer", buffer).data("tests", tests);
+
+				function seekNext(pos) {
+					while (++pos <= len && !tests[pos]);
+					return pos;
+				};
+
+				function shiftL(pos) {
+					while (!tests[pos] && --pos >= 0);
+					for (var i = pos; i < len; i++) {
+						if (tests[i]) {
+							buffer[i] = settings.placeholder;
+							var j = seekNext(i);
+							if (j < len && tests[i].test(buffer[j])) {
+								buffer[i] = buffer[j];
+							} else
+								break;
+						}
+					}
+					writeBuffer();
+					input.caret(Math.max(firstNonMaskPos, pos));
+				};
+
+				function shiftR(pos) {
+					for (var i = pos, c = settings.placeholder; i < len; i++) {
+						if (tests[i]) {
+							var j = seekNext(i);
+							var t = buffer[i];
+							buffer[i] = c;
+							if (j < len && tests[j].test(t))
+								c = t;
+							else
+								break;
+						}
+					}
+				};
+
+				function keydownEvent(e) {
+					var pos = $(this).caret();
+					var k = e.keyCode;
+					ignore = (k < 16 || (k > 16 && k < 32) || (k > 32 && k < 41));
+
+					//delete selection before proceeding
+					if ((pos.begin - pos.end) != 0 && (!ignore || k == 8 || k == 46))
+						clearBuffer(pos.begin, pos.end);
+
+					//backspace, delete, and escape get special treatment
+					if (k == 8 || k == 46 || (iPhone && k == 127)) {//backspace/delete
+						shiftL(pos.begin + (k == 46 ? 0 : -1));
+						return false;
+					} else if (k == 27) {//escape
+						input.val(focusText);
+						input.caret(0, checkVal());
+						return false;
+					}
+				};
+
+				function keypressEvent(e) {
+					if (ignore) {
+						ignore = false;
+						//Fixes Mac FF bug on backspace
+						return (e.keyCode == 8) ? false : null;
+					}
+					e = e || window.event;
+					var k = e.charCode || e.keyCode || e.which;
+					var pos = $(this).caret();
+
+					if (e.ctrlKey || e.altKey || e.metaKey) {//Ignore
+						return true;
+					} else if ((k >= 32 && k <= 125) || k > 186) {//typeable characters
+						var p = seekNext(pos.begin - 1);
+						if (p < len) {
+							var c = String.fromCharCode(k);
+							if (tests[p].test(c)) {
+								shiftR(p);
+								buffer[p] = c;
+								writeBuffer();
+								var next = seekNext(p);
+								$(this).caret(next);
+								if (settings.completed && next == len)
+									settings.completed.call(input);
+							}
+						}
+					}
+					return false;
+				};
+
+				function clearBuffer(start, end) {
+					for (var i = start; i < end && i < len; i++) {
+						if (tests[i])
+							buffer[i] = settings.placeholder;
+					}
+				};
+
+				function writeBuffer() { return input.val(buffer.join('')).val(); };
+
+				function checkVal(allow) {
+					//try to place characters where they belong
+					var test = input.val();
+					var lastMatch = -1;
+					for (var i = 0, pos = 0; i < len; i++) {
+						if (tests[i]) {
+							buffer[i] = settings.placeholder;
+							while (pos++ < test.length) {
+								var c = test.charAt(pos - 1);
+								if (tests[i].test(c)) {
+									buffer[i] = c;
+									lastMatch = i;
+									break;
+								}
+							}
+							if (pos > test.length)
+								break;
+						} else if (buffer[i] == test[pos] && i!=partialPosition) {
+							pos++;
+							lastMatch = i;
+						} 
+					}
+					if (!allow && lastMatch + 1 < partialPosition) {
+						input.val("");
+						clearBuffer(0, len);
+					} else if (allow || lastMatch + 1 >= partialPosition) {
+						writeBuffer();
+						if (!allow) input.val(input.val().substring(0, lastMatch + 1));
+					}
+					return (partialPosition ? i : firstNonMaskPos);
+				};
+
+				if (!input.attr("readonly"))
+					input
+					.one("unmask", function() {
+						input
+							.unbind(".mask")
+							.removeData("buffer")
+							.removeData("tests");
+					})
+					.bind("focus.mask", function() {
+						focusText = input.val();
+						var pos = checkVal();
+						writeBuffer();
+						setTimeout(function() {
+							if (pos == mask.length)
+								input.caret(0, pos);
+							else
+								input.caret(pos);
+						}, 0);
+					})
+					.bind("blur.mask", function() {
+						checkVal();
+						if (input.val() != focusText)
+							input.change();
+					})
+					.bind("keydown.mask", keydownEvent)
+					.bind("keypress.mask", keypressEvent)
+					.bind(pasteEventName, function() {
+						setTimeout(function() { input.caret(checkVal(true)); }, 0);
+					});
+
+				checkVal(); //Perform initial check for existing values
+			});
+		}
+	});
+})(jQuery);
--- a/admin/js/jquery.settings.js
+++ b/admin/js/jquery.settings.js
@@ -0,0 +1,99 @@
+jQuery(function ($) {
+
+	"use strict";
+
+	// Menu options
+
+	var menuTypeCss = $('.sflickr_userid, .sflickr_api, .sflickr_icount, .sflickr_isize'),
+		menuTypeCss_2 = $('#BackgroundSlider .1, #BackgroundSlider .3, #BackgroundSlider .4'),
+		menuTypeCss_3 = $('#BackgroundSlider .2'),
+		menuType = $('#portfolio-type-Video'),
+		selectors = $('#toppic_theme_fullscreen_stream'),
+		selectors_menu = $('#toppic_theme_menu_style'),
+		contentStyle = $('.content_style'),
+		menuOpacity = $('.menu_opacity'),
+		menuColor = $('.menu_color, .menu_links_color');
+
+	menuTypeCss.css('display', 'none');
+	menuTypeCss_2.css('display', 'none');
+	menuTypeCss_3.css('display', 'none');
+
+	selectors.change(function () {
+
+		if ($(this).val() == 'ken_b') {
+			menuTypeCss_3.slideDown();
+			menuTypeCss_2.slideUp();
+			menuTypeCss.slideUp();
+		} else {
+			menuTypeCss_3.slideUp();
+			menuTypeCss_2.slideDown();
+			menuTypeCss.slideUp();
+		}
+
+	});
+
+	if (selectors.val() == 'kk_royal') {
+		menuTypeCss_2.css('display', 'block');
+		menuTypeCss_3.css('display', 'none');
+	}
+
+	if (selectors.val() == 'ken_b') {
+		menuTypeCss.css('display', 'none');
+		menuTypeCss_2.css('display', 'none');
+		menuTypeCss_3.css('display', 'block');
+	}
+
+	selectors_menu.change(function () {
+		if ($(this).val() == 'kk-menu-left-boxed') {
+			contentStyle.slideUp();
+			menuColor.slideDown();
+			menuOpacity.slideDown();
+			$('.is_border').slideUp();
+			//$('.is_border #toppic_theme_is_border').attr('checked', false);
+			$(".content_style option[value='kk-boxed']").attr('selected', 'selected');
+		} else if ($(this).val() == 'kk-menu-slide-right') {
+			menuColor.slideDown();
+			contentStyle.slideUp();
+			menuOpacity.slideUp();
+			$('.is_border').slideDown();
+			$(".content_style option[value='kk-full']").attr('selected', 'selected');
+		} else if ($(this).val() == 'kk-menu-fullscreen') {
+			contentStyle.slideDown();
+			menuOpacity.slideDown();
+			$('.is_border').slideUp();
+			menuColor.slideDown();
+		} else if ($(this).val() == 'kk-menu-classic') {
+			menuColor.slideUp();
+			menuOpacity.slideUp();
+		} else {
+			contentStyle.slideDown();
+			menuOpacity.slideUp();
+			menuColor.slideDown();
+			$('.is_border').slideUp();
+		}
+	});
+
+	if (selectors_menu.val() == 'kk-menu-slide-right') {
+		contentStyle.css('display', 'none');
+		menuOpacity.css('display', 'none');
+		menuColor.css('display', 'block');
+		$('.is_border').css('display', 'block');
+	} else if (selectors_menu.val() == 'kk-menu-left-boxed') {
+		contentStyle.css('display', 'none');
+		menuColor.css('display', 'block');
+		$('.is_border').css('display', 'none');
+	} else if (selectors_menu.val() == 'kk-menu-classic') {
+		menuColor.css('display', 'none');
+		menuOpacity.css('display', 'none');
+	} else if (selectors_menu.val() == 'kk-menu-fullscreen') {
+		contentStyle.css('display', 'block');
+		$('.is_border').css('display', 'none');
+		menuColor.css('display', 'block');		
+	} else {
+		contentStyle.css('display', 'block');
+		menuOpacity.css('display', 'none');
+		menuColor.css('display', 'block');
+		$('.is_border').css('display', 'none');
+	}
+
+});
--- a/admin/js/jquery.simpleslider.min.js
+++ b/admin/js/jquery.simpleslider.min.js
--- a/admin/main.php
+++ b/admin/main.php
@@ -0,0 +1,191 @@
+<?php
+get_template_part('/admin/options');
+load_theme_textdomain( 'toppic', get_template_directory() . '/languages' );
+
+global $toppic_theme;
+$toppic_theme = new toppic_theme();
+
+class toppic_theme {
+
+	var $title;
+	var $name;
+	var $turl;
+	var $options;
+
+	function __construct(){
+		$this->title = esc_html__( 'Theme Settings','toppic' );
+		$this->name = get_class( $this );
+		$this->turl = esc_url( get_template_directory_uri() );
+
+		$this->options = $this->get_options();
+		if(!get_option($this->name)) $this->set_default_options();
+
+		add_action( 'admin_menu', array($this, 'action_add_theme_admin'), 1 );
+		add_action( 'wp_ajax_of_ajax_post_action', array($this, 'ajax_callback' ) );
+	}
+
+
+	function action_add_theme_admin(){
+	
+		$page = add_theme_page($this->title, $this->title, "edit_theme_options", $this->name, array($this, "admin_page_main"), 59);
+		add_action("admin_print_styles-$page", array($this, "admin_styles"));
+		
+		foreach($this->options as $slug=>$v) if($slug!="main"){
+			$title=isset($v['title']) ? $v['title'] : $slug;
+			add_theme_page($this->name, $title, $title, "edit_theme_options", $this->name."_".$slug, array($this, "admin_page_".$slug));
+		}
+	}
+	
+	function add_toolbar_items($admin_bar){
+		$admin_bar->add_menu( array(
+			'id'    => $this->name,
+			'parent' => 'site-name',
+			'title' => $this->title,
+			'href'  => esc_url(admin_url('themes.php?page='.$this->name.'')),
+		));
+	}
+	
+	function admin_page_main(){
+		$page='main'; 
+		require_once get_template_directory() . '/admin/interface.php';
+	}
+	
+	function admin_styles(){
+	
+		wp_enqueue_script('jquery-ui-core');
+		wp_enqueue_style('kk-admin-style', $this->turl."/admin/css/style.css");
+		wp_enqueue_style('kk-color-picker', $this->turl."/admin/css/colorpicker.css");
+		wp_enqueue_style('kk-simple-slider', $this->turl."/admin/css/simple-slider.css");		
+		
+		wp_enqueue_script('kk-theme-js', $this->turl.'/admin/js/jquery.admin.js', false, KKFW_VERSION, false);
+		wp_enqueue_script('kk-settings', $this->turl.'/admin/js/jquery.settings.js', false, KKFW_VERSION, false);
+		wp_enqueue_script('kk-jquery-input-mask', $this->turl.'/admin/js/jquery.maskedinput-1.2.2.js', false, KKFW_VERSION, false);
+		wp_enqueue_script('kk-color-picker', $this->turl.'/admin/js/jquery.colorpicker.js', false, KKFW_VERSION, false);
+		wp_enqueue_script('kk-ajaxupload', $this->turl.'/admin/js/jquery.ajaxupload.js', false, KKFW_VERSION, false);
+		wp_enqueue_script('kk-simle-slider', $this->turl.'/admin/js/jquery.simpleslider.min.js', false, KKFW_VERSION, false);
+		
+		$kk_data = array(
+		  'ajaxurl' => admin_url('admin-ajax.php'),
+		);		
+		
+		wp_localize_script( 'kk-theme-js', 'kk_ajax_data', $kk_data );
+		
+	}
+
+
+	function get_options(){
+	
+		$options=theme_options_array();
+
+		foreach($options as $page=>$pdata) if(is_array($pdata))
+		
+		foreach($pdata as $group=>$gdata) if(is_array($gdata))
+		
+		foreach($gdata as $section=>$sdata) if(is_array($sdata))
+		
+		foreach($sdata as $id=>$v) if(is_array($v))
+			
+		$options[$page][$group][$section][$id]['val']=get_option($this->name."_".$id);
+
+		return $options;
+	}
+  
+	function set_default_options(){
+	
+		update_option($this->name, $this->title);
+
+		foreach($this->options as $page=>$pdata) if(is_array($pdata))
+		
+		foreach($pdata as $group=>$gdata) if(is_array($gdata))
+		
+		foreach($gdata as $section=>$sdata) if(is_array($sdata))
+		
+		foreach($sdata as $id=>$v) if(is_array($v)) if (isset($v['std']))
+
+		update_option( $this->name."_".$id, $v['std'] );
+	}
+		
+	function validate_options($opts=null){
+		if(!isset($opts)) $opts=$this->options;
+		return $opts;
+	}
+
+	function ajax_callback() {
+	
+		if( current_user_can( 'edit_theme_options' ) ) {
+			global $wpdb;
+
+			switch($_POST['type']){
+			
+				case 'upload':
+				$clickedID = $_POST['data'];
+				$filename = $_FILES[$clickedID];
+				$filename['name'] = preg_replace('/[^a-zA-Z0-9._\-]/', '', $filename['name']); 
+
+				$override['test_form'] = false;
+				$override['action'] = 'wp_handle_upload';
+				$uploaded_file = wp_handle_upload($filename,$override);
+
+				$upload_tracking[] = $clickedID;
+				update_option($clickedID, $uploaded_file['url']);
+
+				if(!empty($uploaded_file['error'])){			
+					echo 'Upload Error: '.$uploaded_file['error'];				
+				}else{			
+					echo esc_url($uploaded_file['url']);
+				}
+				
+				break;
+
+				case 'image_reset':
+				$wpdb->query("DELETE FROM $wpdb->options WHERE option_name LIKE '".$_POST['data']."'");
+				break;
+
+				case 'reset':
+				$this->set_default_options();
+				break;
+
+				case 'save':
+				foreach(wp_parse_args($_POST['data']) as $id=>$v) update_option($id, $v);
+				break;
+			}			
+		}
+		
+		die();
+	}
+}
+
+function siteoptions_uploader_function( $id, $std, $mod ){
+
+	$upload = get_option( $id );
+
+	if($mod != 'min') { 
+		$val = $std;
+		
+		if(get_option($id) != "") {
+			$val=get_option($id);
+		} ?>
+		
+		<input class="of-input" name="<?php echo esc_attr($id) ?>" id="<?php echo esc_attr($id) ?>_upload" type="text" value="<?php  echo esc_attr($val) ?>" />
+	<?php } ?>
+
+	<div class="upload_button_div"><span class="button image_upload_button" id="<?php echo esc_attr($id) ?>"><?php esc_html_e('Upload Image', 'essu') ?></span>
+
+		<?php if(!empty( $upload )) {
+			$hide = '';
+		} else { 
+			$hide = 'hide';
+		} ?>
+
+		<span class="button image_reset_button <?php echo esc_attr($hide) ?>" id="reset_<?php echo esc_attr($id) ?>" title="<?php echo esc_attr($id) ?>"><?php esc_html_e('Remove', 'essu') ?></span>
+	</div>
+	<div class="clear"></div>
+	
+	<?php if(!empty($upload)){ ?>
+		<a class="of-uploaded-image" href="<?php echo esc_url($upload) ?>">
+			<img class="of-option-image" id="image_<?php echo esc_attr($id)?>" src="<?php echo esc_url($upload) ?>" alt="image" />
+		</a>
+	<?php } ?>
+	
+	<div class="clear"></div>
+<?php }
--- a/admin/options.php
+++ b/admin/options.php
@@ -0,0 +1,490 @@
+<?php
+
+function theme_options_array() {
+
+	$options=array(
+
+	// MAIN PAGE OPTIONS
+	"main" => array( "title" => __( "Theme Settings" , "toppic" ),
+
+	// GENERAL SECTION
+	__( "General" , "toppic" ) => array(
+	array( "options" => array( "title" => __( 'Site Logo ( Dark )' , 'toppic' ), "class" => "section-upload" ),
+		"logo_main" => array( "name" => __('Site Logo ( Dark )', 'toppic' ),
+			"type" => "image",
+			"desc" => __( "This logo will be used if background behind the logo is light. Supported formats: JPG, PNG, GIF" , "toppic" ),
+			"std" => "", 
+		),
+	),
+	array( "options" => array( "title" => __( 'Retina Site Logo ( Dark )' , 'toppic' ), "class" => "section-upload" ),
+		"logo_main_retina" => array( "name" => __('Retina Site Logo ( Dark )', 'toppic' ),
+			"type" => "image",
+			"desc" => __( "Logo for retina displays" , "toppic" ),
+			"std" => "", 
+		),
+	),
+	array( "options" => array( "title" => __( 'Site Logo ( Light )' , 'toppic' ), "class" => "section-upload" ),
+		"logo_main_light" => array( "name" => __('Site Logo ( Light )',"toppic" ),
+			"type" => "image",
+			"desc" => __( "This logo will be used if background behind the logo is dark. Supported formats: JPG, PNG, GIF" , "toppic" ),
+			"std" => "",
+		),
+	),
+	array( "options" => array( "title" => __( 'Retina Site Logo ( Light )' , 'toppic' ), "class" => "section-upload" ),
+		"logo_main_light_retina" => array( "name" => __('Site Logo ( Light )',"toppic" ),
+			"type" => "image",
+			"desc" => __( "Logo for retina displays" , "toppic" ),
+			"std" => "",
+		),
+	),
+	array( "options" => array( "title" => __( 'Admin Logo' , 'toppic' ), "class" => "section-upload" ),
+		"logo_admin" => array( "name" => __( 'Admin Logo', 'toppic' ),
+			"type" => "image",
+			"desc" => __( "Upload a logo (JPG, PNG, GIF) for your Wordpress login screen" , "toppic" ),
+			"std" => "",
+		),
+	),
+	array( "options" => array( "title" => __( 'Site Favicon' , 'toppic' ), "class" => "section-upload" ),
+		"favicon" => array( "name" => __( 'Site Favicon', 'toppic' ),
+			"type" => "image",
+			"desc" => __( "Upload a 16x16px image (ICO, JPG, PNG, GIF) that will your website's favicon" , "toppic" ),
+			"std" => "#",
+		)
+	),
+
+	array( "options" => array( "title" => __( "Content Protection" , "toppic" ) ),
+		"content_protection" => array( "name" => __('Enable Content Protection',"toppic" ),
+			"type" => "onoff",
+			"desc" => __( "Enable/disable right click protection" , "toppic" ),
+			"std" => "false",
+		),
+		"protection_message" => array( "name" => __(' ',"toppic" ),
+			"type" => "textarea",
+			"desc" => __( "This message will be displayed when the user clicks the right button and protection is turned on" , "toppic" ),
+			"std" => "",
+		),
+	),
+	array( "options" => array( "title" => __( "Search button" , "toppic" ) ),
+		"search_button" => array( "name" => __('Enable Search Button',"toppic" ),
+			"type" => "onoff",
+			"desc" => __( "Enable/disable search button" , "toppic" ),
+			"std" => "true",
+		),
+	),
+	array( "options" => array( "title" => __( "Tracking code" , "toppic" ) ),
+		"custom_footer" => array( "name" => __('Footer Custom Code',"toppic" ),
+			"type" => "textarea",
+			"desc" => __( "Paste your Google Analytics or other tracking code here" , "toppic" ),
+			"std" => "",
+		),
+	),
+	array( "options" => array( "title" => __( "Footer copyrights" , "toppic" ) ),
+		"copyrights" => array( "name" => __('Paste your copyrights text here',"toppic" ),
+			"type" => "textarea",
+			"desc" => __( "Paste your copyrights text here. You may use these HTML tags and attributes" , "toppic" ),
+			"std" => "&copy; Toppic theme by <a  target='_blank' href='http://themeforest.net/user/kotofey?ref=kotofey'>kotofey</a>",
+		),
+	),
+	),
+
+	// APPEARANCE
+	__( "Appearance" , "toppic" ) => array(
+	array( "options" => array( "title" => __( "Menu" , "toppic" ) ),
+		"menu_style" => array( "name" => __( "Menu style" , "toppic" ),
+			"type" => "select",
+			"options"  =>  array(
+						"kk-menu-default" => "Default",
+						"kk-menu-classic" => "Classic",
+						"kk-menu-default-hidden" => "Default (hidden)",
+						"kk-menu-left-boxed" => "Left Boxed",
+						"kk-menu-slide-right" => "Creative",
+						"kk-menu-fullscreen" => "Fullscreen"
+			),
+			"desc" => __( "Select menu style" , "toppic" ),
+			"std" => "kk-menu-default",
+		),
+		"menu_color" => array( "name" => __( "Menu color" , "toppic" ),
+			"type" => "color",
+			"desc" => __( "Select menu color. Leave this field blank to use default color" , "toppic" ),
+			"std" => "",
+		),
+		"menu_links_color" => array( "name" => __( "Menu text color" , "toppic" ),
+			"type" => "color",
+			"desc" => __( "Select menu text color. Leave this field blank to use default color" , "toppic" ),
+			"std" => "",
+		),
+		"menu_opacity" => array( "name" => __( 'Menu opacity',"toppic" ),
+			"type" => "rangeslider",
+			"range" => "0,1",
+			"step" => "0.01",
+			"desc" => __( "Set menu opacity. Min - 0, max - 1" , "toppic" ),
+			"std" => "1",
+		),
+	),
+	array( "options" => array( "title" => __( "Content" , "toppic" ) ),
+		"content_style" => array( "name" => __( "Content layout" , "toppic" ),
+			"type" => "select",
+			"options"  =>  array(
+						"kk-boxed" => "Boxed",
+						"kk-full" => "Wide"
+			),
+			"desc" => __( "Select the content area style" , "toppic" ),
+			"std" => "kk-boxed",
+		),
+		"is_border" => array( "name" => __( "Enable Borders" , "toppic" ),
+			"type" => "onoff",
+			"desc" => __( "Enable Borders" , "toppic" ),
+			"std" => "false"
+		),
+		"con_res" => array( "name" => __( "Enable Responsive layout" , "toppic" ),
+			"type" => "onoff",
+			"desc" => __( "Responsive layout" , "toppic" ),
+			"std" => "true"
+		),
+	),
+	array( "options" => array( "title" => __( "Skin settings" , "toppic" ) ),
+		"skin_color" => array( "name" => __( "Color scheme" , "toppic" ),
+			"type" => "select",
+			"options"  =>  array(
+						"light" => "Light",
+						"dark" => "Dark"
+			),
+			"desc" => __( "Select predefined color scheme" , "toppic" ),
+			"std" => "light",
+		),
+		"color_scheme" => array( "name" => __('Select a color to be used as accents color.',"toppic" ),
+			"type" => "color",
+			"desc" => __( "Select a color to be used as accents color." , "toppic" ),
+			"std" => ""
+		),	
+		"color_scheme_links" => array( "name" => __('Select a color for text to be used when the background is highlighted',"toppic" ),
+			"type" => "color",
+			"desc" => __( "Select a color for text to be used when the background is highlighted" , "toppic" ),
+			"std" => "#fff",
+		),
+	),
+	 array( "options" => array( "title" => __( "Animation between pages" , "toppic" ) ),
+		"kk_page_anim" => array( "name" => __('Use animation between pages',"toppic" ),
+			"type" => "onoff",
+			"desc" => __( "Animation between pages" , "toppic" ),
+			"std" => "true"
+		),	
+	),
+	array( "options" => array( "title" => __( "Custom CSS" , "toppic" ) ),
+		"custom_css" => array( "name" => __('Add some CSS to your theme by adding it to this area.',"toppic" ),
+			"type" => "textarea",
+			"desc" => __( "Add some CSS to your theme by adding it to this area." , "toppic" ),
+			"std" => "",
+		),
+	),
+	),
+
+
+	// FULLSCREEN BACKGROUND
+	__('Background Slider',"toppic" ) => array(
+	array( "options" => array( "title" => __( "Slider Type" , "toppic" ) ),
+		"fullscreen_stream" => array( "name" => __('Source images',"toppic" ),
+			"type" => "select",
+			"options" => array(
+				"kk_royal" => "Royal Slider",
+				"ken_b" => "KenB Slider"
+			),
+			"desc" => __( "Select source for background images" , "toppic" ),
+			"std" => "kk_royal",
+		),
+	),
+	array( "options" => array( "title" => __( "Slideshow Settings" , "toppic" ) ),
+		"fullscreen_effect" => array( "name" => __('Slideshow Settings',"toppic" ),
+			"type" => "select",
+			"options" => array(
+				"fade" => "Fade",
+				"move" => "Move"
+			),
+			"desc" => __( "Animation Effect" , "toppic" ),
+			"std" => "fade",
+		),
+		"fullscreen_transition" => array( "name" => __('Transition Speed (ms)',"toppic" ),
+			"type" => "rangeslider",
+			"range" => "100,2000",
+			"step" => "25",
+			"desc" => __( "Transition Speed (ms)" , "toppic" ),
+			"std" => "900",
+		),			
+		"fullscreen_delay" => array( "name" => __('Length between transitions (ms)',"toppic" ),
+		  "type" => "rangeslider",
+		  "range" => "100,10000",
+		  "step" => "100",
+		  "desc" => __( "Length between transitions (ms)" , "toppic" ),
+		  "std" => "4000",
+		),
+	),
+	array( "options" => array( "title" => __( "Slideshow Settings" , "toppic" ) ),
+		"ken_b_transition" => array( "name" => __('Transition Speed (ms)',"toppic" ),
+		  "type" => "rangeslider",
+		  "range" => "100,2000",
+		  "step" => "25",
+		  "desc" => __( "Transition Speed (ms)" , "toppic" ),
+		  "std" => "1000",
+		),			
+		"ken_b_delay" => array( "name" => __('Length between transitions (ms)',"toppic" ),
+		  "type" => "rangeslider",
+		  "range" => "100,20000",
+		  "step" => "100",
+		  "desc" => __( "Length between transitions (ms)" , "toppic" ),
+		  "std" => "5000",
+		),
+		"ken_b_frames" => array( "name" => __('Frames Per Second',"toppic" ),
+		  "type" => "rangeslider",
+		  "range" => "15,60",
+		  "step" => "1",
+		  "desc" => __( "Frames Per Second" , "toppic" ),
+		  "std" => "30",
+		),
+		"ken_b_zoom" => array( "name" => __('Zoom',"toppic" ),
+		  "type" => "rangeslider",
+		  "range" => "1,3",
+		  "step" => "0.1",
+		  "desc" => __( "Zoom (Use a point if you're using decimal numbers (i.e 2<strong>.</strong>5 not 2<strong>,</strong>5) )" , "toppic" ),
+		  "std" => "1.2",
+		),
+	),
+	array( "options" => array( "title" => __( "Other settings" , "toppic" ) ),
+		"fullscreen_start_slide" => array( "name" => __('Randomize Slides',"toppic" ),
+		  "type" => "onoff",
+		  "desc" => __( "Randomizes all slides at start" , "toppic" ),
+		  "std" => "false",
+		),		
+	),
+	),
+
+
+	// 	BACKGROUND IMAGE
+	__( "Background image" , "toppic" ) => array(
+	array( "options" => array( "title" => __( "Default background image" , "toppic" ), "class" => "section-upload" ),
+		"default_background_image" => array( "name" => __('Image',"toppic" ),
+		  "type" => "image",
+		  "desc" => __( "Use this option only if you don't use a slideshow on the site. This image will set up as default background for all pages." , "toppic" ),
+		  "std" => "",
+		),
+	),
+	array( "options" => array( "title" => __( "Default background repeat" , "toppic" ) ),
+		"default_background_repeat" => array( "name" => __('Default background repeat',"toppic" ),
+		  "type" => "select",
+		  "options" => array(
+					"repeat"  =>  "Repeat",
+					"no-repeat"  =>  "No Repeat",
+					"repeat-x"  =>  "Repeat Horizontally",
+					"repeat-y"  =>  "Repeat Vertically"
+					),
+		  "desc" => " ",
+		  "std" => "no-repeat",
+		),
+	),
+	array( "options" => array( "title" => __( "Default background position" , "toppic" ) ),
+		"default_background_position" => array( "name" => __('Default background position',"toppic" ),
+		  "type" => "select",
+		  "options" => array(
+					"top left"  =>  "Top Left",
+					"top center"  =>  "Top Center",
+					"right top"  =>  "Top Right",
+					"center center"  =>  "Center"
+					),
+		  "desc" => " ",			
+		  "std" => "top left",
+		),
+	),
+	array( "options" => array( "title" => __( "Default background size" , "toppic" ) ),
+		"default_background_size" => array( "name" => __('Default background size',"toppic" ),
+		  "type" => "select",
+		  "options" => array(
+					"full"  =>  "Full Screen",
+					"original"  =>  "Original"
+					),
+			"desc" => " ",
+			"std" => "top left",
+			),
+		),
+	),
+
+	// 	BLOG
+	__( "Blog" , "toppic" ) => array(
+	array( "options" => array( "title" => __( "Sidebar position" , "toppic" ) ),
+		"blog_sidebar" => array( "name" => __( "Select the position of the sidebar" , "toppic" ),
+		  "type" => "select",
+		  "options" => array(
+					"right"  =>  "Right position",
+					"left"  =>  "Left position",
+					"full"  =>  "No sidebar"
+					),
+			"desc" => " ",
+			"std" => "right",
+		),
+	),
+	array( "options" => array( "title" => __( "Sidebar position (single post)" , "toppic" ) ),
+		"blog_sidebar_single" => array( "name" => __( "Select the position of the sidebar" , "toppic" ),
+		  "type" => "select",
+		  "options" => array(
+					"right"  =>  "Right position",
+					"left"  =>  "Left position",
+					"full"  =>  "No sidebar"
+					),
+			"desc" => " ",
+			"std" => "right",
+		),
+	),
+	),	
+
+	// 	Full Screen Gallery
+	__( "Full Screen Gallery" , "toppic" ) => array(
+	 array( "options" => array( "title" => __( "Animation Effects" , "toppic" ) ),
+		"gallery_fullscreen_effect" => array( "name" => __('Default Animation Effect',"toppic" ),
+		  "type" => "select",
+		  "options" => array(
+			"fade" => "Fade",
+			"move" => "Move"
+		  ),
+		  "desc" => __( "Default Animation Effect" , "toppic" ),
+		  "std" => "move",
+		),
+		"gallery_fullscreen_transition" => array( "name" => __('Transition Speed (ms)',"toppic" ),
+		  "type" => "rangeslider",
+		  "range" => "100,2000",
+		  "step" => "25",
+		  "desc" => __( "Transition Speed (ms)" , "toppic" ),
+		  "std" => "800",
+		),			
+		"gallery_fullscreen_delay" => array( "name" => __('Length between transitions (ms)',"toppic" ),
+		  "type" => "rangeslider",
+		  "range" => "100,10000",
+		  "step" => "100",
+		  "desc" => __( "Length between transitions (ms)" , "toppic" ),
+		  "std" => "4000",
+		),
+	),
+	array( "options" => array( "title" => __( "Other Settings" , "toppic" ) ),
+		"gallery_fullscreen_autoplay" => array( "name" => __('Autoplay','toppic'),
+		  "type" => "onoff",
+		  "std" => "true",
+		  "desc" => __( "Enable autoplay or not" , "toppic" ),
+		),
+		"gallery_fullscreen_loop" => array( "name" => __('Loop','toppic'),
+		  "type" => "onoff",
+		  "std" => "true",
+		  "desc" => __( "Makes slider to go from last slide to first" , "toppic" ),
+		),
+	),
+	),
+
+// 	BACKGROUND IMAGE
+	__( "404 Error Page" , "toppic" ) => array(
+	array( "options" => array( "title" => __( "Background image" , "toppic" ), "class" => "section-upload" ),
+		"404_image" => array( "name" => __('Image',"toppic" ),
+		  "type" => "image",
+		  "desc" => __( "Background image for 404 page" , "toppic" ),
+		  "std" => "",
+		),
+	),
+	),	
+	 
+	// SOCIAL SECTION
+	__( "Social" , "toppic" ) => array(
+	array( "options" => array( "title" => __( "Facebook" , "toppic" ) ),
+		"social_facebook" => array( "name" => __('Enter the  link to your facebook account or leave this field blank',"toppic" ),
+		  "type" => "text",
+		  "desc" => __( "Enter the  link to your Facebook account or leave this field blank" , "toppic" ),
+		  "std" => "",
+		),
+	),
+	array( "options" => array( "title" => __( "Twitter" , "toppic" ) ),
+		"social_ftwitter" => array( "name" => __('Enter the  link to your twitter account or leave this field blank',"toppic" ),
+		  "type" => "text",
+		  "desc" => __( "Enter the  link to your Twitter account or leave this field blank" , "toppic" ),
+		  "std" => "",
+		),
+	),
+	array( "options" => array( "title" => __( "Google Plus" , "toppic" ) ),
+		"social_google" => array( "name" => __('Enter the  link to your Google plus account or leave this field blank',"toppic" ),
+		  "type" => "text",
+		  "desc" => __( "Enter the  link to your google plus account or leave this field blank" , "toppic" ),
+		  "std" => "",
+		),
+	),
+	array( "options" => array( "title" => __( "Pinterest" , "toppic" ) ),
+		"social_pinterest" => array( "name" => __('Enter the  link to your Pinterest account or leave this field blank',"toppic" ),
+		  "type" => "text",
+		  "desc" => __( "Enter the  link to your Pinterest account or leave this field blank" , "toppic" ),
+		  "std" => "",
+		),
+	),
+	array( "options" => array( "title" => __( "Instagram" , "toppic" ) ),
+		"social_instagram" => array( "name" => __('Enter the  link to your Instagram account or leave this field blank',"toppic" ),
+		  "type" => "text",
+		  "desc" => __( "Enter the  link to your Instagram account or leave this field blank" , "toppic" ),
+		  "std" => "",
+		),
+	),
+	array( "options" => array( "title" => __( "Soundcloud" , "toppic" ) ),
+		"social_soundcloud" => array( "name" => __('Enter the  link to your Soundcloud account or leave this field blank',"toppic" ),
+		  "type" => "text",
+		  "desc" => __( "Enter the  link to your Soundcloud plus account or leave this field blank" , "toppic" ),
+		  "std" => "",
+		),
+	),
+	array( "options" => array( "title" => __( "Youtube" , "toppic" ) ),
+		"social_youtube" => array( "name" => __('Enter the  link to your Youtube account or leave this field blank',"toppic" ),
+		  "type" => "text",
+		  "desc" => __( "Enter the  link to your youtube account or leave this field blank" , "toppic" ),
+		  "std" => "",
+		),
+	),
+	array( "options" => array( "title" => __( "Flickr" , "toppic" ) ),
+		"social_flickr" => array( "name" => __('Enter the  link to your flickr account or leave this field blank',"toppic" ),
+		  "type" => "text",
+		  "desc" => __( "Enter the  link to your Flickr account or leave this field blank" , "toppic" ),
+		  "std" => "",
+		),
+	),
+	array( "options" => array( "title" => __( "Skype" , "toppic" ) ),
+		"social_skype" => array( "name" => __('Enter your Skype name or leave this field blank',"toppic" ),
+		  "type" => "text",
+		  "desc" => __( "Enter your skype name or leave this field blank. I.e: skype:skypename" , "toppic" ),
+		  "std" => "",
+		),
+	),
+	array( "options" => array( "title" => __( "Vimeo" , "toppic" ) ),
+		"social_vimeo" => array( "name" => __('Enter the  link to your Vimeo account or leave this field blank',"toppic" ),
+		  "type" => "text",
+		  "desc" => __( "Enter the  link to your vimeo account or leave this field blank" , "toppic" ),
+		  "std" => "",
+		),
+	),
+
+	array( "options" => array( "title" => __( "Linkedin" , "toppic" ) ),
+		"social_linkedin" => array( "name" => __('Enter the  link to your Linkedin account or leave this field blank',"toppic" ),
+		  "type" => "text",
+		  "desc" => __( "Enter the  link to your linkedin account or leave this field blank" , "toppic" ),
+		  "std" => "",
+		),
+	),
+	array( "options" => array( "title" => __( "Tumblr" , "toppic" ) ),
+		"social_tumblr" => array( "name" => __('Enter the  link to your Tumblr account or leave this field blank',"toppic" ),
+		  "type" => "text",
+		  "desc" => __( "Enter the  link to your Tumblr account or leave this field blank" , "toppic" ),
+		  "std" => "",
+		),
+	),
+	array( "options" => array( "title" => __( "500px" , "toppic" ) ),
+		"social_fivehundredpx" => array( "name" => __('Enter the  link to your 500px account or leave this field blank',"toppic" ),
+		  "type" => "text",
+		  "desc" => __( "Enter the  link to your 500px account or leave this field blank" , "toppic" ),
+		  "std" => "",
+		),
+	),
+	),
+
+	), // END MAIN PAGE
+
+	);
+
+  return $options;
+}