(function ($) {
  $.fn.watch = function (property, id, fn) {
    id += "Watcher";

    return this
      .data(id, {val: null, fn: watcher(property, id)})
      .bind("DOMAttrModified", this.data(id).fn);
  };

  $.fn.unwatch = function (id) {
    id += "Watcher";
    var data = this.data(id);
    if(!data)
      return this;

    return this
      .unbind("DOMAttrModified", data.fn)
      .removeData(id);
  };

  function watcher (property, id) {
    return function (event) {
      // First statement "filters" events from child nodes
      if(this !== event.originalTarget || event.attrName !== "style")
        return false;

      var $this = $(this),
          new_val = $this.css(property),
          data = $this.data(id);
      if(!data)
        return false;

      if(new_val !== data.val)
        return data.fn.call(this, data.val = new_val);
    }
  }
})(jQuery)

// Example:
$(".scrollbar").watch("top", "offset", function (top) { console.log(this, top) });
$(".scrollbar").unwatch("offset");

$( 'input' ).watch( ['display','value'], function( data, i ) {
    alert( data.props[ i ] + ' changed from ' + data.prevVals[ i ] + ' to ' + data.vals[ i ] );
});

$( 'div' ).watch( 'width', function( data, i ) { // Prevent the width from changing
    $( this )
        .watchPause()
        .width( data.prevVals[ i ] )
        .watchResume();
});

(function( $, undefined ) {
    $.fn.watch = function(props, func, id, interval) {
        /// <summary>
        /// Allows you to monitor changes in a specific
        /// CSS property of an element by polling the value.
        /// when the value changes a function is called.
        /// The function called is called in the context
        /// of the selected element (ie. this)
        /// </summary>
        /// <param name="prop" type="String">CSS Properties to watch.</param>
        /// <param name="func" type="Function">Function called when the value has changed.</param>
        /// <param name="id" type="String">A unique ID that identifies this watch instance on this element</param>
        /// <param name="interval" type="Int">A unique ID that identifies this watch instance on this element</param>
        /// <returns type="jQuery" /> 
        if ( !$.isFunction( func ) || ! props ) {
            return this;
        }
        if ( !id ) {
            id = '_watcher';
        }
        if ( typeof props == 'string' ) {
            props = props.split( ',' );
        }
        if ( !$.isArray( props ) ) {
            return this;
        }
        if ( !interval ) {
            interval = 200;
        }
 
        function __watcher( id, i ) {
            var el = $(this),
                changed = false,
                w = $.data( this, id ),
                newVal = el.css( w.props[i] );
            if (w.vals[i] != newVal) {
                w.prevVals[i] = w.vals[i];
                w.vals[i] = newVal;
                if ( w.pause == false || ( w.pause != true && $.inArray( w.props[i], w.pause ) == -1 ) ) {
                    w.func.call( this, w, i );
                }
            }
        }
 
        return this.each(function() {
            var _t = this,
                el = $( this ),
                fnc = function() {
                    var _prop = window.event.attrChange ? window.event.attrName : window.event.propertyName;
                    if ( _prop != undefined ) {
                        _prop = _prop.indexOf( '.' ) > -1 ? _prop.split( '.' )[ 1 ] : _prop;
                        var w = $.data( _t, id );
                        var index = $.inArray( _prop, w.props );
                        if ( index > -1 ) {
                            __watcher.call( _t, id, index );
                        }
                    }
                },
                data = {
                    props: props,
                    func: func,
                    vals: [],
                    prevVals: [],
                    _fnc: fnc,
                    interval: interval,
                    itId: false,
                    pause: false
                };
            
            $.each( props, function(i) {
                data.prevVals[ i ] = data.vals[ i ] = el.css( props[ i ] );
            });
 
            if ( typeof( this.onpropertychange ) == 'object' ) {
                el.bind( 'propertychange.' + id, fnc);
            } else if ( $.browser.mozilla ) {
                el.bind( 'DOMAttrModified.' + id, fnc);
            } else {
                data.itId = setInterval( fnc, interval );
            }
            $.data( this, id, data );
        });
    };
    $.fn.unwatch = function( props, id ) {
        if ( !id ) {
            id = '_watcher';
        }
        if ( props ) {
            if ( typeof props == 'string' ) {
                props = props.split( ',' );
            }
            if ( !$.isArray( props ) ) {
                props = false;
            }
        }
 
        return this.each(function() {
            var el = $( this ),
                w = $.data( this, id );
            if ( $.isPlainObject( w ) && w.props ) {
                if ( props ) {
                    w.props = $.grep( w.props, function( _prop ) {
                        return $.inArray( _prop, props ) == -1;
                    });
                }
                if ( w.props.length == 0 || !props ) {
                    if ( typeof( this.onpropertychange ) == 'object' ) {
                        el.unbind( 'propertychange.' + id );
                    } else if ($.browser.mozilla) {
                        el.unbind( 'DOMAttrModified.' + id );
                    } else {
                        clearInterval( w.itId );
                    }
                    $.removeData( this, id );
                } else {
                    $.data( this, id, w );
                }
            }
        });
    };
    $.fn.watchPause = function( props, id ) {
        if ( !id ) {
            id = '_watcher';
        }
        if ( props ) {
            if ( typeof props == 'string' ) {
                props = props.split( ',' );
            }
            if ( !$.isArray( props ) ) {
                props = true;
            }
        } else {
            props = true;
        }
        return this.each(function() {
            var w = $.data( this, id );
            if ( $.isPlainObject( w ) ) {
                if ( props != true ) {
                    var p = w.pause || [];
                    w.pause = p.concat( props );
                } else {
                    w.pause = true;
                    if ( w.itId ) {
                        clearInterval( w.itId );
                        w.itId = true;
                    }
                }
                $.data( this, id, w );
            }
        });
    };
    $.fn.watchResume = function( props, id ) {
        if ( !id ) {
            id = '_watcher';
        }
        if ( props ) {
            if ( typeof props == 'string' ) {
                props = props.split( ',' );
            }
            if ( !$.isArray( props ) ) {
                props = false;
            }
        } else {
            props = false;
        }
        return this.each(function() {
            var w = $.data( this, id );
            if ( $.isPlainObject( w ) ) {
                if ( props != false ) {
                    var p = w.pause;
                    if ( p != true ) {
                        p = $.grep( p, function( _prop ) {
                            return $.inArray( _prop, props ) == -1;
                        });
                        if ( p.length == 0 ) {
                            props = false;
                        }
                    }
                }
                w.pause = props;
                if ( w.itId == true ) {
                    w.itId = setInterval( w._fnc, w.interval );
                }
                $.data( this, id, w );
            }
        });
    };
 
}( jQuery ));

jQuery(document).ready( function() {
    jQuery('#Col1 ,#Col2 ,#col3').find('div, dd, dt, ul, ol, td').watch('display, height', function(){
    jQuery('#Col1 ,#Col2 ,#col3').removeAttr('style');
    jQuery('#Col1 ,#Col2 ,#col3').matchHeights();
});

    jQuery('#JMRightColInner ,#JMCenterColInner ,#JMLeftColInner, .pane-slider').find('*').watch('display, height', function(){
        jQuery('#JMRightColInner ,#JMCenterColInner ,#JMLeftColInner').removeAttr('style');
        jQuery('#JMRightColInner ,#JMCenterColInner ,#JMLeftColInner').equalHeightColumns();
    });