$(document).ready(function(){
    setTitle("1");  
    setTitle("2");  
    setTitle("3");  
    setTitle("4"); 
    setTitle("5");     
})

function setTitle(titleType) {
    var group = $(".styletitle" + titleType);
    group.each(function() {
        var curId = $(this).attr('id');
        var width = getStrWidth($(this).attr('width'));
        var wMiddle = width == ''?'':' style = "width:' + width  + '"'
        var idLeft = curId + 'left';
        var idMiddle = curId + 'middle';
        var idContainer = curId + 'container';
        var idRight = curId + 'right';
        var clsleft = "left" ;
        var clsmiddle = "middle" ;
        var clsright = "right" ;
        
        var txt = '<div id="' + idLeft + '" class="' + clsleft + '"></div>' +
                  '<div id="' + idMiddle + '"' + wMiddle + ' class="' + clsmiddle + '">' +
                  '<div id = "' + idContainer + '"></div>' +
                  '</div>' + 
                  '<div id="' + idRight + '" class="' + clsright + '"> </div>' + 
                  '<div style="clear:both"> </div>';
              
        var contents = $("#" + curId).children();
        $("#" + curId).append(txt);
        $("#" + idContainer).append(contents);
        
        setSizeFromBgImage(idMiddle,true);
        var arrDimIdLeft = setSizeFromBgImage(idLeft);
        var imgH = arrDimIdLeft[1];
        var wLeft = arrDimIdLeft[0];
        var wRight = (setSizeFromBgImage(idRight))[0];    
        var wPrincipal = document.getElementById(curId).offsetWidth;
        
        if (width.indexOf("%") != -1) {
            width = eval(("" + width).replace("%",""));
            var gap = Math.floor(((eval(wLeft) + eval(wRight))/eval(wPrincipal) * 100))+1;
            width = ("" + (width - gap)) + "%"            
            document.getElementById(idMiddle).style.width = width;
        }  
        var hIdContainer = document.getElementById(idContainer).offsetHeight;
        var paddingTop = Math.floor((imgH - hIdContainer)/2);
        document.getElementById(idContainer).style.paddingTop = "" + paddingTop + "px";
       
    });
}

function getStrWidth(width) {
    if (width==undefined)
        return "100%";
    else if (width=="auto") 
        return "";
    return width;
}

function setSizeFromBgImage(id,onlyHeight) {
    var infoSize = getBGImgSize(id);
    var width = getHeightWidthFromInfo(infoSize,"width");
    var height = getHeightWidthFromInfo(infoSize,"height");
    document.getElementById(id).style.height = "" + height + "px";
    if (!onlyHeight) {
        document.getElementById(id).style.width = "" + width + "px"; 
    }
    var arrDim = new Array();
    arrDim[0] = width;
    arrDim[1] = height;
    return arrDim;
}

function getBGImgSize(id){
    var imgSrc = $("#" + id).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', '');
    var infoSize = $.ajax({
                    url: './components/title/php/infoImg.php',
                    global: false,
                    type: "POST",
                    data: ({imgsrc:imgSrc}),
                    async:false}).responseText;
    return infoSize;
}

function getHeightWidthFromInfo(info,type) {
    info = info.toLowerCase();
    var aInfo = info.replace(/=/g,'').replace('width', '').replace(/"/g,'').replace('height', '').split(" ");
    return (type=="width"?aInfo[0]:aInfo[1]);
}