<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2012 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>
<?php
    $deviceType = Mage::helper('xmlconnect')->getDeviceType();

    $homeFlag = 'home';
    $catalogFlag = 'catalog';
    $homeHorFlag = 'homehor';
    $catalogHorFlag = 'cataloghor';
    $homeAction = $this->getPreviewActionUrl($homeFlag);
    $catalogAction = $this->getPreviewActionUrl($catalogFlag);
    $homeHorAction = $this->getPreviewActionUrl($homeHorFlag);
    $catalogHorAction = $this->getPreviewActionUrl($catalogHorFlag);
?>
<div id="XmlconnectThemePreview" class="ipad-portrait"></div>

<div id="ipad-tab-orientation" class="mm-box-blue a-center ipad-tab-portrait">
    <button type="button" class="scalable" onclick="updatePreview()"><span><span><span><?php echo $this->__('Update Preview');?></span></span></span></button>
    <button type="button" class="scalable" onclick="changeOrientation()"><span><span><span><?php echo $this->__('Change Orientation');?></span></span></span></button>
    <p><br />To preview the newly uploaded images, please save your application first.</p>
</div>
<div class="mm-pager" style="padding-left:60px;">
    <strong><?php echo $this->__('Screens:'); ?></strong>
    <ul id="mmPager">
        <li><a id="<?php echo $homeFlag ?>" class="active" href="<?php echo $homeAction; ?>" onclick="mmPreviewFlag = '<?php echo $homeFlag ?>'; mmPreviewPage = this.href; updatePreview();return false;">1</a></li>
        <li><a id="<?php echo $catalogFlag ?>" href="<?php echo $catalogAction; ?>" onclick="mmPreviewFlag = '<?php echo $catalogFlag ?>'; mmPreviewPage = this.href; updatePreview();return false;">2</a></li>
    </ul>
    <ul id="mmPager2" style="display: none;">
        <li><a id="<?php echo $homeHorFlag ?>" href="<?php echo $homeHorAction; ?>" onclick="mmPreviewFlag = '<?php echo $homeHorFlag ?>'; mmPreviewPage = this.href; updatePreview();return false;">1</a></li>
        <li><a id="<?php echo $catalogHorFlag ?>" href="<?php echo $catalogHorAction; ?>" onclick="mmPreviewFlag = '<?php echo $catalogHorFlag ?>'; mmPreviewPage = this.href; updatePreview();return false;">2</a></li>
    </ul>
</div>
<script type="text/javascript">
mmPreviewPage = '<?php echo $homeAction; ?>';
mmPreviewFlag = '<?php echo $homeFlag ?>';
previewIframe = $('XmlconnectThemePreview');
ipadTabOrientn = $('ipad-tab-orientation');
// submit application flag
mmPreviewPagePrefix = '';
function changeOrientation() {
    $('mmPager', 'mmPager2').invoke('toggle');

    if (mmPreviewFlag == '<?php echo $homeFlag ?>') {
        flagOrient = true;
        mmPreviewPage = '<?php echo $homeHorAction; ?>';
        mmPreviewFlag = '<?php echo $homeHorFlag ?>';
    } else if (mmPreviewFlag == '<?php echo $catalogFlag ?>') {
        flagOrient = true;
        mmPreviewPage = '<?php echo $catalogHorAction; ?>';
        mmPreviewFlag = '<?php echo $catalogHorFlag ?>';
    } else if (mmPreviewFlag == '<?php echo $homeHorFlag ?>') {
        flagOrient = false;
        mmPreviewPage = '<?php echo $homeAction; ?>';
        mmPreviewFlag = '<?php echo $homeFlag ?>';
    } else if (mmPreviewFlag == '<?php echo $catalogHorFlag ?>') {
        flagOrient = false;
        mmPreviewPage = '<?php echo $catalogAction; ?>';
        mmPreviewFlag = '<?php echo $catalogFlag ?>';
    }

        previewIframe.removeClassName((flagOrient ? 'ipad-portrait' : 'ipad-landscape'))
            .addClassName((flagOrient ? 'ipad-landscape' : 'ipad-portrait'));
        ipadTabOrientn.removeClassName((flagOrient ? 'ipad-tab-portrait' : 'ipad-tab-landscape'))
            .addClassName((flagOrient ? 'ipad-tab-landscape' : 'ipad-tab-portrait'));

    resetPager();
    $(mmPreviewFlag).addClassName('active');
    updatePreview();
}
function updatePreview(someAction) {
    var loadingClassName = previewIframe.className + '-loading';
    previewIframe.update('<?php echo $this->__('Loading Preview...'); ?>').addClassName(loadingClassName);
    new Ajax.Request(mmPreviewPage + (someAction ? someAction : '') + mmPreviewPagePrefix, {
        parameters: $('edit_form').serialize(true),
        onSuccess : function(transport) {
            try{
                if (transport.responseText.isJSON()) {
                    var response = transport.responseText.evalJSON()
                    if (response.error) {
                        alert(response.message);
                    }
                    if(response.ajaxExpired && response.ajaxRedirect) {
                        setLocation(response.ajaxRedirect);
                    }
                } else {
                    previewIframe.removeClassName(loadingClassName).update(transport.responseText);
                }
            } catch (e) {
                alert(transport.responseText);
            }

            if (!response.success) {
                var msg = response.error_message;
                if (msg) {
                    alert(msg);
                }
            }
        }
    });
}
function resetPager() {
    $('mmPager').childElements().each(function(t){
        t.down('a').removeClassName('active');
    });
    $('mmPager2').childElements().each(function(t){
        t.down('a').removeClassName('active');
    });
}

document.observe("dom:loaded", function() {
    $('mmPager').childElements().each(function(t){
        Event.observe(t.down('a'), 'click', function(e){
            e.stop();
            resetPager();
            t.down('a').addClassName('active');
            mmPreviewPage = t.down('a').href;
        });
    });
    $('mmPager2').childElements().each(function(t){
        Event.observe(t.down('a'), 'click', function(e){
            e.stop();
            resetPager();
            t.down('a').addClassName('active');
            mmPreviewPage = t.down('a').href;
        });
    });
});

tabsDesignSectionPreviewClicked = false;
Event.observe(document, 'dom:loaded', function() {
    if ($("mobile_app_tabs_design_section")) {
        $("mobile_app_tabs_design_section").observe('click', function() {
            if (!tabsDesignSectionPreviewClicked) {
                setTimeout("updatePreview()", 200);
                tabsDesignSectionPreviewClicked = true;
            }
        });
    } else {
        // 1 is correct value - tells that you don't need to load app data
        mmPreviewPagePrefix = 'submission_action/1/';
        updatePreview();
    }
});

</script>
