if(typeof(jive) != "undefined"){

    /**
     * defines a simple Macro interface to mimic the RenderMacro class on the server
     */
    jive.rte.plugin.observationmacro = function(shortname, url, macrotag, settingsHuh, displayHuh, paramSets, params, enabled, button){
        var that = this;

        params = [{}];

        /**
         * gets the unique name for this macro
         * i.e. "code" or "youtube"
         */
        this.getName = function(){
            return shortname;
        }

        /**
         * gets the optional url for this macro
         */
        this.getUrl = function(){
            return url;
        }

        /**
         * returns true if it should be a button or not
         */
        this.isButton = function(){
            return button;
        }

        this.isEnabled = function(){
            return enabled;
        }

        this.isShowSettings = function(){
            return settingsHuh;
        }

        /**
         * Display in RTE Insert List?
         */
        this.isShowInMacroList = function(){
            return displayHuh;
        }

        /**
         * returns true if this macro accepts
         * raw text input, like a code macro,
         * or false if it doesn't, like
         * a youtube macro
         */
        this.getMacroType = function(){
            return macrotag;
        }

        /**
         * returns an array of allowed parameters
         */
        this.getAllowedParameters = function(){
            return params;
        }

        this.usesCustomBackground = function(){
            return true;
        }

        /**
         * update the position of $obj to properly display behind ele's content
         * in the RTE
         * @param rte the jive RTE object
         * @param ele the DOM element /inside/ the RTE proper. this should
         * be clear so show through to $obj behind it
         * @param $ele the DOM element /behind/ the RTE that shows rich content
         */
        this.refreshPosition= function(rte, ele, $ele){
//            var wattr = ele.getAttribute("width");
//            var hattr = ele.getAttribute("height");
//            var w, h;
////            // setup default size and
////            // get our width/height
//            if(hattr == null){
//                ele.setAttribute("height", "500");
//                h = 500;
//            }else{
//                h = jive.ext.x.xHeight(ele);
//            }
//            if(wattr == null){
//                ele.setAttribute("width", "900");
//                w = 900;
//            }else{
//                w = jive.ext.x.xWidth(ele);
//            }
                 //todo refactor this whole js file
            // set the width/height and offset
            // of our rich content to match
            if(that.shouldRefreshObservation($ele)) {  //todo this second ajax call should be unecessary we should be able to get the size in the from the normal div

                var annotate = 'false';
                if(ele.getAttribute("_annotatewithnotes")) {
                    annotate = ele.getAttribute("_annotatewithnotes");
                }

                $j.get('/view-observation.jspa', {view : 'inserted', observationID : ''+ele.getAttribute("_id"), annotateWithNotes : annotate}, function(data) {
                    that.resizeObservationDimensions(rte, ele, $ele, data);

                    that.updatePreviewContentPosition(ele, $ele); //todo this would probably be better in resizeObservationDimensions
                });
            }

            that.updatePreviewContentPosition(ele, $ele); //todo not sure we need this extra call
        }

        this.updatePreviewContentPosition = function (ele, $ele) {
            // get offset inside the RTE
            var t = jive.ext.x.xPageY(ele);
            var l = jive.ext.x.xPageX(ele);

            if($ele.css("top") != t) {
                $ele.css("top", t);
            }

            if($ele.css("left") != l) {
                $ele.css("left", l);
            }
        }

        /**
         * update the element's display w/ the latest
         * parameter value.
         */
        this.refresh = function(rte, ele){        
            var $ele = rte.getHiddenElementFor($j(ele).attr("_jivemacro_uid"));

            if($ele.data("init") == null){ 
                // because this is called *immediately* after the insert macro
                // the browser hasn't actually set the width/height correctly
                // so we need to wait for just a bit before refreshing the graph
                setTimeout(function(rte, ele, $ele){ return function(){
                    that.displayObservation(rte, ele, $ele);
                    that.updatePreviewContentPosition(ele, $ele);
                }}(rte, ele, $ele), 333);
            }else{
                that.displayObservation(rte, ele, $ele);
            }
        }

        this.displayObservation = function(rte, ele, $ele) {
            var uid = ele.getAttribute("_jivemacro_uid");
            if(that.shouldRefreshObservation($ele)) { //don't do the ajax request if we've already done it

            var annotate = 'false';
            if(ele.getAttribute("_annotatewithnotes")) {
                annotate = ele.getAttribute("_annotatewithnotes");
            }

            $j($ele).load('/view-observation.jspa', {view : 'inserted', observationID : ''+ele.getAttribute("_id"), annotateWithNotes : annotate}, function(data) {
                var tempRemoveID = "removeMe_" + ele.getAttribute("_id") + that.retrieveInsertionUUID($ele);

                if ($j('#' + tempRemoveID)) {
                    $j('#' + tempRemoveID).remove();
                }

                that.resizeObservationDimensions(rte, ele, $ele, data);

            });}
        }

        this.resizeObservationDimensions = function(rte, ele, $ele, retrievedObservationData) {
                var superRichContentMaxWidth = $j("#" + rte.getID() + "_tbl div.superRichContent").width();
                var tempRemoveID = "removeMe_" + ele.getAttribute("_id") + that.retrieveInsertionUUID($ele);
                $j($j("#" + rte.getID() + "_tbl div.superRichContent")).append("<div id='" + tempRemoveID +"' style='display:none;'>" + retrievedObservationData + '</div>');
                        //calculate observation size and reposition
                var insertedWidth = $j('#' + tempRemoveID).width();
                var insertedHeight = $j('#' + tempRemoveID).height();
                that.doSetResizedDimensions(ele, $ele, insertedWidth, insertedHeight, superRichContentMaxWidth);
        }

        this.shouldRefreshObservation = function($ele) {
            return ($j($ele).html().indexOf('insertionUUID') < 0); //don't do the ajax request if we've already done it
        }

        this.retrieveInsertionUUID = function($ele) {
            return $j($ele, '#insertionUUID').attr("id");
        }

        this.getEditorWindowHandle = function() {
            var w;

                if (typeof(window.parent.editor) == "undefined") {
                    w = window.parent.tinyMCE.activeEditor.getWin().parent;
                }
                else {
                    w = window.parent;
                }
            return w;
        }

       this.doSetResizedDimensions = function(ele, $ele, width, height, superRichContentMaxWidth) {
           $ele.width(superRichContentMaxWidth - 500 > width? superRichContentMaxWidth-500 : width);
           $ele.height(height);
           $j(ele).width(superRichContentMaxWidth - 500 > width? superRichContentMaxWidth-500 : width);
           $j(ele).height(height);
           $j(ele).attr('src', "/images/tiny_mce3/plugins/alignment/img/spacer.gif");
        }
    }

}