var CanvasUL = new Class({
options: {
x: 0,
y: 0,
glow: 0,
shadow: 0,
border: 0,
width: 100,
height: 100,
corners: [5, 5, 5, 5],
borderStartColor: [240, 240, 240, 1],
borderStopColor: [240, 240, 240, 1],
bodyStartColor: [255, 255, 255, 1],
bodyStopColor: [255, 255, 255, 1],
glowColor: [0, 0, 0],
shadowColor: [0, 0, 0],
gradientMode: 'vertical',
zindex: -1
},
Implements: [Events, Options],
initialize: function() {
var params = Array.link(arguments, {'options': Object.type});
this.setOptions(params.options || {});
this.canvas = new Canvas({
'class': 'canvasUnderlayer',
'height': this.options.height,
'width': this.options.width,
'styles': {
'position': 'absolute',
'left': this.options.x,
'top': this.options.y,
'z-index': this.options.zindex
}
});
$extend(this.options, {
bodyWidth: this.options.width - this.options.glow - Math.max(this.options.glow, this.options.shadow),
bodyHeight: this.options.height - this.options.glow - Math.max(this.options.glow, this.options.shadow)
});
/* Glow drawing. */
if(this.options.glow > 0) {
for(var i = 0; i < this.options.glow; i ++) {
this.options.glowColor[3] = 0.2 / this.options.glow * i;
this.drawRectangle({
x: i,
y: i,
width: this.options.bodyWidth + (this.options.glow - i) * 2,
height: this.options.bodyHeight + (this.options.glow - i) * 2,
gradientStartColor: this.options.glowColor,
gradientStopColor: this.options.glowColor,
corners: this.options.corners.map(function(item) { return item + i + this.options.border }, this)
});
}
}
/* Shadow drawing. */
if(this.options.shadow > 0) {
for(var i = 0; i < this.options.shadow; i ++) {
this.options.shadowColor[3] = 0.2 * (1 - i / this.options.shadow);
this.drawRectangle({
x: this.options.glow + 1 + i,
y: this.options.glow + 1 + i,
width: this.options.bodyWidth,
height: this.options.bodyHeight,
gradientStartColor: this.options.shadowColor,
gradientStopColor: this.options.shadowColor,
corners: this.options.corners.map(function(item) { return item + i + this.options.border }, this)
});
}
}
/* Border drawing. */
if(this.options.border > 0) {
this.drawRectangle({
x: this.options.glow,
y: this.options.glow,
width: this.options.bodyWidth,
height: this.options.bodyHeight,
gradientStartColor: this.options.borderStartColor,
gradientStopColor: this.options.borderStopColor,
corners: this.options.corners.map(function(item) { return item > 0 ? item + this.options.border : 0 }, this)
});
}
/* Body drawing. */
this.drawRectangle({
x: this.options.glow + this.options.border,
y: this.options.glow + this.options.border,
width: this.options.bodyWidth - this.options.border * 2,
height: this.options.bodyHeight - this.options.border * 2,
gradientStartColor: this.options.bodyStartColor,
gradientStopColor: this.options.bodyStopColor,
corners: this.options.corners
});
return this.canvas;
},
drawRectangle: function(options) {
var o = $merge(this.options, options);
this.context = this.canvas.getContext('2d');
this.context.beginPath();
if(o.gradientMode == 'vertical') { this.fillStyle = this.context.createLinearGradient(0, 0, 0, o.height); }
else { this.fillStyle = this.context.createLinearGradient(0, 0, o.width, 0); }
this.fillStyle.addColorStop(0, this.getRGBA(o.gradientStartColor));
this.fillStyle.addColorStop(1, this.getRGBA(o.gradientStopColor));
this.context.fillStyle = this.fillStyle;
this.context.moveTo(o.x + o.corners[0], o.y);
this.context.lineTo(o.x + o.width - o.corners[1], o.y);
this.context.quadraticCurveTo(o.x + o.width, o.y, o.x + o.width, o.y + o.corners[1]);
this.context.lineTo(o.x + o.width, o.y + o.height - o.corners[2]);
this.context.quadraticCurveTo(o.x + o.width, o.y + o.height, o.x + o.width - o.corners[2], o.y + o.height);
this.context.lineTo(o.x + o.corners[3], o.y + o.height);
this.context.quadraticCurveTo(o.x, o.y + o.height, o.x, o.y + o.height - o.corners[3]);
this.context.lineTo(o.x, o.y + o.corners[0]);
this.context.quadraticCurveTo(o.x, o.y, o.x + o.corners[0], o.y);
this.context.fill();
},
getRGBA: function(rgba) {
if(rgba.length == 3) return 'rgba(' + rgba.join(', ') + ', 1)';
if(rgba.length == 4) return 'rgba(' + rgba.join(', ') + ')';
return null
}
});
var CanvasULElemet = new Class({
Implements: [Events, Options],
Extends: CanvasUL,
initialize: function() {
var params = Array.link(arguments, {'element': $defined, 'options': Object.type});
this.element = params.element;
if(!['relative', 'absolute', 'fixed'].contains(this.element.getStyle('position'))) this.element.setStyle('position', 'relative');
this.element.setStyle('background', 'none');
if(!params.options.width) params.options.width = this.element.getSize().x;
if(!params.options.height) params.options.height = this.element.getSize().y;
this.canvas = this.parent(params.options);
this.canvas.inject(this.element, 'bottom');
return this;
}
});
Element.implement({
CanvasULElemet: function(options) {
var ULElement = new CanvasULElemet(this, options);
return this;
}
});