<?php
	/* get config from themesetting */    
	$setting = Mage::helper('themeframework/settings');
	$fonts = Mage::getModel('em0122settings/config_font')->toOptionArray();	
	$boxwide = Mage::getModel('themeframework/config_boxwide')->toOptionArray();
	$_fullSlideshow = $setting->getGeneral_WideslideFull();
?>
<div class="visible-sm visible-md visible-lg em-variation">
    <a href="javascript:void(0)" title="<?php echo $this->__('Theme Variants') ?>" class="em-variation-btn">+ open/close</a>
    <div class="em-variation-wrapper hidden row" id="em-variation-demo" style="overflow: inherit;">
		<ul class="em-variation-tabstitle tabs-control">
            <li>
                <a href="#em-variation-store">
                    <span class="em-icon em-icon-store"></span>
                    <span class="text-center"><?php echo $this->__('Storeview') ?></span>
                </a>
            </li>
    		<li>
                <a href="#em-variation-box-wide">
                    <span class="em-icon em-icon-box-wide"></span>
                    <span class="text-center"><?php echo $this->__('Box/Wide') ?></span>
                </a>
            </li>
            <li>
                <a href="#em-variation-background">
                    <span class="em-icon em-icon-background"></span>
                    <span class="text-center"><?php echo $this->__('Background Image (Box)') ?></span>
                </a>
            </li>
            <li>
                <a href="#em-variation-color">
                    <span class="em-icon em-icon-color"></span>
                    <span class="text-center"><?php echo $this->__('Main Color') ?></span>
                </a>
            </li>
            <li>
                <a href="#em-variation-font">
                    <span class="em-icon em-icon-font"></span>
                    <span class="text-center"><?php echo $this->__('Main Font') ?></span>
                </a>
            </li>            
            <li>
                <a href="#em-variation-qrcode">
                    <span class="em-icon em-icon-qrcode"></span>
                    <span class="text-center"><?php echo $this->__('QR Code') ?></span>
                </a>
            </li>
        </ul>
        <div class="em-variation-tabscontent">
            <div id="em-variation-store">
                <?php echo $this->getChildHtml('store_switcher') ?>
            </div>
            <div id="em-variation-box-wide" class="">
                <div class="col-sm-24">
                    <?php $selectedBoxWide = explode(',', $setting->getGeneral_BoxWide()); ?>
                    <?php foreach ($boxwide as $boxwide_item): ?>
                    <div class="col-sm-8">   
						<p class="h5 text-center"><?php echo $boxwide_item['label'] ?><?php echo ' ' ?><?php echo $this->__('Style')?></p>
                        <p><a href="javascript:void(0);" class="em-<?php echo htmlspecialchars($boxwide_item['value']) ?> <?php echo @in_array($boxwide_item['value'], $selectedBoxWide) ? 'selected' : '' ?>"><img alt="<?php echo $boxwide_item['label'] ?><?php echo ' ' ?><?php echo $this->__('Style')?>" class="img-responsive" src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA).'em0122/boxwide/'.htmlspecialchars($boxwide_item['value']).'.jpg'?>" /></a></p>
                    </div>
                    <?php endforeach;?>
                    <div class="col-sm-8">
						<p class="h5 text-center"><?php echo $this->__('Full Slideshow')?></p>
                        <p><a href="javascript:void(0);" class="em-full-slideshow <?php if($_fullSlideshow!=0):?>selected<?php endif;?>"><img alt="<?php echo $this->__('Full Slideshow')?>"  class="img-responsive" src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA).'em0122/boxwide/fullslideshow.jpg'?>" /></a></p>
                    </div>
                </div>
            </div>
            <div id="em-variation-background">                                
            	<?php $imgDir = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA).'em0122/background/'; ?>                
                <div class="em-slider owl-carousel owl-theme" data-emslider-navigation="true" data-emslider-items="4">                                              
            	<?php foreach (Mage::getModel('em0122settings/config_backgroundpattern')->toOptionArray() as $row):?>
                	<?php $img_url = $imgDir . $row['value']; ?>
                    <?php $imgBgUrl = 'media/em0122/background/' . $row['value'];?>
                    <a class="em-page-background <?php echo $setting->getTypo_General_PageBgImage() == $row['value'] ? 'selected' : '' ?>" href="javascript:void(0)" data-em-page-background="<?php echo $imgBgUrl ?>">
                        <img class="img-responsive" src="<?php echo $setting->resizeMediaImage('em0122\background','em0122\background\resized',$row['value'],225,225); ?>" alt="" />
                    </a>
            	<?php endforeach ?>
                </div>
            </div>
            <div id="em-variation-color">
                <div class="row">
					<div class="wrapper-input-color">
						<div class="col-sm-6">                        
							<div class="input em-custom-color"><input type="text" name="customColor01" value="" class="custom-color-01 color-picker input-lg" /></div>
							<p class="h5">Custom Primary Color</p>
						</div>
						<div class="col-sm-6">
							<div class="input em-custom-color"><input type="text" name="customColor02" value="" class="custom-color-02 color-picker input-lg" /></div>
							<p class="h5">Custom Secondary Color</p>
						</div>
						<div class="col-sm-6">
							<div class="input em-custom-color"><input type="text" name="customColor03" value="" class="custom-color-03 color-picker input-lg" /></div>
							<p class="h5">Custom Tertiary Color</p>
						</div>
						<div class="col-sm-6">
							<div class="input em-custom-color"><input type="text" name="customColor04" value="" class="custom-color-04 color-picker input-lg" /></div>
							<p class="h5">Custom Quaternary Color</p>
						</div>
						<p class="pull-left"><?php echo $this->__('COLOR SUGGESTIONS *') ?></p>
					</div>
                </div>
                <div class="clearfix"></div>                
                <div class="row">                
                    <div class="em-slider owl-carousel owl-theme" data-emslider-navigation="true" data-emslider-items="5">
                        <?php $imgDir = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA).'em0122/color/'; ?>
                        <?php foreach (Mage::getModel('em0122settings/config_maincolor')->toOptionArray() as $row):?>
                            <?php $img_url = $imgDir . $row['value']; ?>
                            <a class="em-color" href="javascript:void(0)" data-em-color="<?php echo $row['value'] ?>">
                                <img class="img-responsive" src="<?php echo $img_url.'.png' ?>" alt="" />
                            </a>
                    	<?php endforeach ?>
                    </div>
                </div>
            </div>
            <div id="em-variation-font">                
                <div class="em-slider owl-carousel owl-theme" data-emslider-navigation="true" data-emslider-items="5">                    
                    <?php $imgDir = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA).'em0122/font/'; ?>
                    <?php foreach (Mage::getModel('em0122settings/config_mainfont')->toOptionArray() as $_font): ?>                                                    
                        <?php $img_url = $imgDir . $_font['value']; ?>
                        <a class="em-font-family <?php echo @in_array($_font['value'], $setting->getFonts_GoogleFonts()) ? 'selected' : '' ?>" href="javascript:void(0)" data-em-font-family="<?php echo htmlspecialchars($_font['value']) ?>">
                            <img class="img-responsive" src="<?php echo strtolower(str_replace(' ','',$img_url)).'.png' ?>" alt="" />
                        </a>                                        
                    <?php endforeach;?>
                </div>
            </div>            
            <div id="em-variation-qrcode">
                <div class="em-qrcode">
                	<img class="" src="<?php echo $this->getSkinUrl('images/media/demo/qrcode-demo-em0122.png'); ?>" alt="" title="" />
                </div>
            </div>
        </div>
        <a href="#" title="<?php echo $this->__('Reset') ?>" class="reset-button"><?php echo $this->__('Reset') ?></a>            
        <div class="copyright">
            <?php echo $this->__('This style changes shows only a few options for the background. You may set any color, pattern, image from the Admin Theme Settings.') ?>
            Theme designed by <a href="http://emthemes.com/" title="Premium Magento Themes &amp; Premium Magento Templates" target="_blank">Emthemes.com</a>
        </div>        
    </div>
</div>
<script type="text/javascript">
	//<![CDATA[	    
        (function($) {
            var sTab = $('#em-variation-demo');
            sTab.responsiveTabs({
                activateState: function(e,state){                  
                    if(state.newState == 'tabs' && state.oldState=="accordion")
                    {                     
                        var ulTab = $(this).find("ul.r-tabs-nav");
                        var activeTab = jQuery(this).find("div.r-tabs-state-active");                    
                        if(activeTab.length==0)
                        {
                            $(ulTab).find("li:first-child a").click();
                        }
                    }
                },
            });
            function emVariationPanel() {
                var btnPanel = $('a.em-variation-btn');
                var divPanel = $('#em-variation-demo');
                btnPanel.click(function() {
                    if (!(divPanel.is(':visible'))) {
                        divPanel.removeClass('hidden').addClass('show');
                    } else {
                        divPanel.addClass('hidden').removeClass('show');
                    }
                });
            };
        
            /* Box Wide Mode */
            function emResetBoxWide() {
                var sBox = $('.em-box');
                var sWide = $('.em-wide');
                var sWrapper = $('.wrapper');
                if (EM.SETTING.BOX_WIDE == 'box') {
                    sWide.removeClass('selected');
                    sBox.addClass('selected');
                    sWrapper.addClass('em-box-custom');
                } else {
                    sBox.removeClass('selected');
                    sWide.addClass('selected');
                    sWrapper.removeClass('em-box-custom');
                }
            };
        
            function emBoxWide() {
                var sBox = $('.em-box');
                var sWide = $('.em-wide');
                var sWrapper = $('.wrapper');
                emResetBoxWide();
                sBox.click(function() {
                    if (!($(this).hasClass('selected'))) {
                        sWide.removeClass('selected');
                        $(this).addClass('selected');
                        sWrapper.addClass('em-box-custom');
                    }
                });
                sWide.click(function() {
                    if (!($(this).hasClass('selected'))) {
                        sBox.removeClass('selected');
                        $(this).addClass('selected');
                        sWrapper.removeClass('em-box-custom');
                    }
                });
            };
        
            /* Full Slideshow */
            function emResetFullSlideshow() {
                var $_body = $('body');
                if($_body.hasClass('cms-index-index')){
                    var sSlideshow = $('#em-variation-demo .em-full-slideshow');
                    var sDivSlideshow = $('.em-area-01');
                    var sContainerSlideshow = $('.container-slideshow');
                    var sMenu = $('.top-menu-left');
                    var container = $("#menu-default");
                    if(EM.SETTING.FLUID_LAYOUT==1){
                        if (EM.SETTING.FULL_SLIDESHOW != 0) {
                            if(!sSlideshow.hasClass('selected')){
                                sSlideshow.addClass('selected');
                            }
                            if(!sContainerSlideshow.hasClass('container-fluid')){
                                sContainerSlideshow.removeClass('container').addClass('container-fluid');    
                            }
                            if(!sDivSlideshow.hasClass('em-fluid-slideshow')){
                                sDivSlideshow.addClass('em-fluid-slideshow');    
                            }
                            container.hide();
            				$(".menu-wrapper").hover(
            
            				function() {
            					container.fadeIn(500);
            					$("#menuleftText").toggleClass('hidden-arrow');
            					$("#menuleftText").attr('title', 'hide-option');
            				}, function() {
            					container.fadeOut(100);
            					$("#menuleftText").removeClass('hidden-arrow');
            					$("#menuleftText").attr('title', 'show-option');
            				});
                        } else {
                            if(sSlideshow.hasClass('selected')){
                                sSlideshow.removeClass('selected');
                            }                    
                            sDivSlideshow.removeClass('em-fluid-slideshow');
                            container.show(); 
                            $(".menu-wrapper").unbind('hover mouseenter mouseleave');  
                        }
                    }else{
                        if (EM.SETTING.FULL_SLIDESHOW != 0) {
                            if(!sSlideshow.hasClass('selected')){
                                sSlideshow.addClass('selected');
                            }
                            if(!sContainerSlideshow.hasClass('container-fluid')){
                                sContainerSlideshow.removeClass('container').addClass('container-fluid');    
                            }
                            if(!sDivSlideshow.hasClass('em-fluid-slideshow')){
                                sDivSlideshow.addClass('em-fluid-slideshow');    
                            }
                            
                            container.hide();
            				$(".menu-wrapper").hover(
            
            				function() {
            					container.fadeIn(500);
            					$("#menuleftText").toggleClass('hidden-arrow');
            					$("#menuleftText").attr('title', 'hide-option');
            				}, function() {
            					container.fadeOut(100);
            					$("#menuleftText").removeClass('hidden-arrow');
            					$("#menuleftText").attr('title', 'show-option');
            				});
                        } else {
                            if(sSlideshow.hasClass('selected')){
                                sSlideshow.removeClass('selected');
                            }                    
                            if(!sContainerSlideshow.hasClass('container')){
                                sContainerSlideshow.removeClass('container-fluid').addClass('container');
                            }                    
                            sDivSlideshow.removeClass('em-fluid-slideshow');
                            container.show(); 
                            $(".menu-wrapper").unbind('hover mouseenter mouseleave');  
                        }
                    }
                }
                
            };
        
            function emFullSlideshow() {
                var $_body = $('body');
                if($_body.hasClass('cms-index-index')){
                    var sContainerSlideshow = $('.container-slideshow');
                    if(sContainerSlideshow.length){
                        var sSlideshow = $('#em-variation-demo .em-full-slideshow');
                        var sDivSlideshow = $('.em-area-01');
                        var sMenu = $('.top-menu-left');
                        var container = $("#menu-default");                    
                        emResetFullSlideshow();
                        sSlideshow.click(function() {
                            if(EM.SETTING.FLUID_LAYOUT==1){
                                if (!($(this).hasClass('selected'))) {
                                    $(this).addClass('selected');
                                    sContainerSlideshow.removeClass('container').addClass('container-fluid');
                                    sDivSlideshow.addClass('em-fluid-slideshow');
                                    container.hide();
                    				$(".menu-wrapper").hover(
                    
                    				function() {
                    					container.fadeIn(500);
                    					$("#menuleftText").toggleClass('hidden-arrow');
                    					$("#menuleftText").attr('title', 'hide-option');
                    				}, function() {
                    					container.fadeOut(100);
                    					$("#menuleftText").removeClass('hidden-arrow');
                    					$("#menuleftText").attr('title', 'show-option');
                    				});                            
                                } else {
                                    $(this).removeClass('selected');
                                    sDivSlideshow.removeClass('em-fluid-slideshow');
                                    $("#menuleftText,#menuleftTextHomepage").unbind("click");            				
                    				container.show(); 
                                    $(".menu-wrapper").unbind('hover mouseenter mouseleave');                           
                                }
                            }else{
                                if (!($(this).hasClass('selected'))) {
                                    $(this).addClass('selected');
                                    sContainerSlideshow.removeClass('container').addClass('container-fluid');
                                    sDivSlideshow.addClass('em-fluid-slideshow');
                                    container.hide();
                    				$(".menu-wrapper").hover(
                    
                    				function() {
                    					container.fadeIn(500);
                    					$("#menuleftText").toggleClass('hidden-arrow');
                    					$("#menuleftText").attr('title', 'hide-option');
                    				}, function() {
                    					container.fadeOut(100);
                    					$("#menuleftText").removeClass('hidden-arrow');
                    					$("#menuleftText").attr('title', 'show-option');
                    				});                            
                                } else {
                                    $(this).removeClass('selected');
                                    sContainerSlideshow.removeClass('container-fluid').addClass('container');
                                    sDivSlideshow.removeClass('em-fluid-slideshow');
                                    $("#menuleftText,#menuleftTextHomepage").unbind("click");            				
                    				container.show(); 
                                    $(".menu-wrapper").unbind('hover mouseenter mouseleave');                           
                                }
                            }
                        });
                    }
                }                
            };
        
            var settingsFontBg = {};    
            var settingsColor = {};
            var variables = {};
            changeVariation = function(key, value) {
                var key = key || null;
                var value = value || null;        
                if (key) {
                    if (String(value).indexOf(',') != -1 || String(value).indexOf('.') != -1 || String(value).indexOf('/') != -1 || String(value).indexOf(' ') != -1) 
                        settingsFontBg[key] = '~"' + String(value.replace(/"/g, "'")) + '"';
                    else
                        settingsFontBg[key] = String(value);
                }
                variables = $.extend( {}, settingsColor, settingsFontBg );
				less.modifyVars({ '@font_family': 'Lato' });
                less.modifyVars(variables);
                variables = {};
            };
            /*return default value when input value is null*/
            returnDefault = function(key) {
                if (settingsFontBg[key]) delete(settingsFontBg[key]);
                less.modifyVars(settingsFontBg);
            };
            
            resetCustomColor = function(){
                var $customColor = $('.color-picker');
                if($customColor.length){
                    $customColor.val('');
                    $customColor.css('background-color','');
                }
            };
            
            resetColor = function(){
                var sColor = $('#em-variation-color a.em-color');                
                if(sColor.length){
                    sColor.removeClass('selected');
                }                
                settingsColor = {};      
            };
            
            resetFont = function(){
                var sFont = $('#em-variation-font a.em-font-family');
                if(sFont.length){
                    sFont.removeClass('selected');
                }                                       
            };
            
            resetBackground = function(){
                var sPagePattern = $('#em-variation-background a.em-page-background');
                if(sPagePattern.length){
                    sPagePattern.removeClass('selected');
                }                                    
            };
            /*reset Variation*/
            resetVariation = function() {
                resetCustomColor();
                resetColor();
                resetFont();
                resetBackground();
                settingsFontBg = {}; 
                variables = {};
                less.refresh();
            };
        
            /* Page Background */
            function emPageBackground() {
                var sPagePattern = $('#em-variation-background a.em-page-background');
                sPagePattern.click(function() {
                    sPagePattern.removeClass('selected');
                    $(this).addClass('selected');
                    var vPattern = $(this).data('em-page-background');
                    changeVariation('@page_bg_image', vPattern);
                    //less.modifyVars({'@page_bg_image' : '~"'+vPattern+'"'});
                    return false;
                });
            };
        
            /* Color */
            var emColorStyle04 = {
                customColor01 :{                    
            		header_bg3_color:'#47c0b9',
                    header_text4_color:'#47c0b9',
					header_text2_color:'#47c0b9',
                	topmenu_text_color:'#47c0b9',
            		dropmenu_text2_color:'#47c0b9',
                	body_bg3_color:'#47c0b9',
                    body_text4_color:'#47c0b9',
                	body_line2_color:'#47c0b9',
					footer_line2_color:'#47c0b9',
					btn3_bg_color:'#47c0b9',
					btn3_line_color:'#47c0b9',
                },
                customColor02 :{
                    body_text8_color:'#e98063',
					header_bg2_color:'#e98063',
					topmenu_hover_bg_color:'#e98063',
                },
                customColor03:{
					vnav_text_color:'#2a2b2d',
                    footer_bg_color: '#2a2b2d',
                    btn2_text_color:'#2a2b2d', 
					btn2_line_color:'#2a2b2d',
                    btn4_bg_color: '#2a2b2d',
                    btn4_line_color:'#2a2b2d', 
                },
                customColor04:{
                    footer_bg3_color:'#222423',                	
                },
            };
            var emColorStyle02 = {
				 customColor01 :{                    
            		header_bg3_color:'#4d6f9f',
                    header_text4_color:'#4d6f9f',
					header_text2_color:'#4d6f9f',
                	topmenu_text_color:'#4d6f9f',
            		dropmenu_text2_color:'#4d6f9f',
                	body_bg3_color:'#4d6f9f',
                    body_text4_color:'#4d6f9f',
                	body_line2_color:'#4d6f9f',
					footer_line2_color:'#4d6f9f',
					btn3_bg_color:'#4d6f9f',
					btn3_line_color:'#4d6f9f',
                },
                customColor02 :{
                    body_text8_color:'#f08d4a',
					header_bg2_color:'#f08d4a',
					topmenu_hover_bg_color:'#f08d4a',
                },
                customColor03:{
					vnav_text_color:'#23282e',
                    footer_bg_color: '#23282e',
                    btn2_text_color:'#23282e', 
					btn2_line_color:'#23282e',
                    btn4_bg_color: '#23282e',
                    btn4_line_color:'#23282e', 
                },
                customColor04:{
                    footer_bg3_color:'#1e1f23',                	
                }, 
            };
            var emColorStyle03 = {
                customColor01 :{                    
					header_bg3_color:'#f0ae5a',
					header_text4_color:'#f0ae5a',
					header_text2_color:'#f0ae5a',
					topmenu_text_color:'#f0ae5a',
					dropmenu_text2_color:'#f0ae5a',
					body_bg3_color:'#f0ae5a',
					body_text4_color:'#f0ae5a',
					body_line2_color:'#f0ae5a',
					footer_line2_color:'#f0ae5a',
					btn3_bg_color:'#f0ae5a',
					btn3_line_color:'#f0ae5a',
				},
				customColor02 :{
					body_text8_color:'#322d2a',
					header_bg2_color:'#322d2a',
					topmenu_hover_bg_color:'#322d2a',
				},
				customColor03:{
					vnav_text_color:'#322d2a',
					footer_bg_color: '#322d2a',
					btn2_text_color:'#322d2a', 
					btn2_line_color:'#322d2a',
					btn4_bg_color: '#322d2a',
					btn4_line_color:'#322d2a', 
				},
				customColor04:{
					footer_bg3_color:'#272322',                	
				}, 
            };
            var emColorStyle01 = {
                customColor01 :{                    
            		header_bg3_color:'#b89c86',
                    header_text4_color:'#b89c86',
					header_text2_color:'#b89c86',
                	topmenu_text_color:'#b89c86',
            		dropmenu_text2_color:'#b89c86',
                	body_bg3_color:'#b89c86',
                    body_text4_color:'#b89c86',
                	body_line2_color:'#b89c86',
					footer_line2_color:'#b89c86',
					btn3_bg_color:'#b89c86',
					btn3_line_color:'#b89c86',
                },
                customColor02 :{
                    body_text8_color:'#504c49',
                },
                customColor03:{
                    header_bg2_color:'#504c49',
					vnav_text_color:'#504c49',
                    footer_bg_color: '#504c49',
                    btn2_text_color:'#504c49', 
					btn2_line_color:'#504c49',
                    btn4_bg_color: '#504c49',
                    btn4_line_color:'#504c49', 
                },
                customColor04:{
                    footer_bg3_color:'#2b2b2b',                	
                }, 
            };
            var emColorStyle05 = {
                customColor01 :{                    
            		header_bg3_color:'#6a668b',
                    header_text4_color:'#6a668b',
					header_text2_color:'#6a668b',
                	topmenu_text_color:'#6a668b',
					vnav_text_color:'#6a668b',
            		dropmenu_text2_color:'#6a668b',
                	body_bg3_color:'#6a668b',
                    body_text4_color:'#6a668b',
                	body_line2_color:'#6a668b',
					footer_line2_color:'#6a668b',
					btn3_bg_color:'#6a668b',
					btn3_line_color:'#6a668b',
                },
                customColor02 :{
                    body_text8_color:'#ecd456',
					header_bg2_color:'#ecd456',
					topmenu_hover_bg_color:'#ecd456',
                },
                customColor03:{
                    footer_bg_color: '#2e2d33',
                    btn2_text_color:'#2e2d33', 
					btn2_line_color:'#2e2d33',
                    btn4_bg_color: '#2e2d33',
                    btn4_line_color:'#2e2d33', 
                },
                customColor04:{
                    footer_bg3_color:'#252429',                	
                }, 
            };
            var emColorStyle06 = {
               customColor01 :{                    
            		header_bg3_color:'#ed764e',
                    header_text4_color:'#ed764e',
					header_text2_color:'#ed764e',
                	topmenu_text_color:'#ed764e',
            		dropmenu_text2_color:'#ed764e',
                	body_bg3_color:'#ed764e',
                    body_text4_color:'#ed764e',
                	body_line2_color:'#ed764e',
					footer_line2_color:'#ed764e',
					btn3_bg_color:'#ed764e',
					btn3_line_color:'#ed764e',
                },
                customColor02 :{
                    body_text8_color:'#3d3b48',
					header_bg2_color:'#3d3b48',
					topmenu_hover_bg_color:'#3d3b48',
                },
                customColor03:{
					vnav_text_color:'#3d3b48',
                    footer_bg_color: '#3d3b48',
                    btn2_text_color:'#3d3b48', 
					btn2_line_color:'#3d3b48',
                    btn4_bg_color: '#3d3b48',
                    btn4_line_color:'#3d3b48', 
                },
                customColor04:{
                    footer_bg3_color:'#2d2c32',                	
                }, 
            };
             
            function emColor() {
                var sColor = $('#em-variation-color a.em-color');
                if(sColor.length){
                    sColor.click(function() {
                        resetCustomColor();
                        sColor.removeClass('selected');
                        $(this).addClass('selected');
                        var vPattern = $(this).data('em-color');
                        settingsColor = {};
                        switch (vPattern) {
                            case 'emColorStyle01':
                                settingsColor = $.extend( {}, settingsFontBg, emColorStyle01.customColor01,emColorStyle01.customColor02,emColorStyle01.customColor03,emColorStyle01.customColor04,emColorStyle01.customColor05 );
                                less.modifyVars(settingsColor);
                                break;
                            case 'emColorStyle02':                    
                                settingsColor = $.extend( {}, settingsFontBg, emColorStyle02.customColor01,emColorStyle02.customColor02,emColorStyle02.customColor03,emColorStyle02.customColor04,emColorStyle02.customColor05 );
                                less.modifyVars(settingsColor);
                                break;
                            case 'emColorStyle03':
                                settingsColor = $.extend( {}, settingsFontBg, emColorStyle03.customColor01,emColorStyle03.customColor02,emColorStyle03.customColor03,emColorStyle03.customColor04,emColorStyle03.customColor05 );
                                less.modifyVars(settingsColor);
                                break;
                            case 'emColorStyle04':
                                settingsColor = $.extend( {}, settingsFontBg, emColorStyle04.customColor01,emColorStyle04.customColor02,emColorStyle04.customColor03,emColorStyle04.customColor04,emColorStyle04.customColor05 );
                                less.modifyVars(settingsColor);
                                break;
                            case 'emColorStyle05':
                                settingsColor = $.extend( {}, settingsFontBg, emColorStyle05.customColor01,emColorStyle05.customColor02,emColorStyle05.customColor03,emColorStyle05.customColor04,emColorStyle05.customColor05 );
                                less.modifyVars(settingsColor);
                                break;
                            case 'emColorStyle06':
                                settingsColor = $.extend( {}, settingsFontBg, emColorStyle06.customColor01,emColorStyle06.customColor02,emColorStyle06.customColor03,emColorStyle06.customColor04,emColorStyle06.customColor05 );
                                less.modifyVars(settingsColor);
                                break;
                        }
                        return false;
                    });   
                }
            };
            
            function setColourPicker(){
                function newColor(templess,newlessvalue,style_color){
                    jQuery.each(style_color,function(index,value){
                        templess[index]=newlessvalue;
                    });                  
                };
                function defaultColor(templess,style_color){
                    jQuery.each(style_color,function(index,value){
                        templess[index]=value;
                    });
                };
                var $colorPicker = $('.color-picker'); 
                var $color01 = $('.custom-color-01');
                var $color02 = $('.custom-color-02');
                var $color03 = $('.custom-color-03');
                var $color04 = $('.custom-color-04');              
                var temp = {};
                settingsColor = {};
                $colorPicker.ColorPicker({
            		onChange: $.debounce(300, function(hsb, hex) {      		            
            			var el = this.data('colorpicker').el;
            			$(el).val('#' + hex);
                        $(el).attr('value','#' + hex);
            			$(el).css('backgroundColor', '#' + hex);
                        var $customColor = $(el).attr('name');
                        var $color = $('.em-color.selected');
                        if($color.length){
                            var $selectedColor = $color.data('em-color');
                        }else{
                            var $selectedColor = 'emColorStyle01';
                        }                        
                        //var $value = $(el).val(); 
                        switch($selectedColor){
                            case 'emColorStyle01':
                                if($customColor=='customColor01' || $color01.val()!=''){newColor(temp,$color01.val(),emColorStyle01.customColor01);}else{defaultColor(temp,emColorStyle01.customColor01);}                               
                                if($customColor=='customColor02' || $color02.val()!=''){newColor(temp,$color02.val(),emColorStyle01.customColor02);}else{defaultColor(temp,emColorStyle01.customColor02);}
                                if($customColor=='customColor03' || $color03.val()!=''){newColor(temp,$color03.val(),emColorStyle01.customColor03);}else{defaultColor(temp,emColorStyle01.customColor03);}
                                if($customColor=='customColor04' || $color04.val()!=''){newColor(temp,$color04.val(),emColorStyle01.customColor04);}else{defaultColor(temp,emColorStyle01.customColor04);}
                                //console.log(temp);
                                settingsColor = $.extend( {}, settingsFontBg,temp,emColorStyle01.customColor05 );
                                less.modifyVars(settingsColor);
                                break;
                            case 'emColorStyle02':
                                if($customColor=='customColor01' || $color01.val()!=''){newColor(temp,$color01.val(),emColorStyle02.customColor01);}else{defaultColor(temp,emColorStyle02.customColor01);}                               
                                if($customColor=='customColor02' || $color02.val()!=''){newColor(temp,$color02.val(),emColorStyle02.customColor02);}else{defaultColor(temp,emColorStyle02.customColor02);}
                                if($customColor=='customColor03' || $color03.val()!=''){newColor(temp,$color03.val(),emColorStyle02.customColor03);}else{defaultColor(temp,emColorStyle02.customColor03);}
                                if($customColor=='customColor04' || $color04.val()!=''){newColor(temp,$color04.val(),emColorStyle02.customColor04);}else{defaultColor(temp,emColorStyle02.customColor04);}
                                settingsColor = $.extend( {}, settingsFontBg,temp,emColorStyle02.customColor05 );
                                less.modifyVars(settingsColor);
                                break;
                            case 'emColorStyle03':
                                if($customColor=='customColor01' || $color01.val()!=''){newColor(temp,$color01.val(),emColorStyle03.customColor01);}else{defaultColor(temp,emColorStyle03.customColor01);}                               
                                if($customColor=='customColor02' || $color02.val()!=''){newColor(temp,$color02.val(),emColorStyle03.customColor02);}else{defaultColor(temp,emColorStyle03.customColor02);}
                                if($customColor=='customColor03' || $color03.val()!=''){newColor(temp,$color03.val(),emColorStyle03.customColor03);}else{defaultColor(temp,emColorStyle03.customColor03);}
                                if($customColor=='customColor04' || $color04.val()!=''){newColor(temp,$color04.val(),emColorStyle03.customColor04);}else{defaultColor(temp,emColorStyle03.customColor04);}
                                settingsColor = $.extend( {}, settingsFontBg,temp,emColorStyle03.customColor05 );
                                less.modifyVars(settingsColor);
                                break;
                            case 'emColorStyle04':
                                if($customColor=='customColor01' || $color01.val()!=''){newColor(temp,$color01.val(),emColorStyle04.customColor01);}else{defaultColor(temp,emColorStyle04.customColor01);}                               
                                if($customColor=='customColor02' || $color02.val()!=''){newColor(temp,$color02.val(),emColorStyle04.customColor02);}else{defaultColor(temp,emColorStyle04.customColor02);}
                                if($customColor=='customColor03' || $color03.val()!=''){newColor(temp,$color03.val(),emColorStyle04.customColor03);}else{defaultColor(temp,emColorStyle04.customColor03);}
                                if($customColor=='customColor04' || $color04.val()!=''){newColor(temp,$color04.val(),emColorStyle04.customColor04);}else{defaultColor(temp,emColorStyle04.customColor04);}
                                settingsColor = $.extend( {}, settingsFontBg,temp,emColorStyle04.customColor05 );
                                less.modifyVars(settingsColor);
                                break;
                            case 'emColorStyle05':
                                if($customColor=='customColor01' || $color01.val()!=''){newColor(temp,$color01.val(),emColorStyle05.customColor01);}else{defaultColor(temp,emColorStyle05.customColor01);}                               
                                if($customColor=='customColor02' || $color02.val()!=''){newColor(temp,$color02.val(),emColorStyle05.customColor02);}else{defaultColor(temp,emColorStyle05.customColor02);}
                                if($customColor=='customColor03' || $color03.val()!=''){newColor(temp,$color03.val(),emColorStyle05.customColor03);}else{defaultColor(temp,emColorStyle05.customColor03);}
                                if($customColor=='customColor04' || $color04.val()!=''){newColor(temp,$color04.val(),emColorStyle05.customColor04);}else{defaultColor(temp,emColorStyle05.customColor04);}
                                settingsColor = $.extend( {}, settingsFontBg,temp,emColorStyle05.customColor05 );
                                less.modifyVars(settingsColor);
                                break;
                            case 'emColorStyle06':
                                if($customColor=='customColor01' || $color01.val()!=''){newColor(temp,$color01.val(),emColorStyle06.customColor01);}else{defaultColor(temp,emColorStyle06.customColor01);}                               
                                if($customColor=='customColor02' || $color02.val()!=''){newColor(temp,$color02.val(),emColorStyle06.customColor02);}else{defaultColor(temp,emColorStyle06.customColor02);}
                                if($customColor=='customColor03' || $color03.val()!=''){newColor(temp,$color03.val(),emColorStyle06.customColor03);}else{defaultColor(temp,emColorStyle06.customColor03);}
                                if($customColor=='customColor04' || $color04.val()!=''){newColor(temp,$color04.val(),emColorStyle06.customColor04);}else{defaultColor(temp,emColorStyle06.customColor04);}
                                settingsColor = $.extend( {}, settingsFontBg,temp,emColorStyle06.customColor05 );
                                less.modifyVars(settingsColor);
                                break;
                        }        			
            		}),
            		onBeforeShow: function() {
            			$(this).ColorPickerSetColor(this.value);
            		}
            	}).bind('keyup', $.debounce(300, function() {
            	    $(this).ColorPickerSetColor(this.value);
            		if ($(this).val() == '') {
            			$(this).attr('value','');
                        $(this).css('backgroundColor', '');
                        var $customColor = $(this).attr('name');
                        var $color = $('.em-color.selected');
                        if($color.length){
                            var $selectedColor = $color.data('em-color');
                        }else{
                            var $selectedColor = 'emColorStyle01';
                        } 
                        //console.log($color01.val());
                        switch($selectedColor){
                            case 'emColorStyle01':
                                if($customColor=='customColor01'){defaultColor(temp,emColorStyle01.customColor01);}                               
                                if($customColor=='customColor02'){defaultColor(temp,emColorStyle01.customColor02);}
                                if($customColor=='customColor03'){defaultColor(temp,emColorStyle01.customColor03);}
                                if($customColor=='customColor04'){defaultColor(temp,emColorStyle01.customColor04);}
                                //console.log(temp);
                                settingsColor = $.extend( {}, settingsFontBg,temp,emColorStyle01.customColor05 );
                                less.modifyVars(settingsColor);
                                break;
                            case 'emColorStyle02':
                                if($customColor=='customColor01'){defaultColor(temp,emColorStyle02.customColor01);}                               
                                if($customColor=='customColor02'){defaultColor(temp,emColorStyle02.customColor02);}
                                if($customColor=='customColor03'){defaultColor(temp,emColorStyle02.customColor03);}
                                if($customColor=='customColor04'){defaultColor(temp,emColorStyle02.customColor04);}
                                settingsColor = $.extend( {}, settingsFontBg,temp,emColorStyle02.customColor05 );
                                less.modifyVars(settingsColor);
                                break;
                            case 'emColorStyle03':
                                if($customColor=='customColor01'){defaultColor(temp,emColorStyle03.customColor01);}                               
                                if($customColor=='customColor02'){defaultColor(temp,emColorStyle03.customColor02);}
                                if($customColor=='customColor03'){defaultColor(temp,emColorStyle03.customColor03);}
                                if($customColor=='customColor04'){defaultColor(temp,emColorStyle03.customColor04);}
                                settingsColor = $.extend( {}, settingsFontBg,temp,emColorStyle03.customColor05 );
                                less.modifyVars(settingsColor);
                                break;
                            case 'emColorStyle04':
                                if($customColor=='customColor01'){defaultColor(temp,emColorStyle04.customColor01);}                               
                                if($customColor=='customColor02'){defaultColor(temp,emColorStyle04.customColor02);}
                                if($customColor=='customColor03'){defaultColor(temp,emColorStyle04.customColor03);}
                                if($customColor=='customColor04'){defaultColor(temp,emColorStyle04.customColor04);}
                                settingsColor = $.extend( {}, settingsFontBg,temp,emColorStyle04.customColor05 );
                                less.modifyVars(settingsColor);
                                break;
                            case 'emColorStyle05':
                                if($customColor=='customColor01'){defaultColor(temp,emColorStyle01.customColor01);}                               
                                if($customColor=='customColor02'){defaultColor(temp,emColorStyle05.customColor02);}
                                if($customColor=='customColor03'){defaultColor(temp,emColorStyle05.customColor03);}
                                if($customColor=='customColor04'){defaultColor(temp,emColorStyle05.customColor04);}
                                settingsColor = $.extend( {}, settingsFontBg,temp,emColorStyle05.customColor05 );
                                less.modifyVars(settingsColor);
                                break;
                            case 'emColorStyle06':
                                if($customColor=='customColor01'){defaultColor(temp,emColorStyle06.customColor01);}                               
                                if($customColor=='customColor02'){defaultColor(temp,emColorStyle06.customColor02);}
                                if($customColor=='customColor03'){defaultColor(temp,emColorStyle06.customColor03);}
                                if($customColor=='customColor04'){defaultColor(temp,emColorStyle06.customColor04);}
                                settingsColor = $.extend( {}, settingsFontBg,temp,emColorStyle06.customColor05 );
                                less.modifyVars(settingsColor);
                                break;
                        }  
        		    }
            	}));
                var $submitColor = $('.colorpicker_submit');
            	$submitColor.click(function() {
            		var btn = $(this);
            		var tm;
            		clearTimeout(tm);
            		btn.button('loading');
            		tm = setTimeout(function() {
            			btn.button('reset');
            		}, 1000);
            	});
            };
        
            /* Font */
            var fontLoaded = {};
        
            function emFont() {
                var sFont = $('#em-variation-font a.em-font-family');
                if(sFont.length){
                    sFont.click(function() {
                        sFont.removeClass('selected');
                        $(this).addClass('selected');
                        var vFont = $(this).data('em-font-family');
                        if (typeof fontLoaded[vFont] == 'undefined') {
                            $('head').append('<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=' + encodeURIComponent(vFont) + ':400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic-ext,cyrillic,greek-ext,greek,vietnamese,latin-ext"></link>');
                        }
                        changeVariation('@font_family', vFont);
                        //less.modifyVars({'@font_family' : vFont});
                        fontLoaded[vFont] = vFont;
                        return false;
                    });
                }
            };
        
            /* Reset */
            function emReset() {
                var sClick = $('#em-variation-demo a.reset-button');
                if(sClick.length){
                    sClick.click(function() {
                        emResetBoxWide();
                        emResetFullSlideshow();            
                        resetVariation();
                        return false;
                    });
                }
            };     
			
			/*Check the first show*/
            function emCheckFirst(){
				var now = new Date();
            	var time = now.getTime();
  				var expireTime = time + <?php echo Mage::getStoreConfig('web/cookie/cookie_lifetime')*1000; ?>;
  				now.setTime(expireTime);
            	
            	if(!Mage.Cookies.get("emvariation"))
            	{
            		document.cookie = 'emvariation=true;expires='+now.toGMTString();
                	$('#em-variation-demo').removeClass('hidden').addClass('show');
            	}
			}
			
            $(document).ready(function() {                
                var wWindow = $(window).width();
                if(!isMobile && wWindow>767){                    
                    emVariationPanel();
                    setColourPicker();
                    if(EM.SETTING.FLUID_LAYOUT==0){
                        emBoxWide();   
                    }                
                    emFullSlideshow();                
                    emPageBackground();
                    emColor();
                    emFont();
                    emReset();
					emCheckFirst();
                }
            });
        })(jQuery);
	//]]>
</script>