[JS] Image Cropper naar OOP

[DiLDoG]

Ik ben bezig met een scriptje om serverside plaatjes te croppen. (dus area selecteren en coördinaten naar server doorsturen).

Dit is wat ik nu heb: (orrigineel)
http://joris.magicfly.nl/resize/nooop/

Met bijbehoorende (messy) js:
http://joris.magicfly.nl/resize/nooop/imageselect.js


Het werkt zo op zich wel, maar ik wil nog een aantal functies toevoegen zoals force-aspect-ratio optioneel enz. Nu zou ik hier graag een OOP scriptje van maken omdat het anders een beetje te onoverzichtelijk wordt. Ik snap wel een beetje hoe en wat en heb in andere talen ook wel met objects gewerkt, maar het wil hier niet helemaal lukken.

Ik zou het liefst een DIV extenden maar ik had begrepen dat dit alleen in op gecko gebasseerde browsers werkt. Ik doe nu

code:

imageCropTool.prototype.createCropBox = function()
{
    // Create crop selection box
    this.box = document.createElement("div");
    this.box.className = "cropselection";
    this.box.onmousedown = this.initDrag
    
    this.container.appendChild(this.box);   
}

imageCropTool.prototype.initDrag = function(e)
{
    document.onmousemove = this.dragBla;
}

imageCropTool.prototype.dragBla= function(e)
{
    // ...
}

die initDrag wordt wel aangeroepen, maar die dragBla niet (omdat hij, denk ik dragBla van de div zelf aanroept) Hoe kan ik dit het beste oplossen, of pak ik dit helemaal verkeerd aan zo?

Alle tips zijn welkom.

OOP versie in progress
http://joris.magicfly.nl/resize/

JS:
http://joris.magicfly.nl/resize/imageselect.js


[edit]
oops ok sorry.
ps werkt nu alleen nog in firefox. dat dus.
en alleen rechts onder draghandle doet t nu nog zoals het hoort (met ratio dinges dan)

[ Voor 6% gewijzigd door DiLDoG op 21-09-2005 12:16 ]

[whoami]

Javascript hoort thuis in W&G; daar zitten de JS - cracks.

p&w->w&g.

[Amras]

JavaScript:

imageCropTool.prototype.initDrag = function(e)
{
    var self = this;
    document.onmousemove = function()
    {
        self.dragBla;
    }
}

Doetie het zo wel?

[DiLDoG]

code:

imageCropTool.prototype.initDrag = function(e)
{
    var self = this;
    document.onmousemove = function()
    {
        debug("move");
        self.dragBla();
    }
}

Error: self.dragBla is not a function
Source File: http://joris.magicfly.nl/resize/imgselect.js
Line: 104


en zonder haakjes doet ie helemaal niets
maar ik heb het idee dat dit nog steeds een beetje onlogish is.