Path.com Test

by Songhun

HTML

<script src="https://github.com/DmitryBaranovskiy/raphael/raw/1.0/raphael-min.js"></script>
<h1>Path.com Menu Test</h1>
<div id="menu_area" style="width:320px;height:450px;background:#333"></div>

JavaScript

$.widget("path.menu", {
    _create: function() {
        var elArea = $("#" + this.option("canvas"));
        var width = elArea.width();
        var height = elArea.height();
        var paper = Raphael(this.option("canvas"), width, height);

        this.option("original_position", {x:this.option("position"),y:(height-this.option("position"))});

        this._makeSub(paper);
        this._makeMain(paper);

    },
    _makeMain : function(paper){
        var x = this.option("original_position").x;
        var y = this.option("original_position").y;
        var c = paper.circle(x, y, this.option("main_size"));
        var flag = 0;
        var trans = ["r45","r0"];
        c.attr({font: "12px Fontin-Sans, Arial", fill: "#cb2c16", text:"test", stroke:"#fff", "stroke-width":this.option("main_stroke")});
        var t = paper.text(x,y,this.option("main_txt")).attr({"font": '25px Fontin-Sans, Arial', stroke: "none", fill: "#fff"});

        var changeStatus = function(){
            t.stop().animate({transform:trans[flag]}, 500, "<");
            this._setSubMenuPosition(flag);
            flag = ( flag == 0 )?1:0;
        };

        c.click($.proxy(changeStatus,this));
        t.click($.proxy(changeStatus,this));

    },
    _makeSub : function(paper){
        this.subs = [];
        var x = this.option("original_position").x;
        var y = this.option("original_position").y;
        var space = this.option("sub_degree") / (this.option("sub_counter")-1);
        var start_degree = parseInt((90 - this.option("sub_degree")) / 2);
        for( var i = 0 ; i < this.option("sub_counter"); i++){
            var c = paper.circle(x, y, this.option("sub_size"));
            c.attr({font: "12px Fontin-Sans, Arial", fill: "#44403d", text:"test", stroke:"#fff", "stroke-width":this.option("sub_stroke")});
            var t = paper.text(x,y,this.option("sub_txt")).attr({"font": '15px Fontin-Sans, Arial', stroke: "none", fill: "#fff"});
            var degree = (start_degree...