/*
 * Box 0.1 - Javascript
 *
 * Copyright (c) 2008 Johann Heyne (johannheyne.de)
 *
 * $Date: 2008.06.06
 *
 */

function Box(box_id,box_width,box_height,box_path,content_margin) {
    
    $(document).ready(function(){
        
        /* general infos
            
            function variables in:
            box_id: class name
            box_width: integer
            box_height: integer
            box_path: "folder/folder/"
            
            corner classes: .c1 .c2 .c3 .c4 
            edge classes: .e1 .e2 .e3 .e4
            background class: .bg
            content class: .content
        */
        
        /* ------------------------------
        setup */
        
        var box_padding_top = 20;
        var box_padding_side = 30;
        var box_padding_bottom = 50;
            
        var box_corner_width = 80;
        var box_corner_top_height = 80;
        var box_corner_bottom_height = 80;
        
        var box_width_defaul = 400;
        var box_height_defaul = 400;
       
        var box_path = '/media/js/box/';
       
        /* ------------------------------
        defaults */
        
        if(box_id == '') box_id = 'box';
        if(box_width == '') box_width = box_width_defaul;
        if(box_height == '') box_height = box_height_defaul;
        if(box_path == '') box_path = 'box/';
        
        var box_width_min = (box_corner_width - box_padding_side) * 2;
        var box_height_min = (box_corner_top_height - box_padding_top) + (box_corner_bottom_height - box_padding_bottom);
        
        if(box_width < box_width_min) box_width = box_width_min;
        if(box_height < box_height_min) box_height = box_height_min;
        
        if(content_margin == '') var content_margin_arr = [0, 0, 0, 0];
        if(content_margin != '') var content_margin_arr = content_margin;
        
        box_path_img = box_path + 'img/0.1/';
        
        
        /* ------------------------------
        get content */
        
        var box_content = $(box_id).html();
        
        
        /* ------------------------------
        set box dom and content */
        
		
        var box_dom = '<div class="posa content"></div>';
        box_dom += '<div class="iepngfix c1"></div>';
        box_dom += '<div class="iepngfix c2"></div>';
        box_dom += '<div class="iepngfix c3"></div>';
        box_dom += '<div class="iepngfix c4"></div>';
        box_dom += '<div class="iepngfix e1"></div>';
        box_dom += '<div class="iepngfix e2"></div>';
        box_dom += '<div class="iepngfix e3"></div>';
        box_dom += '<div class="iepngfix e4"></div>';
        box_dom += '<div class="iepngfix bg"></div>';
		
        $(box_id).html(box_dom);
		$(box_id + ' .content').html(box_content);
                
        
        /* ------------------------------
        box frame */
        
        var frame_width = box_width + box_padding_side + box_padding_side;
        var frame_height = box_height + box_padding_top + box_padding_bottom;
        
        $(box_id).css({
            left: "0px",
            top: "0px",
            width: frame_width + "px",
            height: frame_height + "px",
            overflow: "hidden",
            "z-index": "99999"
        });
        
        
        /* ------------------------------
        box content */        
        
        $(box_id + ' .content').css({
            position: "absolute",
            left: (box_padding_side + content_margin_arr[3]) + "px",
            top: (box_padding_top + content_margin_arr[0]) + "px",
            width: (box_width - content_margin_arr[1] - content_margin_arr[3]) + "px",
            height: (box_height - content_margin_arr[0] - content_margin_arr[2]) + "px",
            overflow: "visible",
            "z-index": 1
        });
        
        
        
        /* ------------------------------
        box background */
        
        var background_width = frame_width - (box_corner_width * 2);
        var background_height = frame_height - box_corner_top_height - box_corner_bottom_height;

        $(box_id + ' .bg').css({
            position: "absolute",
            left: box_corner_width + "px",
            top: box_corner_top_height + "px",
            width: background_width + "px",
            height: background_height + "px",
            background: "url(" + box_path_img + "bg.png)"
        });
        
        
        /* ------------------------------
        corner 1 */
        
        $(box_id + ' .c1').css({
            position: "absolute",
            left: "0px",
            top: "0px",
            width: box_corner_width + "px",
            height: box_corner_top_height + "px",
            background: "url(" + box_path_img + "c1.png)"
        });
        
        
        /* ------------------------------
        corner 2 */
        
        $(box_id + ' .c2').css({
            position: "absolute",
            left: (frame_width - box_corner_width) + "px",
            top: "0px",
            width: box_corner_width + "px",
            height: box_corner_top_height + "px",
            background: "url(" + box_path_img + "c2.png)"
        });
        
        
        /* ------------------------------
        corner 3 */
        
        $(box_id + ' .c3').css({
            position: "absolute",
            left: (frame_width - box_corner_width) + "px",
            top: (frame_height - box_corner_bottom_height) + "px",
            width: box_corner_width + "px",
            height: box_corner_bottom_height + "px",
            background: "url(" + box_path_img + "c3.png)"
        });
        
        
        /* ------------------------------
        corner 4 */
        
        $(box_id + ' .c4').css({
            position: "absolute",
            left: "0px",
            top: (frame_height - box_corner_bottom_height) + "px",
            width: box_corner_width + "px",
            height: box_corner_bottom_height + "px",
            background: "url(" + box_path_img + "c4.png)"
        });
        
        
        /* ------------------------------
        edge 1 */
        
        $(box_id + ' .e1').css({
            position: "absolute",
            left: box_corner_width + "px",
            top: "0px",
            width: (frame_width - (box_corner_width * 2)) + "px",
            height: box_corner_top_height + "px",
            background: "url(" + box_path_img + "e1.png)"
        });
        
        
        /* ------------------------------
        edge 2 */
        
        $(box_id + ' .e2').css({
            position: "absolute",
            left: (frame_width - box_corner_width) + "px",
            top: box_corner_top_height + "px",
            width: box_corner_width + "px",
            height: (frame_height - box_corner_top_height - box_corner_bottom_height) + "px",
            background: "url(" + box_path_img + "e2.png)"
        });
        
        
        /* ------------------------------
        edge 3 */
        
        $(box_id + ' .e3').css({
            position: "absolute",
            left: box_corner_width + "px",
            top: (frame_height - box_corner_top_height) + "px",
            width: (frame_width - (box_corner_width * 2)) + "px",
            height: box_corner_bottom_height + "px",
            background: "url(" + box_path_img + "e3.png)"
        });
        
        
        /* ------------------------------
        edge 4 */
        
        $(box_id + ' .e4').css({
            position: "absolute",
            left: "0px",
            top: box_corner_top_height + "px",
            width: box_corner_width + "px",
            height: (frame_height - box_corner_top_height - box_corner_bottom_height) + "px",
            background: "url(" + box_path_img + "e4.png)"
        });
        
    });
}