//updates the svg preserveAspectRatio property
$(function(){

    var $target  = $( "#pAR_interactive2" ),
        x_string = "", //xMin, xMid, xMax
        z_string = "", //meet, slice, none - if none, x_string === ""

        methods = {
            update_X : function( $this ){

                $( ".pAR_X" ).find( "a" ).removeClass( "active" );
                x_string = "";

                if( $this !== undefined ){

                    x_string = $this.data( "val" ) + " ";
                    $this.addClass( "active" );

                    if( z_string === "none" || z_string === "" ){

                        methods.update_Z( $( $( ".pAR_Z" ).find( "a" )[ 0 ] ) );
                    }
                }
            },
            update_Z : function( $this ){
                $( ".pAR_Z" ).find( "a" ).removeClass( "active" );
                z_string = "";

                if( $this !== undefined ){

                    z_string = $this.data( "val" );
                    $this.addClass( "active" );
                }

                if( z_string === "none" ){
                    methods.update_X( undefined );
                }
                else if( x_string === "" ){
                    methods.update_X( $( $( ".pAR_X" ).find( "a" )[ 0 ] ) );
                }
            },
            updatePAR : function(){

                var str = x_string + z_string,
                    pAR_i = document.getElementById( "pAR_interactive2" );

                $( "#pAR_out_target" ).text( str );
                pAR_i.setAttribute( "preserveAspectRatio", str );
            }
        };

    $( ".pAR_controls" ).delegate( "a", "click", function( e ){

        var $this = $( this );

        methods[ $this.data( "type" ) ]( $this );
        methods.updatePAR();
        return false;
    } );
});

//makes the SVG resizable and the drag handle draggable
$(function(){

    var $handle    = $( "#pAR_resize_handle" ),
        $container = $( "#pAR_interactive_container" ),

        startMouseMove = function( $dW, $dH ){

            $( document ).on( "mousemove.pAR", function( event ){

                var $cO   = $container.offset();
                    $eW   = event.pageX - $cO.left,
                    $eH   = event.pageY - $cO.top,
                    reset = false;
                
                //min size for resizing
                if( $eW < 20 ){ $eW = 20; }
                if( $eH < 20 ){ $eH = 20; }
              
                //max size for resizing
                if( $eW >= 300 ){ $eW = 300; }
                if( $eH >= 300 ){ $eH = 300; }

                $container.width( $eW - $dW );
                $container.height( $eH - $dH );
            } );
        },
        stopMouseMove = function(){
            $( document ).off( "mousemove.pAR" );
        };

    //start dragging
    $handle.on( "mousedown", function( event ){

        var $cO = $container.offset(),
            $dW = event.pageX - $cO.left - $container.width(),
            $dH = event.pageY - $cO.top  - $container.height();

        startMouseMove( $dW, $dH );
        return false;
    } );

    //stop default action
    $handle.on( "click", function( event ){
        return false;
    } );

    //stop dragging
    $( document ).on( "mouseup", function( event ){

        stopMouseMove();
        return false;
    } );
});