﻿jQuery.fn.corner=function(p){
    function creatImgElement(clsName,src)
    {
        var img=document.createElement("img");
        img.src=src;
        img.className=clsName;
        return img;
    }
    function creatDivElement(clsName)
    {
        var div=document.createElement("div");
        div.className=clsName;
        return div;
    }
//    p=p||"";
//    var p={
//        id:"",
//        leftWidth:5,
//        topHeight:5,
//        rightWidth:5,
//        bottomHeight:5,
//        leftTopImgCls:"",
//        rightTopImgCls:"",
//        leftBottomImgCls:"",
//        rightBottomImgCls:"",
//        topDivCls:"",
//        leftDivCls:"",
//        rightDivCls:"",
//        bottomDivCls:"",
//        containerDivCls:"",
//        leftTopImgSrc:"",
//        rightTopImgSrc:"",
//        leftBottomImgSrc:"",
//        rightBottomImgSrc:"",
//    }
    var innerWidth=$("#"+p.id).width();
    var innerHeight=$("#"+p.id).height();
    var containerDiv=creatDivElement(p.containerDivCls);
    var leftTopImg=creatImgElement(p.leftTopImgCls,p.leftTopImgSrc);
    var rightTopImg=creatImgElement(p.rightTopImgCls,p.rightTopImgSrc);
    var leftBottomImg=creatImgElement(p.leftBottomImgCls,p.leftBottomImgSrc);
    var rightBottomImg=creatImgElement(p.rightBottomImgCls,p.rightBottomImgSrc);
    var topDiv=creatDivElement(p.topDivCls);
    var leftDiv=creatDivElement(p.leftDivCls);
    var rightDiv=creatDivElement(p.rightDivCls);
    var bottomDiv=creatDivElement(p.bottomDivCls);
    var containerObj=$(containerDiv);
    containerObj.css({width:innerWidth+p.leftWidth+p.rightWidth,height:innerHeight+p.topHeight+p.bottomHeight});
    containerObj.append(leftTopImg);
    containerObj.append(topDiv);
    containerObj.append(rightTopImg);
    containerObj.append(leftDiv);
    //containerObj.append(containerObj[0]);//add origial
    

    $(topDiv).css({width:innerWidth,height:p.topHeight-1});
    $(leftDiv).css({width:p.leftWidth-1,height:innerHeight});
    $(rightDiv).css({width:p.rightWidth-1,height:innerHeight});
    $(bottomDiv).css({width:innerWidth,height:p.bottomHeight-1});
    
    var reDiv=creatDivElement($("#"+p.id)[0].className);
    reDiv.id=$("#"+p.id)[0].id;
    var s=$("#"+p.id)[0].innerHTML;
    reDiv.innerHTML=s;
    $(reDiv).css("float","left");
    containerObj.append(reDiv);
    containerObj.append(rightDiv);
    containerObj.append(leftBottomImg);
    containerObj.append(bottomDiv);
    containerObj.append(rightBottomImg);
    
    $("#"+p.id)[0].parentNode.replaceChild($(containerObj)[0],$("#"+p.id)[0]);
    $("#sourceCode").val($(containerObj)[0].outerHTML);
    
};
