<?php
/**
 * @var $this Aitoc_Aitcg_Block_Catalog_Product_View_Options_Type_File
 */
$_option = $this->getOption();
$_fileInfo = $this->getFileInfo();
$_image = $this->getImage();
$_rand = rand();
$_fileOption = 'options_' . $_option->getId();
$_preview = $this->getPreview();
$_defaultValues = isset($_preview['img_data']) ?
    $_preview :
    array('img_data' => '');
$checkboxEnabled = (int)Mage::getStoreConfig('catalog/aitcg/aitcg_confirm_checkbox');
if ($checkboxEnabled) {
    $fullCheckboxEnabled = Mage::getStoreConfig('catalog/aitcg/aitcg_confirm_fullcheckbox');
}
$sharedImgId  = Mage::helper('aitcg')->getSharedImgId($_rand);
$sharedImgUrl = Mage::helper('aitcg')->getSharedImgUrl($sharedImgId);
$sharedImgWasCreatedUrl = Mage::helper('aitcg')->getSharedImgWasCreatedUrl(); ?>

<script type="text/javascript">
    //<![CDATA[
    var aitcgConfig<?php echo $_rand; ?> = {
    <?php if($_image !== false): ?>
    optionIsRequired: <?php echo (int)$_option->getIsRequire(); ?>,

    productImage: {
        fullUrl: '<?php echo $_image["full_image"]; ?>',
        sizeX  :  <?php echo $_image["default_size"][0]; ?>,
        sizeY  :  <?php echo $_image["default_size"][1]; ?>,

        thumb: {
            fullUrl: '<?php echo $_image["thumbnail_url"]; ?>',
            sizeX  :  <?php echo $_image["thumbnail_size"][0]; ?>,
            sizeY  :  <?php echo $_image["thumbnail_size"][1]; ?>
        }
    },

    area: {
        sizeX  : <?php echo $_option->getAreaSizeX() ?>,
        sizeY  : <?php echo $_option->getAreaSizeY() ?>,
        offsetX: <?php echo $_option->getAreaOffsetX() ?>,
        offsetY: <?php echo $_option->getAreaOffsetY() ?>
    },

    tools: {
        use: {
            PredefinedImage: <?php echo (int)$_option->getUsePredefinedImage() ?>,
            Mask           : <?php echo (int)$_option->getUseMasks() ?>,
            UserImage      : <?php echo (int)$_option->getUseUserImage() ?>,
            Text           : <?php echo (int)$_option->getUseText() ?>,
            Social         : <?php echo (int)Mage::getStoreConfig('catalog/aitcg/aitcg_use_social_networks_sharing') ?>,
            Save           : 1
        },
        global: ['Save', 'Social'],
        PredefinedImage: {
            requestUrl        : '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl(Mage::getUrl('aitcg/ajax/addPredefined')); ?>',
            options           :  <?php echo Mage::helper('aitcg/category')->getPredefinedCatsOptionHtml($_option->getPredefinedCats()); ?>'',
            categoryPreviewUrl: '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl(Mage::getUrl('aitcg/ajax/categoryPreview'))?>',
            placeBehind    :  <?php echo (int)$this->getAllowPlaceBehind()?>,
            DefaultImageBehind: <?php echo (int)$_option->getDefImgBehindClip() ?>
        },
        Mask: {
            requestUrl        : '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl(Mage::getUrl('aitcg/ajax/addMask')); ?>',
            options           :  <?php echo Mage::helper('aitcg/mask_category')->getMaskCatsOptionHtml($_option->getMasksCatId()); ?>'',
            categoryPreviewUrl: '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl(Mage::getUrl('aitcg/ajax/masksCategory'))?>',
            location          :  <?php echo (int)$_option->getMaskLocation() ?>,
            createMaskUrl     : '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl(Mage::getUrl('aitcg/ajax/createMask')); ?>',
            getMaskUrl        : '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl(Mage::getUrl('aitcg/ajax/getMask')); ?>',
            delMaskUrl        : '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl(Mage::getUrl('aitcg/ajax/delMask')); ?>'
        },
        UserImage: {
            requestUrl: '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl(Mage::getUrl('aitcg/ajax/addImage')); ?>',
            placeBehind    :  <?php echo (int)$this->getAllowPlaceBehind()?>,
            DefaultImageBehind: <?php echo (int)$_option->getDefImgBehindImage() ?>
        },
        Text: {
            requestUrl     : '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl(Mage::getUrl('aitcg/ajax/addText')); ?>',
            textLength     :  <?php echo (int)$_option->getTextLength() ?>,
            fontOptions    : '<?php echo Mage::helper('aitcg/font')->getFontOptionHtml(); ?>',
            fontPreviewUrl : '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl(Mage::getUrl('aitcg/ajax/fontPreview'))?>',
            useOutline     :  <?php echo (int)Mage::getStoreConfig('catalog/aitcg/aitcg_font_outline'); ?>,
            useShadow      :  <?php echo (int)Mage::getStoreConfig('catalog/aitcg/aitcg_font_shadow'); ?>,
            useColorpick   :  <?php echo (int)$_option->getAllowColorpick() ?>,
            onlyPredefColor:  <?php echo (int)$this->getAllowPredefinedColors()?>,
            colorSet       : '<?php echo $this->getColorset()->getValue();?>',
            placeBehind    :  <?php echo (int)$this->getAllowPlaceBehind()?>,
            DefaultImageBehind: <?php echo (int)$_option->getDefImgBehindText() ?>
        },
        Social: {
            imgCreatePath   : '<?php echo Mage::helper('aitcg')->getImgCreatePath() ?>',
            reservedImgId   : '<?php echo $sharedImgId ?>',
            imgViewUrl      : '<?php echo $sharedImgUrl ?>',
            wasCreatedUrl   : '<?php echo $sharedImgWasCreatedUrl ?>',
            allowChecking   :  <?php echo $_defaultValues['img_data'] != '' ? 'true' : 'false' ?>
        },
        Save: {
            saveSvgUrl            : '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl(Mage::getUrl('aitcg/index/svg')); ?>',
            normalizateSvgToPngUrl: '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl(Mage::getUrl('aitcg/index/svgtopng')); ?>',
            //getPrint - to update
            savePdfUrl            : '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl($this->getSavePdfUrl()); ?>',
            saveImageDefaultUrl   : '<?php echo Mage::helper('aitcg')->getSecureUnsecureUrl(Mage::getUrl('aitcg/ajax/createImageDefault')); ?>',
            isShow                : <?php echo (int)$_option->getAllowSaveGraphics() ?>
        }
    },

    jsUrl: '<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_JS);?>',  
     editorEnabled: true,
    
    <?php else: ?>
        editorEnabled: false,

        <?php endif; ?>
        viewType: '<?php echo ucfirst(Mage::getStoreConfig('catalog/aitcg/aitcg_editor_position')); ?>',
        rand: '<?php echo $_rand; ?>',
        checkboxEnabled: <?php echo (int)$checkboxEnabled; ?>,
        allowUploadUnderTemplate: 1,

        product_id        : '<?php echo $_option->getProductId(); ?>',
        optionId          :  <?php echo $_option->getId() ?>,
        distortion        :  <?php echo $this->isObjectDistortionAllowed()?>,
        previewContainer  : 'preview_container<?php echo $_option->getId(); ?>',

        toolboxStyle: '<?php echo Mage::getStoreConfig('catalog/aitcg/aitcg_toolbox_style'); ?>'
    };
    Object.extend(aitcgConfig<?php echo $_rand; ?>, aitcgBaseConfig);
    //]]>
</script>
<dt><label<?php if ($_option->getIsRequire()) : ?> class="required"<?php endif ?>><?php echo  $this->htmlEscape($_option->getTitle()) ?><?php if($this->isMageGtEq19() && $_option->getIsRequire()) : ?><em>*</em><?php elseif ($_option->getIsRequire()) : ?> <span class="required"><em>*</em></span><?php endif ?></label>
    <?php echo $this->getFormatedPrice() ?></dt>
<dd<?php if ($_option->decoratedIsLast){?> class="last"<?php }?>>
    <div>
        <div class="aitcg_error" style="display: none;">
            <?php echo $this->__('Sorry, but your browser does NOT support HTML5 elements and this feature is not working or may work incorrectly.');?><br />
            <span class="error_default" style="display: none"><?php echo $this->__('Please, try using different browser.');?></span>
            <span class="error_android" style="display: none"><?php echo $this->__('Please, try using different browser (Opera Mini for example) or update your Android to a newer version.');?></span>
        </div>
        <?php echo $this->__('Click on the thumbnail to choose the product image for editing.'); ?>
        <div class="aitcg_image_div"  style="float:none;display:none;" id="preview_container<?php echo $_option->getId(); ?>"></div>
        <input type="hidden" id="options_<?php echo $_option->getId() ?>" class="input-text<?php echo $_option->getIsRequire() ? ' aitcg-required' : '' ?> product-custom-option" name="options[<?php echo $_option->getId() ?>]" value='<?php echo $this->htmlEscape($_defaultValues['img_data'])?>' />
        <?php if ($checkboxEnabled == 1): ?>
        <p class="no-margin">
            <input type="checkbox" name="<?php echo $_rand; ?>_checkbox" id="<?php echo $_fileOption; ?>_checkbox" class="product-custom-option <?php if ($_option->getIsRequire()) : ?>required-entry<?php endif ?>" <?php if($fullCheckboxEnabled == 1): ?>onClick="return opCimage<?php echo $_rand; ?>.checkConfirmBox(this);" <?php endif; ?>/>
            <?php if($fullCheckboxEnabled == 1): ?>
            <a href="#" onClick="return opCimage<?php echo $_rand; ?>.checkConfirmBox(this);"><?php echo Mage::getStoreConfig('catalog/aitcg/aitcg_confirm_text'); ?></a>
            <?php else: ?>
            <label for="<?php echo $_fileOption; ?>_checkbox"><?php echo Mage::getStoreConfig('catalog/aitcg/aitcg_confirm_text'); ?></label>
            <?php endif; ?>
        </p>
        <?php endif; ?>
    </div>
</dd>
<script type="text/javascript">
    //<![CDATA[
    var opCimage<?php echo $_rand; ?> = null;
    aitcgWindowOnload.push( function(){
        opCimage<?php echo $_rand; ?> = new Aitcg_Option( aitcgConfig<?php echo $_rand; ?> );
        opCimage<?php echo $_rand; ?>.view.initPreview();
    <?php if(Mage::helper('aitcg')->isVYAEnabled()): ?>
        if(typeof objectsCPPVYA == 'undefined'){
            objectsCPPVYA = [];
        }
        objectsCPPVYA.unshift(opCimage<?php echo $_rand; ?>);
        <?php endif; ?>
    });
    //]]>
</script>
<img class='techimg' style="display:none;">

<?php if(Mage::getStoreConfig('catalog/aitcg/aitcg_use_social_networks_sharing')) : ?>
<div id="socialWidgetsTip<?php echo $_option->getId() ?>" style="display:none;">
    <a href="#" onclick="return false;"><?php echo $this->__('Click to share your customized image'); ?></a>
</div>
<div id="imgSizeError<?php echo $_option->getId() ?>" style="display:none;">
    <?php echo $this->__('You image exceeds maximum allowed size'); echo ' (' .
    Mage::getStoreConfig('catalog/aitcg/aitcg_social_networks_sharing_max_img_width') . 'x' .
    Mage::getStoreConfig('catalog/aitcg/aitcg_social_networks_sharing_max_img_height') . ')';?>
</div>
<div class="fb-like" style="visibility:hidden;vertical-align:top;" id="fbaitcg<?php echo $_option->getId() ?>" data-layout="button_count" data-href="<?php echo $sharedImgUrl ?>" data-send="true" data-show-faces="false"></div>
<div id="gaitcgWrapper<?php echo $_option->getId() ?>" style="display:inline;"> </div>
<?php if ($this->canEmailToFriend()): ?>
    <?php $emailToFriendUrl = Mage::helper('aitcg')->getEmailToFriendUrl($this->getProduct(), $sharedImgId) ?>
    <div id="emailToFriend<?php echo $_option->getId() ?>" style="display:none;">
        <p style="display:inline;" class="email-friend"><a href="<?php echo $emailToFriendUrl ?>" target="_blank"><img style="widht:107px;height:20px;" src="<?php echo $this->getSkinUrl('aitoc/aitcg/images') . '/email_to_a_friend.gif' ?>" /></a></p>
    </div>
    <?php endif; ?>
<div id="socialButtonsLoader<?php echo $_option->getId() ?>" style="display:none;"><img src="<?php echo $this->getSkinUrl('images/opc-ajax-loader.gif') ?>" alt="<?php echo $this->__('Email to a Friend') ?>" /></div>
<?php endif; ?>

i will give 100 or more bounty points if solution worked for me.

initPreview: function()
    {
        var scale = this.option.calcScale(),
            elementId = this.config.previewContainer,
            container = $(elementId),
            c      = this.config,
            area   = c.area,
            thumb  = c.productImage.thumb;
        this.previewScale = scale;

        var areaParams = {
            width : Math.round(area.sizeX   * scale),
            height: Math.round(area.sizeY   * scale),
            left  : Math.round(area.offsetX * scale),
            top   : Math.round(area.offsetY * scale)
        };

        var html =
                '<div class="aitraph aitraph-bot"></div>' +
                '<img class="aitcg_preview_bg" src="' + thumb.fullUrl + '" />'+
                '<div class="aitraph aitraph-top"></div>' +
                '<div class="aitcg-overlay" style="width:'+ thumb.sizeX +'px;height:'+thumb.sizeY+'px;"></div>';
        container.update(html);

        this._showPreviewBlock( container );

        container.observe('click', this.onPreviewClick.bind(this));

        var title         = c.editorEnabled ? c.text.thumbTooltipEdit : c.text.thumbTooltipPreview, 
            viewIconClass = c.editorEnabled ? '' : 'view-icon';
        container.select('.aitcg-overlay')[0]
            .observe('mouseover', function(){Aitcg.tooltip().update(title).show()})
            .observe('mouseout', function(){Aitcg.tooltip().hide()})
            .addClassName(viewIconClass);


        var styleParams = Aitcg.addPxToValue(areaParams);
        $$('#' + elementId + ' .aitraph').each( function(element) {
            element.setStyle(styleParams);
        });

        Aitoc_Common_Events.dispatch('aitcg_option_preview_create_after_' + this.id, {element: container});

        this.preview = new Aitcg_Editor(this.option);
        this.preview.init(container, Aitcg_Editor.MODE_PREVIEW, true, this.previewScale);
        this.preview.load( $('options_' + this.id).getValue() );
        
    },