/**
 * Script allows to leave html more simple and shorters work content for html-coder
 *
 *
 * Works togather with "global.css" and "preview-page.css".
 * Three tasks are solved:
 *
 * 1). The script transforms
 *
 * <div class="rounded">
 * ----------===== INNER HTML =====----------------
 * </div>
 *
 * in
 *
 * <div class="rounded_l">
 *     <div class="rounded_r">
 *         <div class="rounded_bl">
 *             <div class="rounded_br">
 *                 <div class="rounded_tl">
 *                     <div class="rounded_tr">
 * ----------===== INNER HTML =====----------------
 *                     </div>
 *                 </div>
 *             </div>
 *         </div>
 *      </div>
 * </div>
 *
 * So we get container with rounded engles. It can be used by any element of the theme.
 *
 * 2). The script transforms
 *
 * <div class="rectangular">
 * ----------===== INNER HTML =====----------------
 * </div>
 *
 * in
 *
 * <div class="rectangular">
 *    <div class="rect-inner-wrapper">
 * ----------===== INNER HTML =====----------------
 *     </div>
 * </div>
 * So we get container with double-color border.
 *
 * 3). The script transforms
 *
 * <div class="... wrap-it-with-grad-bg">
 * ----------===== INNER HTML =====----------------
 * </div>
 *
 * in
 *
 * <div class="grad-bg">
 *    <div class="...">
 * ----------===== INNER HTML =====----------------
 *     </div>
 * </div>
 *
 * Also the script deletes paddings of <div class="..."> and set the same in <div class="grad-bg"> and
 * set the same float as <div class="...">.
 *
 * @author andrew
 */

$(document).ready(function(){
   makeMagic();
});

function makeMagic(parent){
/*1)*/
    var prefix="";
    if(parent!=null)
        prefix=parent+" ";
    $(prefix+".rounded-dark").removeClass("rounded-dark").addClass("rounded-dark-l");
    $(prefix+".rounded-dark-l").each(function(){
        var padding_top = $(this).css('padding-top');
        var padding_right = $(this).css('padding-right');
        var padding_bottom = $(this).css('padding-bottom');
        var padding_left = $(this).css('padding-left');
        var width = $(this).css('width');

        $(this).css('padding-top','0');
        $(this).css('padding-right','0');
        $(this).css('padding-bottom','0');
        $(this).css('padding-left','0');

        width_digit = parseInt(width);
        padding_left_digit = parseInt(padding_left);
        padding_right_digit = parseInt(padding_right);
        if(width) {
            /**
             *See explanation of .rounded-light. It is the same.
             */
            $(this).css('width',   (width_digit
                                  + ((padding_left)?padding_left_digit:0)
                                  + ((padding_right)?padding_right_digit:0)
                                  + 2
                                )+"px");
        }
        if(padding_left_digit!=0){
            if(padding_right_digit!=0){
                $(this).wrapInner("<div class='rounded-dark-r'><div class='rounded-dark-bl'><div class='rounded-dark-br'><div class='rounded-dark-tl'><div class='rounded-dark-tr' style='padding-top:"+padding_top
                + "; padding-right: " + (padding_right_digit+1) + "px"
                + "; padding-bottom: " + padding_bottom
                + "; padding-left: "+ (padding_left_digit+1) + "px"
                + "; width: "+ width
                + ";'></div></div></div></div></div>");
            } else {
                $(this).wrapInner("<div class='rounded-dark-r'><div class='rounded-dark-bl'><div class='rounded-dark-br'><div class='rounded-dark-tl'><div class='rounded-dark-tr' style='padding-top:"+padding_top
                + "; padding-right: " + padding_right
                + "; padding-bottom: " + padding_bottom
                + "; padding-left: "+ (padding_left_digit+1) + "px"
                + "; width: "+ (width_digit + 1) + "px"
                + ";'></div></div></div></div></div>");
            }
        }
        else if(padding_right_digit!=0){
            $(this).wrapInner("<div class='rounded-dark-r'><div class='rounded-dark-bl'><div class='rounded-dark-br'><div class='rounded-dark-tl'><div class='rounded-dark-tr' style='padding-top:"+padding_top
            + "; padding-right: " + (padding_right_digit+1) + "px"
            + "; padding-bottom: " + padding_bottom
            + "; padding-left: "+ padding_left
            + "; width: "+ (width_digit + 1) + "px"
            + ";'></div></div></div></div></div>");
        }else {
            $(this).wrapInner("<div class='rounded-dark-r'><div class='rounded-dark-bl'><div class='rounded-dark-br'><div class='rounded-dark-tl'><div class='rounded-dark-tr' style='padding-top:"+padding_top
            + "; padding-right: " + padding_right
            + "; padding-bottom: " + padding_bottom
            + "; padding-left: "+ padding_left
            + "; width: "+ (width_digit + 2) + "px"
            + ";'></div></div></div></div></div>");
        }
    });

    $(prefix+".rounded-light").removeClass("rounded-light").addClass("rounded-light-l");
    $(prefix+".rounded-light-l").each(function(){
        var padding_top = $(this).css('padding-top');
        var padding_right = $(this).css('padding-right');
        var padding_bottom = $(this).css('padding-bottom');
        var padding_left = $(this).css('padding-left');
        var width = $(this).css('width');

        $(this).css('padding-top','0');
        $(this).css('padding-right','0');
        $(this).css('padding-bottom','0');
        $(this).css('padding-left','0');

        width_digit = parseInt(width);
        padding_left_digit = parseInt(padding_left);
        padding_right_digit = parseInt(padding_right);
        if(width) {
            /**
             *1) Condition if (for width, padding_left, padding_right) is because
             *   IEs javascript gets NaN if css-field undefined in stylesheet. And so the script crashes.
             *2) Explanation for two additional pixels and padding tranformations.
             *   Element with class .rounded had border with 1px width.
             *   .rounded was deleted from this element, so border disapeared.
             *   Our task is to make children and sublings do not change their layout relativly to screen
             *   after transformation.
             *   So after document's structure was changed, children have new father <div class='rounded-light-tr'>.
             *   And brother of sublings <div class="..rounded-light"> changed its name and styles for <div class="..rounded-light-l">.
             *   So we need to corect <div class="..rounded-light-l"> and <div class='rounded-light-tr'>
             *   <div class="..rounded-light-l">:
             *    - .rounded-light set border with 1px width for element. Now element has no border.
             *      So we need to increase element's width(+2px) for preserving flow of elements in the document.
             *    - We need transform left and right padding to part of elements width.
             *      So nested elements, which emitate element's borders and rounded engles, fill width and amitations lay on borders and engles.
             *   <div class='rounded-light-tr'>:
             *    - it inherits width and padding of the element, so element's children do not change their layout relativly window.
             *    - But we need to analyse padding and then decide how add 2px of border which now absent. So we may add 1px to some of padding
             *      and 1px to width. Or 1px to padding-left and 1px to padding-right. Or all 2px to width.
             *      Our target - save children's layout relativly window.
             **/

            $(this).css('width',(   width_digit
                                  + ((padding_left)?padding_left_digit:0)
                                  + ((padding_right)?padding_right_digit:0)
                                  + 2
                                )+"px");
            if(padding_left_digit!=0){
                if(padding_right_digit!=0){
                    $(this).wrapInner("<div class='rounded-light-r'><div class='rounded-light-bl'><div class='rounded-light-br'><div class='rounded-light-tl'><div class='rounded-light-tr' style='padding-top:"+padding_top
                    + "; padding-right: " + (padding_right_digit+1) + "px"
                    + "; padding-bottom: " + padding_bottom
                    + "; padding-left: "+ (padding_left_digit+1) + "px"
                    + "; width: "+ width
                    + ";'></div></div></div></div></div>");
                } else {
                    $(this).wrapInner("<div class='rounded-light-r'><div class='rounded-light-bl'><div class='rounded-light-br'><div class='rounded-light-tl'><div class='rounded-light-tr' style='padding-top:"+padding_top
                    + "; padding-right: " + padding_right
                    + "; padding-bottom: " + padding_bottom
                    + "; padding-left: "+ (padding_left_digit+1) + "px"
                    + "; width: "+ (width_digit + 1) + "px"
                    + ";'></div></div></div></div></div>");
                }
            }
            else if(padding_right_digit!=0){
                $(this).wrapInner("<div class='rounded-light-r'><div class='rounded-light-bl'><div class='rounded-light-br'><div class='rounded-light-tl'><div class='rounded-light-tr' style='padding-top:"+padding_top
                + "; padding-right: " + (padding_right_digit+1) + "px"
                + "; padding-bottom: " + padding_bottom
                + "; padding-left: "+ padding_left
                + "; width: "+ (width_digit + 1) + "px"
                + ";'></div></div></div></div></div>");
            }else {
                $(this).wrapInner("<div class='rounded-light-r'><div class='rounded-light-bl'><div class='rounded-light-br'><div class='rounded-light-tl'><div class='rounded-light-tr' style='padding-top:"+padding_top
                + "; padding-right: " + padding_right
                + "; padding-bottom: " + padding_bottom
                + "; padding-left: "+ padding_left
                + "; width: "+ (width_digit + 2) + "px"
                + ";'></div></div></div></div></div>");

            }
        }
    });

    /*2)*/
    $(prefix+".rectangular").wrapInner("<div class='rect-inner-wrapper'></div>");
    $(prefix+".rectangular").each(function(){
        var width = $(this).css('width');
        if(width){
            $(this).children().css('width', width);
            $(this).css('width',( parseInt(width) +2 )+"px");
        }
    });

    /*3)*/
    $(prefix+".wrap-it-with-grad-bg").each(function(){
       var margin_top = $(this).css('margin-top');
       var margin_right = $(this).css('margin-right');
       var margin_bottom = $(this).css('margin-bottom');
       var margin_left = $(this).css('margin-left');
       var css_float = $(this).css('float');

       $(this).css('margin-top','0');
       $(this).css('margin-right','0');
       $(this).css('margin-bottom','0');
       $(this).css('margin-left','0');
       $(this).removeClass("wrap-it-with-grad-bg")

       $(this).wrap('<div class="grad-bg" style="margin-top: ' + margin_top
                                            + '; margin-right: ' + margin_right
                                            + '; margin-bottom: ' + margin_bottom
                                            + '; margin-left: ' + margin_left
                                            + '; float: ' + css_float
                                            + '; display: inline;"></div>');
    });
    /*3.1)*/
    $(prefix+".wrap-it-with-sgrad-bg").each(function(){
       var margin_top = $(this).css('margin-top');
       var margin_right = $(this).css('margin-right');
       var margin_bottom = $(this).css('margin-bottom');
       var margin_left = $(this).css('margin-left');
       var css_float = $(this).css('float');

       $(this).css('margin-top','0');
       $(this).css('margin-right','0');
       $(this).css('margin-bottom','0');
       $(this).css('margin-left','0');
       $(this).removeClass("wrap-it-with-sgrad-bg")

       $(this).wrap('<div class="sgrad-bg" style="margin-top: ' + margin_top
                                            + '; margin-right: ' + margin_right
                                            + '; margin-bottom: ' + margin_bottom
                                            + '; margin-left: ' + margin_left
                                            + '; float: ' + css_float
                                            + '; display: inline;"></div>');
    });
}