<?php 
	
	$tab = $_GET['tab'];
	$this_page = CLOUD_PAGE;
	if ($tab) $this_page .= '&tab='.$tab ;
	
	// Call Theme Options
	global $_opt;
?>
            
<div id="framework">

     <?php 
		
		$header_title = __('typography settings','cloudfw');
		$sector_id = '_font_settings';
		$header_subnavigation = '
		<ul>
			<li class="firsttab"><a href="#customize">'.__('customize','cloudfw').'</a></li>
			<li class="lasttab"><a href="#load_fonts">'.__('install/uninstall fonts','cloudfw').'</a></li>
	   </ul>
        <div class="clear"></div>';
		$onloadscript = 'jQuery(".tabs").tabs({ cookie: { expires: 60, name: "CloudFW_PG_'.$sector_id.'" }});';
	
		require (TMP_ADMIN_PATH.'/inc/cloud_header.php'); 
		general_page_operations($tab);
		
		$array_fonts = cloudfw_grouped_font_list();
		
	?>

<!-- FONTS -->

    
<form method="post" class="ajax_form" action="<?php echo $this_page?>">

<input type="hidden" id="comeback" name="comeback" value="<?php echo $this_page?>" />
<input type="hidden" id="form_selector" name="form_selector" value="<?php echo PFIX.$sector_id; ?>_customize" />

<div id="customize">


<!--CONTAINER-->
<div class="framework_container">

    <div class="header"></div>
    
    <div class="content">
        
        <div class="head">
        
            <div class="area">1</div>  <h1><?php _e('General','cloudfw'); ?></h1>
        
        </div>
        
<!--ROW-->
<div class="module">

    <div class="grid oneof4"><span class="title"><?php _e('Body','cloudfw'); ?>:</span></div>
    <div class="grid threeof4 last">
         
         <div class="sub-title"><?php _e('Font-Family','cloudfw'); ?>:</div>
            <?php
			
			admin_create_gf_menu (array(
				'id'		=> PFIX.'_body_font_family',
				'value'		=> $_opt[PFIX."_font_engine"]["body"]["font-family"],
				'content'	=> $array_fonts,
				'toggle'	=> TRUE
				)
			);
			
			?>   
        <div class="clear"></div>
        <div class="sub-title mtop"><?php _e('Font-Size','cloudfw'); ?>:</div>
         <?php 
		 	 $item_id = '_body_font_size';
			 $item_variable = $_opt[PFIX."_font_engine"]["body"]["font-size"];
			 
             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 10, // min value
                 60, // max value
                 1, //step
                 NULL, //range
                 'jQuery("#amount'.$item_id.'").html(ui.value);', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_variable.'</span></strong> px</div>', // preview function
                 NULL, // orientation
                 'input_440' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
   		
                     
        <div class="clear"></div>
    </div>
    	
<div class="clear"></div>
</div>
<!--/ROW-->

<div class="divider"></div>
<!--ROW-->
<div class="module">

    <div class="grid oneof4"><span class="title"><?php _e('Content','cloudfw'); ?>:</span></div>
    <div class="grid threeof4 last">
         
         <div class="sub-title"><?php _e('Font-Family','cloudfw'); ?>:</div>
            <?php
			
			admin_create_gf_menu (array(
				'id'		=> PFIX.'_content_font_family',
				'value'		=> $_opt[PFIX."_font_engine"][".content"]["font-family"],
				'content'	=> $array_fonts,
				'toggle'	=> TRUE
				)
			);
			
			?>   
        <div class="clear"></div>
        
        <div class="grid oneof2">
        
        <div class="sub-title mtop"><?php _e('Font-Size','cloudfw'); ?>:</div>
         <?php 
		 	 $item_id = '_content_font_size';
			 $item_variable = $_opt[PFIX."_font_engine"][".content"]["font-size"];
			 
             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 10, // min value
                 60, // max value
                 1, //step
                 NULL, //range
                 'jQuery("#amount'.$item_id.'").html(ui.value);', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_variable.'</span></strong> px</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
        </div>
        <div class="grid oneof2 last">
        
         <div class="sub-title mtop"><?php _e('Line-Height','cloudfw'); ?>:</div>
         <?php 
			 $item_id = '_content_line_height';
			 $item_variable = $_opt[PFIX."_font_engine"][".content"]["line-height//em"];
			 if (!$item_variable) {$item_variable = 0; $item_def_variable = "(".__('Default','cloudfw').")";} else {$item_def_variable = $item_variable;}

             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 0, // min value
                 3, // max value
                 0.1, //step
                 NULL, //range
                 'if (ui.value > 0) jQuery("#amount'.$item_id.'").html(ui.value); else {jQuery("#amount'.$item_id.'").html("('.__('Default','cloudfw').')"); jQuery("#'.PFIX.$item_id.'").val("")}', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_def_variable.'</span></strong> em</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
            
        </div>
   		
                     
        <div class="clear"></div>
    </div>
    	
<div class="clear"></div>
</div>
<!--/ROW-->

<div class="divider"></div>

       <?php admin_submit(__('Save Changes','cloudfw'),'inline');?>
       
    </div>

</div>              
<!--/CONTAINER-->


<!--CONTAINER-->
<div class="framework_container">

    <div class="header"></div>
    
    <div class="content">
        
        <div class="head">
        
            <a class="show-all-option showAllOption" href="#"><?php _e('Show All Options','cloudfw'); ?></a> <div class="area">2</div> <h1><?php _e('Headings','cloudfw'); ?></h1>
        
        </div>

<!--ROW-->
<div class="module">

    <div class="grid oneof4"><span class="title"><?php _e('Font-Family','cloudfw'); ?>:</span></div>
    <div class="grid threeof4 last">
    
            <?php
			
			admin_create_gf_menu (array(
				'id'		=> PFIX.'_headings_font_family',
				'value'		=> $_opt[PFIX."_font_engine"]["h1,h2,h3,h4,h5,h6"]["font-family"],
				'content'	=> $array_fonts,
				'toggle'	=> TRUE
				)
			);
			
			?>   
                     
        <div class="clear"></div>
    </div>
    	
<div class="clear"></div>
</div>
<!--/ROW-->

<div class="divider"></div>

<!--ROW-->
<div class="module">

    <div class="grid oneof4"><span class="title"><?php _e('H1','cloudfw'); ?>:</span></div>
    <div class="grid threeof4 last">
            
        <div class="sub-title"><?php _e('Font-Size','cloudfw'); ?>:</div>
         <?php 
		 	 $item_id = '_h1_font_size';
			 $item_variable = $_opt[PFIX."_font_engine"]["h1"]["font-size"];
			 
             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 10, // min value
                 60, // max value
                 1, //step
                 NULL, //range
                 'jQuery("#amount'.$item_id.'").html(ui.value);', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_variable.'</span></strong> px</div>', // preview function
                 NULL, // orientation
                 'input_440' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
   		 <div class="clear"></div>
         
    <div class="grid oneof2">
    
         <div class="sub-title"><?php _e('Line-Height','cloudfw'); ?>:</div>
         <?php			
			
			 $item_id = '_h1_line_height';
			 $item_variable = $_opt[PFIX."_font_engine"]["h1"]["line-height//em"];
			 if (!$item_variable) {$item_variable = 0; $item_def_variable = "(".__('Default','cloudfw').")";} else {$item_def_variable = $item_variable;}

             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 0, // min value
                 3, // max value
                 0.1, //step
                 NULL, //range
                 'if (ui.value > 0) jQuery("#amount'.$item_id.'").html(ui.value); else {jQuery("#amount'.$item_id.'").html("('.__('Default','cloudfw').')"); jQuery("#'.PFIX.$item_id.'").val("")}', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_def_variable.'</span></strong> em</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
    
    </div>
    <div class="grid oneof2 last">
         <div class="sub-title"><?php _e('Letter-Spacing','cloudfw'); ?>:</div>
         <?php			
			
			 $item_id = '_h1_letter_spacing';
			 $item_variable = $_opt[PFIX."_font_engine"]["h1"]["letter-spacing//em"];
			 if (empty($item_variable)) {$item_variable = 0; $item_def_variable = $item_variable;} else {$item_def_variable = $item_variable;}

             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 -1.01, // min value
                 1, // max value
                 0.01, //step
                 NULL, //range
                 'if (ui.value > -1) jQuery("#amount'.$item_id.'").html(ui.value); else {jQuery("#amount'.$item_id.'").html("('.__('Default','cloudfw').')"); jQuery("#'.PFIX.$item_id.'").val("")}', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_def_variable.'</span></strong> em</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
    </div>

            
            <div class="clear"></div>
            
            
    </div>
    	
<div class="clear"></div>
</div>
<!--/ROW-->
<!--hidden-content-->
<div class="hidden hidden-content">

<div class="divider"></div>
<!--ROW-->
<div class="module">

    <div class="grid oneof4"><span class="title"><?php _e('H2','cloudfw'); ?>:</span></div>
    <div class="grid threeof4 last">
            
        <div class="sub-title"><?php _e('Font-Size','cloudfw'); ?>:</div>
         <?php 
		 	 $item_id = '_h2_font_size';
			 $item_variable = $_opt[PFIX."_font_engine"]["h2"]["font-size"];
			 
             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 10, // min value
                 60, // max value
                 1, //step
                 NULL, //range
                 'jQuery("#amount'.$item_id.'").html(ui.value);', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_variable.'</span></strong> px</div>', // preview function
                 NULL, // orientation
                 'input_440' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
   		 <div class="clear"></div>
         
    <div class="grid oneof2">
    
         <div class="sub-title"><?php _e('Line-Height','cloudfw'); ?>:</div>
         <?php			
			
			 $item_id = '_h2_line_height';
			 $item_variable = $_opt[PFIX."_font_engine"]["h2"]["line-height//em"];
			 if (!$item_variable) {$item_variable = 0; $item_def_variable = "(".__('Default','cloudfw').")";} else {$item_def_variable = $item_variable;}

             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 0, // min value
                 3, // max value
                 0.1, //step
                 NULL, //range
                 'if (ui.value > 0) jQuery("#amount'.$item_id.'").html(ui.value); else {jQuery("#amount'.$item_id.'").html("('.__('Default','cloudfw').')"); jQuery("#'.PFIX.$item_id.'").val("")}', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_def_variable.'</span></strong> em</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
    
    </div>
    <div class="grid oneof2 last">
         <div class="sub-title"><?php _e('Letter-Spacing','cloudfw'); ?>:</div>
         <?php			
			
			 $item_id = '_h2_letter_spacing';
			 $item_variable = $_opt[PFIX."_font_engine"]["h2"]["letter-spacing//em"];
			 if (empty($item_variable)) {$item_variable = 0; $item_def_variable = $item_variable;} else {$item_def_variable = $item_variable;}

             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 -1.01, // min value
                 1, // max value
                 0.01, //step
                 NULL, //range
                 'if (ui.value > -1) jQuery("#amount'.$item_id.'").html(ui.value); else {jQuery("#amount'.$item_id.'").html("('.__('Default','cloudfw').')"); jQuery("#'.PFIX.$item_id.'").val("")}', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_def_variable.'</span></strong> em</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
    </div>

            
            <div class="clear"></div>
            
            
    </div>
    	
<div class="clear"></div>
</div>
<!--/ROW-->
<div class="divider"></div>
<!--ROW-->
<div class="module">

    <div class="grid oneof4"><span class="title"><?php _e('H3','cloudfw'); ?>:</span></div>
    <div class="grid threeof4 last">
            
        <div class="sub-title"><?php _e('Font-Size','cloudfw'); ?>:</div>
         <?php 
		 	 $item_id = '_h3_font_size';
			 $item_variable = $_opt[PFIX."_font_engine"]["h3"]["font-size"];
			 
             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 10, // min value
                 60, // max value
                 1, //step
                 NULL, //range
                 'jQuery("#amount'.$item_id.'").html(ui.value);', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_variable.'</span></strong> px</div>', // preview function
                 NULL, // orientation
                 'input_440' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
   		 <div class="clear"></div>
         
    <div class="grid oneof2">
    
         <div class="sub-title"><?php _e('Line-Height','cloudfw'); ?>:</div>
         <?php			
			
			 $item_id = '_h3_line_height';
			 $item_variable = $_opt[PFIX."_font_engine"]["h3"]["line-height//em"];
			 if (!$item_variable) {$item_variable = 0; $item_def_variable = "(".__('Default','cloudfw').")";} else {$item_def_variable = $item_variable;}

             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 0, // min value
                 3, // max value
                 0.1, //step
                 NULL, //range
                 'if (ui.value > 0) jQuery("#amount'.$item_id.'").html(ui.value); else {jQuery("#amount'.$item_id.'").html("('.__('Default','cloudfw').')"); jQuery("#'.PFIX.$item_id.'").val("")}', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_def_variable.'</span></strong> em</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
    
    </div>
    <div class="grid oneof2 last">
         <div class="sub-title"><?php _e('Letter-Spacing','cloudfw'); ?>:</div>
         <?php			
			
			 $item_id = '_h3_letter_spacing';
			 $item_variable = $_opt[PFIX."_font_engine"]["h3"]["letter-spacing//em"];
			 if (empty($item_variable)) {$item_variable = 0; $item_def_variable = $item_variable;} else {$item_def_variable = $item_variable;}

             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 -1.01, // min value
                 1, // max value
                 0.01, //step
                 NULL, //range
                 'if (ui.value > -1) jQuery("#amount'.$item_id.'").html(ui.value); else {jQuery("#amount'.$item_id.'").html("('.__('Default','cloudfw').')"); jQuery("#'.PFIX.$item_id.'").val("")}', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_def_variable.'</span></strong> em</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
    </div>

            
            <div class="clear"></div>
            
            
    </div>
    	
<div class="clear"></div>
</div>
<!--/ROW-->
<div class="divider"></div>
<!--ROW-->
<div class="module">

    <div class="grid oneof4"><span class="title"><?php _e('H4','cloudfw'); ?>:</span></div>
    <div class="grid threeof4 last">
            
        <div class="sub-title"><?php _e('Font-Size','cloudfw'); ?>:</div>
         <?php 
		 	 $item_id = '_h4_font_size';
			 $item_variable = $_opt[PFIX."_font_engine"]["h4"]["font-size"];
			 
             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 10, // min value
                 60, // max value
                 1, //step
                 NULL, //range
                 'jQuery("#amount'.$item_id.'").html(ui.value);', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_variable.'</span></strong> px</div>', // preview function
                 NULL, // orientation
                 'input_440' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
   		 <div class="clear"></div>
         
    <div class="grid oneof2">
    
         <div class="sub-title"><?php _e('Line-Height','cloudfw'); ?>:</div>
         <?php			
			
			 $item_id = '_h4_line_height';
			 $item_variable = $_opt[PFIX."_font_engine"]["h4"]["line-height//em"];
			 if (!$item_variable) {$item_variable = 0; $item_def_variable = "(".__('Default','cloudfw').")";} else {$item_def_variable = $item_variable;}

             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 0, // min value
                 3, // max value
                 0.1, //step
                 NULL, //range
                 'if (ui.value > 0) jQuery("#amount'.$item_id.'").html(ui.value); else {jQuery("#amount'.$item_id.'").html("('.__('Default','cloudfw').')"); jQuery("#'.PFIX.$item_id.'").val("")}', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_def_variable.'</span></strong> em</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
    
    </div>
    <div class="grid oneof2 last">
         <div class="sub-title"><?php _e('Letter-Spacing','cloudfw'); ?>:</div>
         <?php			
			
			 $item_id = '_h4_letter_spacing';
			 $item_variable = $_opt[PFIX."_font_engine"]["h4"]["letter-spacing//em"];
			 if (empty($item_variable)) {$item_variable = 0; $item_def_variable = $item_variable;} else {$item_def_variable = $item_variable;}

             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 -1.01, // min value
                 1, // max value
                 0.01, //step
                 NULL, //range
                 'if (ui.value > -1) jQuery("#amount'.$item_id.'").html(ui.value); else {jQuery("#amount'.$item_id.'").html("('.__('Default','cloudfw').')"); jQuery("#'.PFIX.$item_id.'").val("")}', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_def_variable.'</span></strong> em</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
    </div>

            
            <div class="clear"></div>
            
            
    </div>
    	
<div class="clear"></div>
</div>
<!--/ROW-->
<div class="divider"></div>
<!--ROW-->
<div class="module">

    <div class="grid oneof4"><span class="title"><?php _e('H5','cloudfw'); ?>:</span></div>
    <div class="grid threeof4 last">
            
        <div class="sub-title"><?php _e('Font-Size','cloudfw'); ?>:</div>
         <?php 
		 	 $item_id = '_h5_font_size';
			 $item_variable = $_opt[PFIX."_font_engine"]["h5"]["font-size"];
			 
             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 10, // min value
                 60, // max value
                 1, //step
                 NULL, //range
                 'jQuery("#amount'.$item_id.'").html(ui.value);', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_variable.'</span></strong> px</div>', // preview function
                 NULL, // orientation
                 'input_440' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
   		 <div class="clear"></div>
         
    <div class="grid oneof2">
    
         <div class="sub-title"><?php _e('Line-Height','cloudfw'); ?>:</div>
         <?php			
			
			 $item_id = '_h5_line_height';
			 $item_variable = $_opt[PFIX."_font_engine"]["h5"]["line-height//em"];
			 if (!$item_variable) {$item_variable = 0; $item_def_variable = "(".__('Default','cloudfw').")";} else {$item_def_variable = $item_variable;}

             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 0, // min value
                 3, // max value
                 0.1, //step
                 NULL, //range
                 'if (ui.value > 0) jQuery("#amount'.$item_id.'").html(ui.value); else {jQuery("#amount'.$item_id.'").html("('.__('Default','cloudfw').')"); jQuery("#'.PFIX.$item_id.'").val("")}', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_def_variable.'</span></strong> em</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
    
    </div>
    <div class="grid oneof2 last">
         <div class="sub-title"><?php _e('Letter-Spacing','cloudfw'); ?>:</div>
         <?php			
			
			 $item_id = '_h5_letter_spacing';
			 $item_variable = $_opt[PFIX."_font_engine"]["h5"]["letter-spacing//em"];
			 if (empty($item_variable)) {$item_variable = 0; $item_def_variable = $item_variable;} else {$item_def_variable = $item_variable;}

             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 -1.01, // min value
                 1, // max value
                 0.01, //step
                 NULL, //range
                 'if (ui.value > -1) jQuery("#amount'.$item_id.'").html(ui.value); else {jQuery("#amount'.$item_id.'").html("('.__('Default','cloudfw').')"); jQuery("#'.PFIX.$item_id.'").val("")}', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_def_variable.'</span></strong> em</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
    </div>

            
            <div class="clear"></div>
            
            
    </div>
    	
<div class="clear"></div>
</div>
<!--/ROW-->

<div class="divider"></div>
<!--ROW-->
<div class="module">

    <div class="grid oneof4"><span class="title"><?php _e('H6','cloudfw'); ?>:</span></div>
    <div class="grid threeof4 last">
            
        <div class="sub-title"><?php _e('Font-Size','cloudfw'); ?>:</div>
         <?php 
		 	 $item_id = '_h6_font_size';
			 $item_variable = $_opt[PFIX."_font_engine"]["h6"]["font-size"];
			 
             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 10, // min value
                 60, // max value
                 1, //step
                 NULL, //range
                 'jQuery("#amount'.$item_id.'").html(ui.value);', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_variable.'</span></strong> px</div>', // preview function
                 NULL, // orientation
                 'input_440' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
   		 <div class="clear"></div>
         
    <div class="grid oneof2">
    
         <div class="sub-title"><?php _e('Line-Height','cloudfw'); ?>:</div>
         <?php			
			
			 $item_id = '_h6_line_height';
			 $item_variable = $_opt[PFIX."_font_engine"]["h6"]["line-height//em"];
			 if (!$item_variable) {$item_variable = 0; $item_def_variable = "(".__('Default','cloudfw').")";} else {$item_def_variable = $item_variable;}

             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 0, // min value
                 3, // max value
                 0.1, //step
                 NULL, //range
                 'if (ui.value > 0) jQuery("#amount'.$item_id.'").html(ui.value); else {jQuery("#amount'.$item_id.'").html("('.__('Default','cloudfw').')"); jQuery("#'.PFIX.$item_id.'").val("")}', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_def_variable.'</span></strong> em</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
    
    </div>
    <div class="grid oneof2 last">
         <div class="sub-title"><?php _e('Letter-Spacing','cloudfw'); ?>:</div>
         <?php			
			
			 $item_id = '_h6_letter_spacing';
			 $item_variable = $_opt[PFIX."_font_engine"]["h6"]["letter-spacing//em"];
			 if (empty($item_variable)) {$item_variable = 0; $item_def_variable = $item_variable;} else {$item_def_variable = $item_variable;}

             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 -1.01, // min value
                 1, // max value
                 0.01, //step
                 NULL, //range
                 'if (ui.value > -1) jQuery("#amount'.$item_id.'").html(ui.value); else {jQuery("#amount'.$item_id.'").html("('.__('Default','cloudfw').')"); jQuery("#'.PFIX.$item_id.'").val("")}', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_def_variable.'</span></strong> em</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
    </div>

            
            <div class="clear"></div>
            
            
    </div>
    	
<div class="clear"></div>
</div>
<!--/ROW-->
</div>
<!--hidden-content-->
<div class="divider"></div>
<div class="show-all-option-expand-wrap">
	<a class="show-all-option-expand showAllOption" title="<?php _e('See All Options','cloudfw'); ?>" href="#"></a>
</div>
       <?php admin_submit(__('Save Changes','cloudfw'),'inline');?>
       
    </div>

</div>              
<!--/CONTAINER-->


<!--CONTAINER-->
<div class="framework_container">

    <div class="header"></div>
    
    <div class="content">
        
        <div class="head">
        
            <div class="area">3</div>  <h1><?php _e('Other','cloudfw'); ?></h1>
        
        </div>

<div class="tabs">   
            <ul>
                <li class="firsttab ui-tabs-selected"><a href="#page-footer"><?php _e('Footer','cloudfw'); ?></a></li>
                <li><a href="#page-sidebar"><?php _e('Sidebar','cloudfw'); ?></a></li>
                <li class="lasttab"><a href="#page-blurb"><?php _e('Blurb Area','cloudfw'); ?></a></li>
            </ul>
 <div class="clear"></div>

<!-- Footer -->
<div id="page-footer">

<!--ROW-->
<div class="module">

    <div class="grid oneof4"><span class="title"><?php _e('Widget Titles','cloudfw'); ?>:</span></div>
    <div class="grid threeof4 last">

         <div class="sub-title"><?php _e('Font-Family','cloudfw'); ?>:</div>
            <?php
			
			admin_create_gf_menu (array(
				'id'		=> PFIX.'_footer_title_font_family',
				'value'		=> $_opt[PFIX."_font_engine"][".footer-widget-title"]["font-family"],
				'content'	=> $array_fonts,
				'toggle'	=> TRUE
				)
			);
			
			?>

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

        
    <div class="grid oneof2">
    
		 <div class="sub-title mtop"><?php _e('Font-Size','cloudfw'); ?>:</div>
         <?php 
		 	 $item_id = '_footer_title_font_size';
			 $item_variable = $_opt[PFIX."_font_engine"][".footer-widget-title"]["font-size"];
			 
             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 10, // min value
                 60, // max value
                 1, //step
                 NULL, //range
                 'jQuery("#amount'.$item_id.'").html(ui.value);', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_variable.'</span></strong> px</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
            );
			
			unset($item_id);
			unset($item_variable);
			?>
    
    </div>
    <div class="grid oneof2 last">
         <div class="sub-title mtop"><?php _e('Letter-Spacing','cloudfw'); ?>:</div>
         <?php			
			
			 $item_id = '_footer_title_letter_spacing';
			 $item_variable = $_opt[PFIX."_font_engine"][".footer-widget-title"]["letter-spacing//em"];
			 if (empty($item_variable)) {$item_variable = 0; $item_def_variable = $item_variable;} else {$item_def_variable = $item_variable;}

             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 -1.01, // min value
                 1, // max value
                 0.01, //step
                 NULL, //range
                 'if (ui.value > -1) jQuery("#amount'.$item_id.'").html(ui.value); else {jQuery("#amount'.$item_id.'").html("('.__('Default','cloudfw').')"); jQuery("#'.PFIX.$item_id.'").val("")}', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_def_variable.'</span></strong> em</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
    </div>
    
    <div class="clear"></div>

</div>
<div class="clear"></div>
</div>
<!--/ROW-->

<div class="divider"></div>

<!--ROW-->
<div class="module">

    <div class="grid oneof4"><span class="title"><?php _e('Widgetized Area','cloudfw'); ?>:</span></div>
    <div class="grid threeof4 last">
         
<div class="grid oneof2">
        
        <div class="sub-title mtop"><?php _e('Font-Size','cloudfw'); ?>:</div>
         <?php 
		 	 $item_id = '_widgetized_font_size';
			 $item_variable = $_opt[PFIX."_font_engine"][".widget, .widget a"]["font-size"];
			 
             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 10, // min value
                 60, // max value
                 1, //step
                 NULL, //range
                 'jQuery("#amount'.$item_id.'").html(ui.value);', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_variable.'</span></strong> px</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
        </div>
        <div class="grid oneof2 last">
        
         <div class="sub-title mtop"><?php _e('Line-Height','cloudfw'); ?>:</div>
         <?php 
			 $item_id = '_widgetized_line_height';
			 $item_variable = $_opt[PFIX."_font_engine"][".widget, .widget a"]["line-height//em"];
			 if (!$item_variable) {$item_variable = 0; $item_def_variable = "(".__('Default','cloudfw').")";} else {$item_def_variable = $item_variable;}

             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 0, // min value
                 3, // max value
                 0.1, //step
                 NULL, //range
                 'if (ui.value > 0) jQuery("#amount'.$item_id.'").html(ui.value); else {jQuery("#amount'.$item_id.'").html("('.__('Default','cloudfw').')"); jQuery("#'.PFIX.$item_id.'").val("")}', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_def_variable.'</span></strong> em</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
            
        </div>
   		
                     
        <div class="clear"></div>
    </div>
    	
<div class="clear"></div>
</div>
<!--/ROW-->

</div>
<!--/Page-Footer-->

<!--Page-Sidebar-->
<div id="page-sidebar">

<!--ROW-->
<div class="module">

    <div class="grid oneof4"><span class="title"><?php _e('Widget Titles','cloudfw'); ?>:</span></div>
    <div class="grid threeof4 last">

         <div class="sub-title"><?php _e('Font-Family','cloudfw'); ?>:</div>
            <?php
			
			admin_create_gf_menu (array(
				'id'		=> PFIX.'_sidebar_title_font_family',
				'value'		=> $_opt[PFIX."_font_engine"][".sidebar-widget-title"]["font-family"],
				'content'	=> $array_fonts,
				'toggle'	=> TRUE
				)
			);
			
			?>

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

        
    <div class="grid oneof2">
    
		 <div class="sub-title mtop"><?php _e('Font-Size','cloudfw'); ?>:</div>
         <?php 
		 	 $item_id = '_sidebar_title_font_size';
			 $item_variable = $_opt[PFIX."_font_engine"][".sidebar-widget-title"]["font-size"];
			 
             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 10, // min value
                 60, // max value
                 1, //step
                 NULL, //range
                 'jQuery("#amount'.$item_id.'").html(ui.value);', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_variable.'</span></strong> px</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
            );
			
			unset($item_id);
			unset($item_variable);
			?>
    
    </div>
    <div class="grid oneof2 last">
         <div class="sub-title mtop"><?php _e('Letter-Spacing','cloudfw'); ?>:</div>
         <?php			
			
			 $item_id = '_sidebar_title_letter_spacing';
			 $item_variable = $_opt[PFIX."_font_engine"][".sidebar-widget-title"]["letter-spacing//em"];
			 if (empty($item_variable)) {$item_variable = 0; $item_def_variable = $item_variable;} else {$item_def_variable = $item_variable;}

             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 -1.01, // min value
                 1, // max value
                 0.01, //step
                 NULL, //range
                 'if (ui.value > -1) jQuery("#amount'.$item_id.'").html(ui.value); else {jQuery("#amount'.$item_id.'").html("('.__('Default','cloudfw').')"); jQuery("#'.PFIX.$item_id.'").val("")}', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_def_variable.'</span></strong> em</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
    </div>
    
    <div class="clear"></div>

</div>
<div class="clear"></div>
</div>
<!--/ROW-->

</div><!--/Page-Sidebar-->





<!--Page-Blurb-->
<div id="page-blurb">

<!--ROW-->
<div class="module">

    <div class="grid oneof4"><span class="title"><?php _e('Titles On Blurb Area','cloudfw'); ?>:</span></div>
    <div class="grid threeof4 last">

         <div class="sub-title"><?php _e('Font-Family','cloudfw'); ?>:</div>
            <?php
			
			admin_create_gf_menu (array(
				'id'		=> PFIX.'_blurb_font_family',
				'value'		=> $_opt[PFIX."_font_engine"]["#blurb h1"]["font-family"],
				'content'	=> $array_fonts,
				'toggle'	=> TRUE
				)
			);
			
			?>

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

        
    <div class="grid oneof2">
    
		 <div class="sub-title mtop"><?php _e('Font-Size','cloudfw'); ?>:</div>
         <?php 
		 	 $item_id = '_blurb_font_size';
			 $item_variable = $_opt[PFIX."_font_engine"]["#blurb h1"]["font-size"];
			 
             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 10, // min value
                 60, // max value
                 1, //step
                 NULL, //range
                 'jQuery("#amount'.$item_id.'").html(ui.value);', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_variable.'</span></strong> px</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
            );
			
			unset($item_id);
			unset($item_variable);
			?>
    
    </div>
    <div class="grid oneof2 last">
         <div class="sub-title mtop"><?php _e('Letter-Spacing','cloudfw'); ?>:</div>
         <?php			
			
			 $item_id = '_blurb_letter_spacing';
			 $item_variable = $_opt[PFIX."_font_engine"]["#blurb h1"]["letter-spacing//em"];
			 if (empty($item_variable)) {$item_variable = 0; $item_def_variable = $item_variable;} else {$item_def_variable = $item_variable;}

             admin_create_slider (
                                             
                 PFIX.$item_id, //id
                 $item_variable, //value
                 -1.01, // min value
                 1, // max value
                 0.01, //step
                 NULL, //range
                 'if (ui.value > -1) jQuery("#amount'.$item_id.'").html(ui.value); else {jQuery("#amount'.$item_id.'").html("('.__('Default','cloudfw').')"); jQuery("#'.PFIX.$item_id.'").val("")}', // slide function
                 '<div class="slider-live-preview"><strong><span id="amount'.$item_id.'">'.$item_def_variable.'</span></strong> em</div>', // preview function
                 NULL, // orientation
                 'input_150' //class
                                             
            );
			
			unset($item_id);
			unset($item_variable);
			?>
    </div>
    
    <div class="clear"></div>

</div>
<div class="clear"></div>
</div>
<!--/ROW-->

</div><!--/Page-Blurb-->





</div><!--/End Of SubTabs-->


<div class="divider"></div>

       <?php admin_submit(__('Save Changes','cloudfw'),'inline');?>
       
    </div>

</div>              
<!--/CONTAINER-->


</div>
</form>

    
<form method="post" action="<?php echo $this_page?>">

<input type="hidden" id="comeback" name="comeback" value="<?php echo $this_page?>" />
<input type="hidden" id="form_selector" name="form_selector" value="<?php echo PFIX.$sector_id; ?>" />

<div id="load_fonts">

<!--CONTAINER-->
<div class="framework_container">

    <div class="header"></div>
    
    <div class="content">
        

        


<!--ROW-->
<div class="module">

	<div class="section-title"><?php _e('Custom Fonts','cloudfw'); ?></div>

    <div class="grid fullpage">

             <?php								
							
			global $custom_fonts, $google_fonts;
			$fonts = $_opt[PFIX.'_fonts'];
			
			asort($custom_fonts);
					
			foreach ((array)$custom_fonts as $font_id => $font) {
					
					$custom_fonts_array[] =  array(
					"item_value"	=> $font_id,
					"item_class"	=> "",
					"item_html" 	=> '<span class="skin-name">'.$font["name"].''.$skin_version_echo.'</span>',
					"item_before" 	=> '<span class="edit_remove_skin_container">',
					"item_after"	=> '<span class="edit_remove_skin"><a class="find tooltip" title="'.__('Preview','cloudfw').'" href="#"><span>'.__('Css','cloudfw').'</span></a></span></span>'
					);
								
			}
			admin_create_selectlist(
					PFIX."_loaded_fonts", // id
					$custom_fonts_array, // items
					NULL, //default_value
					"check",
					$fonts,
					"font_selector"
			);?>

    </div>
    	
<div class="clear"></div>
</div>
<!--/ROW-->


<!--ROW-->
<div class="module">

	<div class="section-title"><?php _e('Google Fonts','cloudfw'); ?></div>


    <div class="grid fullpage">

             <?php								
			
			asort($google_fonts);
			
			foreach ((array)$google_fonts as $font_id) {
					
					$google_fonts_array[] =  array(
					"item_value"	=> $font_id,
					"item_class"	=> "",
					"item_html" 	=> '<span class="skin-name">'.$font_id.'</span>',
					"item_before" 	=> '<span class="edit_remove_skin_container">',
					"item_after"	=> '<span class="edit_remove_skin"><a class="find tooltip preview-font" title="'.__('Preview','cloudfw').'" target="_font_preview" href="http://www.google.com/webfonts/preview#font-family='.$font_id.'" alt="'.$font_id.'"><span>'.__('Css','cloudfw').'</span></a></span></span>'
					);
								
			}
			admin_create_selectlist(
					PFIX."_loaded_fonts", // id
					$google_fonts_array, // items
					NULL, //default_value
					"check",
					$fonts,
					"font_selector"
			);?>

    </div>
    	
<div class="clear"></div>
</div>
<!--/ROW-->


<div class="divider"></div>

       <?php admin_submit(__('Save Changes','cloudfw'),'inline');?>
       
    </div>

</div>              
<!--/CONTAINER-->

</div>


<!--/ END OF FONTS -->

</form>
    

        
</div>

<?php require (TMP_ADMIN_PATH.'/inc/cloud_footer.php');  ?>