$.fn.i3colorPicker = function(settings)
{
    var config = {'size': 4};
    if (settings) $.extend(config, settings);

    $(this).addClass('__CP');
    $(this).each(function()
    {
        var ref = this;
        var sizex = this.offsetWidth;
        var sizey = this.offsetHeight;

        for (i=0; i<config.size; i++)
            for (j=0; j<config.size; j++)
                for (k=0; k<config.size; k++)
                    $(this).append("<div class='__CPField' style='position: relative; width: "+(sizex/Math.pow(config.size,2))+"px; height: "+(sizey/config.size)+"px; background-color: rgb("+(i*parseInt(255/(config.size-1)))+","+(j*parseInt(255/(config.size-1)))+","+(k*parseInt(255/(config.size-1)))+");'></div>");
                    
        $(this).append("<div class='__CPField' style='position: relative; width: "+(sizex/Math.pow(config.size,2))+"px; height: "+(sizey/config.size)+"px; background-color: #FFFFFF; border: 1px dashed #ff0000'></div>");

        $(this).find('.__CPField').click(function()
        {
            $(this).siblings().find('.selection').remove();
            $(this).append("<span class='selection'></span>");

            if (config.onclick)
                config.onclick($(this).css('backgroundColor'));
        });
    });
    
    return this;
}

if (!window.__SVG)
    window.__SVG = {objects: []};

window.__SVG.select = function(ev)
{
    var obj = ev.target;    
    $('.selected').removeClass('selected');
    $(obj).addClass('selected');

    var obj = ev.target;
    var svg = std.embed(obj);

    if (svg.config.onFieldSelect)
        svg.config.onFieldSelect(obj, $(svg).svg('get'));
}

window.__SVG.selected = function(svg)
{
    var select = $(".selected", svg.root());
    return select.length > 0 ? select[0] : null;
}

window.__SVG.moveS = function(ev)
{
    ev.preventDefault();

    var obj = ev.target;
    var svg = std.embed(obj);

    var apos = std.coords(ev);
    var ppos = std.pos(svg);

    obj.move = true;
    
    switch(parseInt($(obj).attr('angle')))
    {
        case 90: case 270:
            obj.spos = {y: parseInt($(obj).attr('x')), x: parseInt($(obj).attr('y'))};
        break;
        case 0: case 180: default:
            obj.spos = {x: parseInt($(obj).attr('x')), y: parseInt($(obj).attr('y'))};
        break;
    }

    obj.opos = {x: apos.x - ppos.x, y: apos.y - ppos.y};
}

window.__SVG.moveM = function(ev)
{
    ev.preventDefault();

    var obj = ev.target;
    var con = std.embed(obj);
    var svg = $(con).svg('get');
    obj = window.__SVG.selected(svg);

    var apos = std.coords(ev);
    var ppos = std.pos(con);
    var opos = {x: apos.x - ppos.x, y: apos.y - ppos.y}
        
    if (obj && obj.move)
    {
        var x = 0;
        var y = 0;
        var w = parseInt($(obj).attr('width'));
        var h = parseInt($(obj).attr('height'));

        switch(parseInt($(obj).attr('angle')))
        {
            case 90:
                x = obj.spos.y + (opos.y - obj.opos.y);
                y = obj.spos.x - (opos.x - obj.opos.x);
            break;
            case 180:
                x = obj.spos.x - (opos.x - obj.opos.x);
                y = obj.spos.y - (opos.y - obj.opos.y);
            break;
            case 270:
                x = obj.spos.y - (opos.y - obj.opos.y);
                y = obj.spos.x + (opos.x - obj.opos.x);
            break;
            case 0: default:
                x = obj.spos.x + (opos.x - obj.opos.x);
                y = obj.spos.y + (opos.y - obj.opos.y);                
        }

        window.__SVG.move(obj, {x: x, y: y});
    }
}

window.__SVG.moveE = function(ev)
{
    ev.preventDefault();

    var obj = ev.target;
    obj.move = false;
}

window.__SVG.move = function(obj, where)
{
    var w = parseInt($(obj).attr('width'));
    var h = parseInt($(obj).attr('height'));
    var num = $(obj).attr('num');
    var text = $("#text_"+num);
    var svg = std.embed(obj);
    
    $(obj).attr('x', where.x).attr('y', where.y);
    
    if ($(svg).attr('type') == 'listing' || $(svg).attr('type') == 'horizontalSmall' || $(svg).attr('type') == 'voucher')
        $(text).attr('x', where.x+w/2).attr('y', where.y+h);
    else
        $(text).attr('x', where.x+w/2).attr('y', where.y+h);
    
    //$("#path_"+$(obj).attr('num')).attr("d","M"+where.x+","+(where.y+h)+"L"+(where.x+w)+","+(where.y+h));   
}

window.__SVG.rotate = function(obj, val)
{
    var x = parseInt($(obj).attr('x'));
    var y = parseInt($(obj).attr('y'));
    var w = parseInt($(obj).attr('width'));
    var h = parseInt($(obj).attr('height'));
    var angle = parseInt($(obj).attr('angle'));
    var num = $(obj).attr('num');
    var text = $("#text_"+num);
    
    $(obj).attr('angle', val);

    $(obj).attr('transform', "rotate("+val+","+(x+w/2)+","+(y+h/2)+")");
    $(text).attr('transform', "rotate("+val+","+(x+w/2)+","+(y+h/2)+")");
    
    /*$("#path_"+num).attr("transform","rotate("+val+","+(x+w/2)+","+(y+h/2)+")");
    
    var text = $("#textC_"+num);
    var fs = parseInt($(text).attr('font-size'));
    
    switch(parseInt(val))
    {
        case 90:            
            $(text).attr("transform", "translate ("+(h/2-fs/3)+" 0)");
        break;
        case 180:
            $(text).attr("transform", "translate (0 "+(h/2-fs/3)+")");
        break;
        case 270:
            $(text).attr("transform", "translate ("+(-h/2+fs/3)+" 0)");
        break;
        case 0: default:
            $(text).attr("transform", "translate (0 "+(-h/2+fs/3)+")");
        break;
    }*/
}

window.__SVG.resize = function(obj, val)
{
    $(obj).attr('width', val.w).attr('height', val.h);

    var x = parseInt($(obj).attr('x'));
    var y = parseInt($(obj).attr('y'));
    var w = parseInt($(obj).attr('width'));
    var h = parseInt($(obj).attr('height'));
    
    //$("#path_"+$(obj).attr('num')).attr("d","M"+x+","+(y+h)+"L"+(x+w)+","+(y+h));
}

window.__SVG.fontSize = function(obj, val)
{
    var h = parseInt($(obj).attr('height'));
    $("#text_"+$(obj).attr('num')).attr("font-size",val).attr("dy", -val/4-h/4);
}

window.__SVG.transform = function(con, type)
{    
    var config = con.config;
    var types = con.types;
    var defaults = con.defaults[type];
    
    var svg = $(con).svg('get');
    var svgdoc = con.firstChild;
    
    var w = types[type].w;
    var h = types[type].h;
    
    $(con).attr('type',type);
    $(con).css('width', w).css('height', h);
    $(svgdoc).attr('width', w).attr('height', h);
    $('.background', svg.root()).attr('width', w-2).attr('height', h-2);
    
    var tF = 0; var iF = 0; var fF = 0;
    for(var i=0; i<svgdoc.childNodes.length; i++)
    {
        var obj = svgdoc.childNodes[i];
        if ($(obj).attr('num'))
        switch (obj.nodeName)
        {
            case 'ellipse':
                for (var index in defaults.foreground[fF].attr)                    
                    $(obj).attr(index, defaults.foreground[fF].attr[index]);
                fF++;
            break;
            case 'rect':
                window.__SVG.resize(obj, defaults.textFields[tF]);
                window.__SVG.move(obj, defaults.textFields[tF]);                
                window.__SVG.rotate(obj, defaults.textFields[tF].angle);
                tF++;
            break;
            case 'image':
                window.__SVG.move(obj, defaults.imageFields[iF]);
                window.__SVG.resize(obj, defaults.imageFields[iF]);
                iF++;
            break;
        }
    }
}

window.__SVG.toTop = function(obj)
{
    obj.parentNode.appendChild(obj);
}

window.__SVG.toBottom = function(obj)
{
    var parent = obj.parentNode;
    var first = obj.parentNode.firstChild;
    var rem = obj.parentNode.removeChild(obj);    
    
    while (first.nodeName == 'defs' || first.nodeName == 'script' || first.nodeName == 'style')
        first = first.nextSibling;
        
    parent.insertBefore(rem, first);
}

$.fn.i3advertSpace = function(settings)
{
    var config = {
        type: "square",
        onFieldSelect: {}};
        
    var types = {'square': {w: 250, h: 250}, 'horizontal': {w: 728, h: 90}, 'horizontalSmall': {w: 468, h: 60},
             'skyscraper': {w: 120, h:600}, 'listing': {w: 240, h: 120}, 'voucher': {w: 260, h: 320}};
             
    var defaults = {'square': {
                        textFields: [{x: 10, y: 10, w: 230, h: 40, angle: 0, fontSize: 10},{x: 10, y: 200, w: 230, h: 40, angle: 0, fontSize: 10}],
                        imageFields: [{x: 60, y: 60, w: 130, h: 130, angle: 0}],
                        foreground: [{node: 'ellipse', attr: {cx: 0, cy: 0, rx: 150, ry: 150, 'class': 'foreground'}},
                                     {node: 'ellipse', attr: {cx: 250, cy: 250, rx: 150, ry: 150, 'class': 'foreground'}}]
                        },
                    'horizontal': {
                        textFields: [{x: 10, y: 10, w: 610, h: 35, angle: 0, fontSize: 10},{x: 10, y: 50, w: 610, h: 35, angle: 0, fontSize: 10}],
                        imageFields: [{x: 630, y: 10, w: 70, h: 70, angle: 0}],
                        foreground: [{node: 'ellipse', attr: {cx: -10, cy: 100, rx: 300, ry: 100, 'class': 'foreground'}},
                                     {node: 'ellipse', attr: {cx: 600, cy: -20, rx: 300, ry: 125, 'class': 'foreground'}}]
                    },
                    'horizontalSmall': {
                        textFields: [{x: 10, y: 10, w: 390, h: 20, angle: 0, fontSize: 10},{x: 10, y: 30, w: 390, h: 20, angle: 0, fontSize: 10}],
                        imageFields: [{x: 410, y: 10, w: 40, h: 40, angle: 0}],
                        foreground: [{node: 'ellipse', attr: {cx: 0, cy: 70, rx: 270, ry: 70, 'class': 'foreground'}},
                                     {node: 'ellipse', attr: {cx: 485, cy: 0, rx: 200, ry: 70, 'class': 'foreground'}}]
                    },
                    'skyscraper': {
                        textFields: [{x: -150, y: 230, w: 470, h: 40, fontSize: 10, angle: 90},{x: -200, y: 230, w: 470, h: 40, fontSize: 10, angle: 90}],
                        imageFields: [{x: 15, y: 500, w: 85, h: 85, angle: 0}],
                        foreground: [{node: 'ellipse', attr: {cx: 10, cy: 90, rx: 120, ry: 400, 'class': 'foreground'}},
                                     {node: 'ellipse', attr: {cx: 10, cy: 600, rx: 200, ry: 70, 'class': 'foreground'}}]
                    },
                    'listing': {
                        textFields: [{x: 10, y: 10, w: 120, h: 40, angle: 0, fontSize: 10},{x: 10, y: 60, w: 120, h: 40, angle: 0, fontSize: 10}],
                        imageFields: [{x: 140, y: 10, w: 100, h: 100, angle: 0}],
                        foreground: [{node: 'ellipse', attr: {cx: 20, cy: 20, rx: 260, ry: 36, 'class': 'foreground'}},
                                     {node: 'ellipse', attr: {cx: 0, cy: 0, rx: 0, ry: 0, 'class': 'foreground'}}]
                    },
                    'voucher': {
                        textFields: [{x: 20, y: 10, w: 220, h: 40, angle: 0, fontSize: 10},{x: 20, y: 260, w: 220, h: 40, angle: 0, fontSize: 10}],
                        imageFields: [{x: 50, y: 80, w: 160, h: 160, angle: 0}],
                        foreground: [{node: 'ellipse', attr: {cx: 130, cy: 10, rx: 200, ry: 70, 'class': 'foreground'}},
                                     {node: 'ellipse', attr: {cx: 130, cy: 300, rx: 200, ry: 70, 'class': 'foreground'}}]
                    }
    }

    if (settings) $.extend(config, settings);

    // fix for $.extend
    for (var index in defaults)
        for (var i=0; i<config.imageFields.length; i++)
            defaults[index].imageFields[i].src = config.imageFields[i].src;
    $.extend(config, defaults[config.type]);

    if (!$(this).svg)
        window.alert('No SVG support');
    else
        $(this).each(function()
        {
            this.config = config;
            this.types = types;
            this.defaults = defaults;
            
            var num = window.__SVG.objects.length;
            //$(this).html('');
            
            $(this).css('width', types[config.type].w).css('height', types[config.type].h);
            $(this).attr('type',config.type);
            if($(this).html().length > 0)
            {
                var content = $(this).html();
                
                $(this).html('');
                $(this).svg({onLoad: function(svg)
                {
                    svg.add(content);
                    
                    // these fixes are either due to jquery/svgdom inproper assignment of xlink attributes
                    // not using the xlink namespace or whatever the hell is going round there - it's one of wtf's
                    // can't even reassign the attributes using setAttributeNS method
                    
                    // fix for image elements
                    $('img', svg.root()).each(function(index)
                    {
                        var ref = $(this);
                        $(this).remove();

                        var image = svg.image(ref.attr('x'), ref.attr('y'), ref.attr('width'), ref.attr('height'), config.imageFields[index].src ? config.imageFields[index].src : ref.attr('xlink:href'), {id: ref.attr('id'), "class": ref.attr('class'), fill: ref.attr('fill'), strokeWidth: ref.attr('strokeWidth'), onmousedown: "top.window.__SVG.select(evt); top.window.__SVG.moveS(evt)", onmouseup: "top.window.__SVG.moveE(evt)" });
                        
                        for (var i=0; i<this.attributes.length; i++)
                        {
                            if (this.attributes[i].nodeName != 'xlink:href' && this.attributes[i].nodeName != 'href')
                                $(image).attr(this.attributes[i].nodeName,this.attributes[i].nodeValue);
                            $(image).attr('type','image');
                        }
                    });


                    // fix for textpath elements
                    /*$('textpath', svg.root()).each(function()
                    {
                        var ref = $(this);                        
                        var parent = $(this).parent()[0];
                        var num = $(parent).attr('num');
                        var content = $(this).children()[0];

                        $(this).remove();
                        var texts = svg.createText(); 
                        var textpath = svg.textpath(parent, ref.attr('xlink:href'), texts.span(content.firstChild ? content.firstChild.nodeValue : "", {id: 'text_'+num, num: num}), {"startOffset": "50%"});

                        for (var i=0; i<this.attributes.length; i++)
                            if (this.attributes[i].nodeName != 'xlink:href' && this.attributes[i].nodeName != 'href')
                                $(textpath).attr(this.attributes[i].nodeName,this.attributes[i].nodeValue);
                    });*/
                    
                    $('.selected', svg.root()).removeClass('selected');
                    $('rect').addClass('helper');
                    
                    $('circle', svg.root()).each(function()
                    {
                        window.__SVG.toTop(this);
                    });
                                        
                    $('rect', svg.root()).each(function()
                    {
                        if (!$(this).hasClass('background'))
                            window.__SVG.toTop(this);
                        else
                            window.__SVG.toBottom(this);
                    });
                    
                    $('text', svg.root()).each(function()
                    {
                        window.__SVG.toTop(this);
                    });
                    
                    $(svg.root()).attr('onmousemove',"top.window.__SVG.moveM(evt)");      
                }
                });
            }
            else
            $(this).svg({onLoad: function(svg)
            {
                var defs = svg.defs();
                svg.style(".selected, .selected.helper { stroke: #FFFF00 }");
                svg.style(".helper { stroke: #000000; }");
                svg.style("img, image {fill: #000000; }");
                svg.rect(1,1,this.offsetWidth-3,this.offsetHeight-3, {fill: "#FFFFFF", "class": "background", onmousedown: "top.window.__SVG.select(evt)"});
                
                for (var i=0; i<config.foreground.length; i++)
                    switch(config.foreground[i].node)
                    {
                        case 'ellipse':
                            var attr = config.foreground[i].attr;
                            svg.ellipse(attr.cx, attr.cy, attr.rx, attr.ry, {"class": attr.className, fill: "#FFFFFF", num: i});
                        break;
                    }

                for (var i=0; i<config.textFields.length; i++)
                {
                    var val = config.textFields[i];
                    var rect = svg.rect(val.x, val.y, val.w, val.h, {id: 'rect_'+i, num: i, "class": 'helper', fill: "#FFFFFF", strokeWidth: 1, onmousedown: "top.window.__SVG.select(evt); top.window.__SVG.moveS(evt)", onmouseup: "top.window.__SVG.moveE(evt)"});

                    // fucking batik doesn't render paths
                    //var path = svg.createPath();
                    //svg.path(defs, path.move(val.x,val.y+val.h).line(val.x+val.w,val.y+val.h), {id: "path_"+i});

                    var texts = svg.createText();
                    var text = svg.text("", {"x": val.x+val.w/2, "y": val.y+val.h, "dy": (-val.fontSize/4-val.h/4), "text-anchor": "middle", "font-family": "Verdana", "font-size": val.fontSize, fill: "black", id: 'text_'+i, num: i});
                    
                    //svg.textpath(text, "#path_"+i, texts.span("", {id: 'text_'+i, num: i}), {"startOffset": "50%"});
                    //if (val.angle)
                        //window.__SVG.rotate(rect, val.angle);
                }

                for (var i=0; i<config.imageFields.length; i++)
                {
                    var num = config.textFields.length+i;
                    var val = config.imageFields[i];                    
                    svg.image(val.x, val.y, val.w, val.h, val.src ? val.src : config.placeholder, {id: 'image_'+num, num: num, "class": 'helper', strokeWidth: 1, onmousedown: "top.window.__SVG.select(evt); top.window.__SVG.moveS(evt)", onmouseup: "top.window.__SVG.moveE(evt)", type: 'image'});
                }
                
                $('rect', svg.root()).each(function()
                {
                    window.__SVG.toTop(this);
                });
                
                $('text', svg.root()).each(function()
                {
                    window.__SVG.toTop(this);
                });
                
                $(svg.root()).attr('onmousemove',"top.window.__SVG.moveM(evt)");
            }                      
            });
            
            $(this).attr('num',num);
            $(this.firstChild).attr('num',num).attr('id','svg_'+num);
            window.__SVG.objects.push(this);
        });
}