<?php

global 	$skin_name, 
		$data,
		$skin_datas,
		$array_patterns,
		$array_image_repeat,
		$array_image_attachment,
		$array_image_positions,
		$array_text_decorations,
		$array_nav_menu_styles;


$id = $_GET['id'];

if (empty($id)) {

	$the_skin = cloudfw_get_current_skin();
	$mode = $the_skin["mode"];
	
	if ($mode == 'custom')
		$id = $the_skin["id"];	
	
	if (!empty($id))
		$skin_datas = cloudfw_get_a_skin($id);
	
} else {
	
	$skin_datas = cloudfw_get_a_skin($id);
	
}	

	if ($skin_datas):

//	$id = $skin["id"];
	
	$skin_name = $skin_datas["name"];
	$data = $skin_datas["data"];
	
	echo '<input type="hidden" id="skin_id" name="skin_id" value="'.$id.'" />
	<input type="hidden" id="skin_apply" name="skin_apply" value="0" />';

	$array_patterns = cloudfw_grouped_pattern_list();
	
	// Repeatings
	$array_image_repeat[] =  array(
			"item_name"		=> __('Default','cloudfw'),
			"item_value"	=> ''
			);
	
	$array_image_repeat[] =  array(
			"item_name"		=> __('Repeat X and Y','cloudfw'),
			"item_value"	=> 'repeat'
			);
	
	$array_image_repeat[] =  array(
			"item_name"		=> __('Repeat-X','cloudfw'),
			"item_value"	=> 'repeat-x'
			);

	$array_image_repeat[] =  array(
			"item_name"		=> __('Repeat-Y','cloudfw'),
			"item_value"	=> 'repeat-y'
			);
			
	$array_image_repeat[] =  array(
			"item_name"		=> __('No-Repeat','cloudfw'),
			"item_value"	=> 'no-repeat'
			);
	
	// Background -Positions
	$array_image_positions[] =  array(
			"item_name"		=> __('Default','cloudfw'),
			"item_value"	=> ''
			);
	$array_image_positions[] =  array(
			"item_name"		=> __('Center, Center','cloudfw'),
			"item_value"	=> '50% 50%'
			);
	$array_image_positions[] =  array(
			"item_name"		=> __('Center, Left','cloudfw'),
			"item_value"	=> '100% 50%'
			);
	$array_image_positions[] =  array(
			"item_name"		=> __('Center, Right','cloudfw'),
			"item_value"	=> '100% 50%'
			);
	$array_image_positions[] =  array(
			"item_name"		=> __('Top, Left','cloudfw'),
			"item_value"	=> '0 0'
			);
	$array_image_positions[] =  array(
			"item_name"		=> __('Top, Right','cloudfw'),
			"item_value"	=> '100% 0'
			);
	$array_image_positions[] =  array(
			"item_name"		=> __('Top, Center','cloudfw'),
			"item_value"	=> '50% 0'
			);
	$array_image_positions[] =  array(
			"item_name"		=> __('Bottom, Left','cloudfw'),
			"item_value"	=> '0 100%'
			);
	$array_image_positions[] =  array(
			"item_name"		=> __('Bottom, Right','cloudfw'),
			"item_value"	=> '100% 100%'
			);
	$array_image_positions[] =  array(
			"item_name"		=> __('Bottom, Center','cloudfw'),
			"item_value"	=> '50% 100%'
			);
			
	// Text-Decorations
	$array_text_decorations[] =  array(
			"item_name"		=> __('Default','cloudfw'),
			"item_value"	=> ''
			);
	$array_text_decorations[] =  array(
			"item_name"		=> __('None','cloudfw'),
			"item_value"	=> 'none'
			);	
	$array_text_decorations[] =  array(
			"item_name"		=> __('Underline','cloudfw'),
			"item_value"	=> 'underline'
			);	
	$array_text_decorations[] =  array(
			"item_name"		=> __('Overline','cloudfw'),
			"item_value"	=> 'overline'
			);	
	$array_text_decorations[] =  array(
			"item_name"		=> __('Line-Through','cloudfw'),
			"item_value"	=> 'line-through'
			);	

	// Attachment
	$array_image_attachment[] =  array(
			"item_name"		=> __('Default','cloudfw'),
			"item_value"	=> ''
			);

	$array_image_attachment[] =  array(
			"item_name"		=> __('Fixed','cloudfw'),
			"item_value"	=> 'fixed'
			);
				
	$array_image_attachment[] =  array(
			"item_name"		=> __('Scroll','cloudfw'),
			"item_value"	=> 'scroll'
			);
			
	$array_image_attachment[] =  array(
			"item_name"		=> __('Inherit','cloudfw'),
			"item_value"	=> 'inherit'
			);
			
			
	// Navigation Menu Styles
	$array_nav_menu_styles[] =  array(
		"item_name"		=> __('Liquid','cloudfw'),
		"item_value"	=> ''
	);
	
	$array_nav_menu_styles[] =  array(
		"item_name"		=> __('Fixed','cloudfw'),
		"item_value"	=> 'fixed'
	);	

?>
<span style="display: none; height: auto;" id="mb_search_skin">
<div style="padding: 20px 20px 0;">
    
    <div class="grid oneof4" style="padding-top: 10px;"><span class="title"><?php _e('Search Key','cloudfw'); ?>:</span></div>
    <div class="grid threeof4 last">

    <?php
       admin_create_input(
            'search_skin_item',//id
            '',//value
            "input",
            "text",
            "input input_200 bold"
        );
       
    ?><div class="small-button small-sky" style="margin-left: 10px !important;"><input id="search_skin_item_button" type="button" value="<?php _e('Search','cloudfw'); ?>"></div> <div class="clear"></div>
		<div style=" font-size: 12px; color: #b4b4b4; margin-top: 5px; "><?php _e('Please insert element code or element title, and press enter to search','cloudfw'); ?></div>

    </div>
    <div class="clear"></div>   
    
    
    </div>
</span>

<a href="javascript:void(0);" class="right-navigation help" id="skin-search" rel="mb_search_skin" width="m" title="<?php _e('Search Skin Elements','cloudfw'); ?>"><span class="tooltip" title="<?php _e('Search Skin Elements (CTRL/CMD +F)','cloudfw'); ?>"></span></a>

<!--SECTION-->
<div id="section-name" class="section-toggle hiddenSection">

<div class="padding-rl">
<div class="section-title colorTitle" id="the-skin-name">

<span id="skin-name"><?php echo $skin_name; ?></span>

<div id="skin-name-input" class="hidden">
	<?php
       admin_create_input(
            'skin_name',//id
            $skin_name,//value
            "input",
            "text",
            "input input_400_bold"
        );
       
    ?>
</div>

</div>



<span class="wrapExpandSection"><a href="#" id="expand-all" data-collapsetext="<?php _e('Collapse All','cloudfw'); ?>" data-expandtext="<?php _e('Expand All','cloudfw'); ?>"><?php _e('Expand All','cloudfw'); ?></a></span>
</div>

</div>
<!--/SECTION-->

<?php cloudfw_render_page( cloudfw_get_schemes('skin_map') , $GLOBALS["args"] ); ?>

<div class="module">
    <?php if (!empty($id)) echo '<div style="float:left; margin-left: 8px !important;"><a class="small-button small-brown theThisConfirm" href="'.CLOUD_PAGE.'&q=1&deleteSkin=true&id='.$id.'"><span>'.__('Delete','cloudfw').'</span></a>
	
	<a class="small-button small-green" href="'.TMP_ADMIN.'/ajax/backup.php?nonce='.wp_create_nonce('cloudfw').'&amp;case=export-skins&amp;ids='.$id.'"><span>'.__('Export','cloudfw').'</span></a>

	<a class="small-button small-green" href="'.TMP_ADMIN.'/ajax/backup.php?nonce='.wp_create_nonce('cloudfw').'&amp;case=export-skins&amp;zip=true&amp;ids='.$id.'"><span>'.__('Zip & Export','cloudfw').'</span></a>
	
	</div>'; ?>
    <div style="float:right;"> 
    
	<?php 	echo '
			<script type="text/javascript">jQuery(document).ready(function() {
				jQuery("#skin_apply","#add_skin_form").val("0");
				
				jQuery("#save_apply").click(function(){
					
					jQuery("#skin_apply","#add_skin_form").val("1");
					jQuery("#add_skin_form").submit();
				
				});
			});</script>
			<div class="small-button small-sky"><input autocomplete="off" type="button" value="'.__('Save & Apply','cloudfw').'" id="save_apply" /></div> '; ?> 
			<div class="small-button small-sky"><input autocomplete="off" value="<?php _e('Save','cloudfw'); ?>" type="submit" /></div>  
        
    </div>
    <div class="clear"></div>
        
</div>

<script type="text/javascript">
jQuery(document).ready(function() {
	
	jQuery('.pattern-preview').live({
        mouseenter:
           function() {
			jQuery(this).stop(true).animate({width: 100, height: 50 },250);
           },
        mouseleave:
           function(){
			jQuery(this).stop(true).animate({width: 25, height: 25 },150);
           }
       }
    );
	
	jQuery('.microTabIcons').click(function(){
		jQuery(document).trigger('destroyTheFG');
	});	

	
	function disable_edit_name() {
		jQuery('#skin-name').show();
		jQuery('#skin-name-input').hide();
	}
	
	jQuery('#skin-name').click(function(){
		jQuery(this).hide();
		jQuery('#skin-name-input').show().find("input").focus();
	});
	
	jQuery('#skin-name-input').bind('change keydown keyup',function(e){		
		var the_name_val = jQuery(this).find('input').val();
		jQuery('#skin-name').html(the_name_val);
		
		if(e.which == 13 || e.which == 27){
       		disable_edit_name();
			e.preventDefault();
		}
		
		
	});
	
	jQuery('#skin-search').click(function(){
		jQuery('#search_skin_item').val('');
	});
	
	jQuery('#add_skin_form').bind('ajaxCallback', function(){
		jQuery("#skin_apply","#add_skin_form").val("0");
	})
	
	
	if (jQuery.browser.mozilla) {
		jQuery('#search_skin_item').die('keypress');
		jQuery('#search_skin_item').live('keypress',cloudfw_inline_search);
   	} else {
		jQuery('#search_skin_item').die('keydown');
		jQuery('#search_skin_item').live('keydown',cloudfw_inline_search);
   	}
	
		jQuery('#search_skin_item_button').live('click', cloudfw_inline_search_the_key);

		shortcut.remove("Ctrl+F");
		shortcut.add("Ctrl+F",function() {jQuery('#skin-search').click();},{'type':'keydown','propagate':false,'target':document});

	
	
	/*
	 *	Make jQuery Contains extension case insenstive
	 *
	 *	@since 1.0
	**/
	jQuery.expr[':'].Contains = function(a, i, m) { 
	  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
	};
	
	/*
	 *	When Starting Inline Search
	 *
	 *	@since 1.0
	**/	
	function cloudfw_inline_search(e){
		
		if(e.which == 13){
       		cloudfw_inline_search_the_key();
			e.preventDefault();
			return false;
		}
	
		
	} // end of the inline search function
	
	/*
	 *	Seek & Find The Item
	 *
	 *	@since 1.0
	**/
	function cloudfw_inline_search_the_key(){
		
		var search_input = jQuery('#search_skin_item');
		var search_key = search_input.val();

		jQuery("*").dialog( "destroy" );

		jQuery('.search-found').removeClass('search-found');
		jQuery('.section-clicked').removeClass('section-clicked');
		jQuery('#expand-all').addClass('expanded').click();
		jQuery('.delimiter, .delimiter-frame').remove();
		jQuery('.section-counted').removeClass('section-counted');

		if (search_key == '')
			return false;
		
		var the_form = jQuery('#add_skin_form');
		var to_search_elements = the_form.find('.section-content > .module > .grid > label.title');
		var found_elements = to_search_elements.filter(":Contains('"+search_key+"')");

		var to_search_elements_by_ucode = the_form.find('.section-content > .module > .grid > div.ucode');
		var found_elements_by_ucode = to_search_elements_by_ucode.filter(":Contains('"+search_key+"')");
		var found_elements = found_elements.add(found_elements_by_ucode);
		
		var i = 0;
		
		if (found_elements.length > 0) {

			found_elements.each(function(){
				
				
				jQuery(this).parents('.module').addClass('search-found').prepend('<span class="delimiter-frame"></span><span class="delimiter"></span>');
				
				var toClickElement = jQuery(this).parents('.section-toggle').first().find('.section-run');
				if( ! toClickElement.hasClass('section-clicked') ) {
					toClickElement.addClass('section-clicked').click();
				}
				
				if( ! jQuery(this).parents('.module').hasClass('section-counted') ) {
					jQuery(this).parents('.module').addClass('section-counted');
					i++;
				}
				

					
					
			});

			jQuery.scrollTo( found_elements.first(), {duration: 500, offset:{top:-20 } } );
			fw_dialog(i + ' elements found with <strong>'+search_key+'</strong> key','add');
			
			
		} else 
			fw_dialog('No elements found','cancel');
		
	} 
	

	
});

</script>



<?php	
	else:
	
	echo '<div class="module"><div style="padding:0" class="thereisno">'.__('Default skins only can be modified via css files. <br/> But no problem, you can create your own custom color skin with CloudFw Skin Engine','cloudfw').'  <br/> <br/> <a class="small-button small-green help" rel="mb_create_skin" width="m" title="'.__('Create New One','cloudfw').'" href="#" style="margin-left:20px !important;"><span>'.__('Create New One','cloudfw').'</span></a></div></div>';

	endif;
?>