function parseStateRef(ref, current) {
    var preparsed = ref.match(/^\s*({[^}]*})\s*$/),
        parsed;
    if (preparsed) ref = current + '(' + preparsed[1] + ')';
    parsed = ref.replace(/\n/g, " ").match(/^([^(]+?)\s*(\((.*)\))?$/);
    if (!parsed || parsed.length !== 4) throw new Error("Invalid state ref '" + ref + "'");
    return {
        state: parsed[1],
        paramExpr: parsed[3] || null
    };
}

function stateContext(el) {
    var stateData = el.parent().inheritedData('$uiView');

    if (stateData && stateData.state && stateData.state.name) {
        return stateData.state;
    }
}

/**
 * @ngdoc directive
 * @name ui.router.state.directive:ui-sref
 *
 * @requires ui.router.state.$state
 * @requires $timeout
 *
 * @restrict A
 *
 * @description
 * A directive that binds a link (`<a>` tag) to a state. If the state has an associated
 * URL, the directive will automatically generate & update the `href` attribute via
 * the {@link ui.router.state.$state#methods_href $state.href()} method. Clicking
 * the link will trigger a state transition with optional parameters.
 *
 * Also middle-clicking, right-clicking, and ctrl-clicking on the link will be
 * handled natively by the browser.
 *
 * You can also use relative state paths within ui-sref, just like the relative
 * paths passed to `$state.go()`. You just need to be aware that the path is relative
 * to the state that the link lives in, in other words the state that loaded the
 * template containing the link.
 *
 * You can specify options to pass to {@link ui.router.state.$state#go $state.go()}
 * using the `ui-sref-opts` attribute. Options are restricted to `location`, `inherit`,
 * and `reload`.
 *
 * @example
 * Here's an example of how you'd use ui-sref and how it would compile. If you have the
 * following template:
 * <pre>
 * <a ui-sref="home">Home</a> | <a ui-sref="about">About</a> | <a ui-sref="{page: 2}">Next page</a>
 *
 * <ul>
 *     <li ng-repeat="contact in contacts">
 *         <a ui-sref="contacts.detail({ id: contact.id })">{{ contact.name }}</a>
 *     </li>
 * </ul>
 * </pre>
 *
 * Then the compiled html would be (assuming Html5Mode is off and current state is contacts):
 * <pre>
 * <a href="#/home" ui-sref="home">Home</a> | <a href="#/about" ui-sref="about">About</a> | <a href="#/contacts?page=2" ui-sref="{page: 2}">Next page</a>
 *
 * <ul>
 *     <li ng-repeat="contact in contacts">
 *         <a href="#/contacts/1" ui-sref="contacts.detail({ id: contact.id })">Joe</a>
 *     </li>
 *     <li ng-repeat="contact in contacts">
 *         <a href="#/contacts/2" ui-sref="contacts.detail({ id: contact.id })">Alice</a>
 *     </li>
 *     <li ng-repeat="contact in contacts">
 *         <a href="#/contacts/3" ui-sref="contacts.detail({ id: contact.id })">Bob</a>
 *     </li>
 * </ul>
 *
 * <a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>
 * </pre>
 *
 * @param {string} ui-sref 'stateName' can be any valid absolute or relative state
 * @param {Object} ui-sref-opts options to pass to {@link ui.router.state.$state#go $state.go()}
 */
$StateRefDirective.$inject = ['$state', '$timeout'];

function $StateRefDirective($state, $timeout) {
    var allowedOptions = ['location', 'inherit', 'reload'];

    return {
        restrict: 'A',
        require: ['?^uiSrefActive', '?^uiSrefActiveEq'],
        link: function(scope, element, attrs, uiSrefActive) {
            var ref = parseStateRef(attrs.uiSref, $state.current.name);
            var params = null,
                url = null,
                base = stateContext(element) || $state.$current;
            var isForm = element[0].nodeName === "FORM";
            var attr = isForm ? "action" : "href",
                nav = true;

            var options = {
                relative: base
            };
            var optionsOverride = scope.$eval(attrs.uiSrefOpts) || {};
            angular.forEach(allowedOptions, function(option) {
                if (option in optionsOverride) {
                    options[option] = optionsOverride[option];
                }
            });

            var update = function(newVal) {
                if (newVal) params = newVal;
                if (!nav) return;

                var newHref = $state.href(ref.state, params, options);

                var activeDirective = uiSrefActive[1] || uiSrefActive[0];
                if (activeDirective) {
                    activeDirective.$$setStateInfo(ref.state, params);
                }
                if (!newHref) {
                    nav = false;
                    return false;
                }
                element[0][attr] = newHref;
            };

            if (ref.paramExpr) {
                scope.$watch(ref.paramExpr, function(newVal, oldVal) {
                    if (newVal !== params) update(newVal);
                }, true);
                params = scope.$eval(ref.paramExpr);
            }
            update();

            if (isForm) return;

            element.bind("click", function(e) {
                var button = e.which || e.button;
                if (!(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || element.attr('target'))) {
                    // HACK: This is to allow ng-clicks to be processed before the transition is initiated:
                    var transition = $timeout(function() {
                        $state.go(ref.state, params, options);
                    });
                    e.preventDefault();

                    e.preventDefault = function() {
                        $timeout.cancel(transition);
                    };
                }
            });
        }
    };
}

/**
 * @ngdoc directive
 * @name ui.router.state.directive:ui-sref-active
 *
 * @requires ui.router.state.$state
 * @requires ui.router.state.$stateParams
 * @requires $interpolate
 *
 * @restrict A
 *
 * @description
 * A directive working alongside ui-sref to add classes to an element when the
 * related ui-sref directive's state is active, and removing them when it is inactive.
 * The primary use-case is to simplify the special appearance of navigation menus
 * relying on `ui-sref`, by having the "active" state's menu button appear different,
 * distinguishing it from the inactive menu items.
 *
 * ui-sref-active can live on the same element as ui-sref or on a parent element. The first
 * ui-sref-active found at the same level or above the ui-sref will be used.
 *
 * Will activate when the ui-sref's target state or any child state is active. If you
 * need to activate only when the ui-sref target state is active and *not* any of
 * it's children, then you will use
 * {@link ui.router.state.directive:ui-sref-active-eq ui-sref-active-eq}
 *
 * @example
 * Given the following template:
 * <pre>
 * <ul>
 *   <li ui-sref-active="active" class="item">
 *     <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
 *   </li>
 * </ul>
 * </pre>
 *
 *
 * When the app state is "app.user" (or any children states), and contains the state parameter "user" with value "bilbobaggins",
 * the resulting HTML will appear as (note the 'active' class):
 * <pre>
 * <ul>
 *   <li ui-sref-active="active" class="item active">
 *     <a ui-sref="app.user({user: 'bilbobaggins'})" href="/users/bilbobaggins">@bilbobaggins</a>
 *   </li>
 * </ul>
 * </pre>
 *
 * The class name is interpolated **once** during the directives link time (any further changes to the
 * interpolated value are ignored).
 *
 * Multiple classes may be specified in a space-separated format:
 * <pre>
 * <ul>
 *   <li ui-sref-active='class1 class2 class3'>
 *     <a ui-sref="app.user">link</a>
 *   </li>
 * </ul>
 * </pre>
 */

/**
 * @ngdoc directive
 * @name ui.router.state.directive:ui-sref-active-eq
 *
 * @requires ui.router.state.$state
 * @requires ui.router.state.$stateParams
 * @requires $interpolate
 *
 * @restrict A
 *
 * @description
 * The same as {@link ui.router.state.directive:ui-sref-active ui-sref-active} but will will only activate
 * when the exact target state used in the `ui-sref` is active; no child states.
 *
 */
$StateRefActiveDirective.$inject = ['$state', '$stateParams', '$interpolate'];

function $StateRefActiveDirective($state, $stateParams, $interpolate) {
    return {
        restrict: "A",
        controller: ['$scope', '$element', '$attrs',
            function($scope, $element, $attrs) {
                var state, params, activeClass;

                // There probably isn't much point in $observing this
                // uiSrefActive and uiSrefActiveEq share the same directive object with some
                // slight difference in logic routing
                activeClass = $interpolate($attrs.uiSrefActiveEq || $attrs.uiSrefActive || '', false)($scope);

                // Allow uiSref to communicate with uiSrefActive[Equals]
                this.$$setStateInfo = function(newState, newParams) {
                    state = $state.get(newState, stateContext($element));
                    params = newParams;
                    update();
                };

                $scope.$on('$stateChangeSuccess', update);

                // Update route state
                function update() {
                    if (isMatch()) {
                        $element.addClass(activeClass);
                    } else {
                        $element.removeClass(activeClass);
                    }
                }

                function isMatch() {
                    if (typeof $attrs.uiSrefActiveEq !== 'undefined') {
                        return $state.$current.self === state && matchesParams();
                    } else {
                        return $state.includes(state.name) && matchesParams();
                    }
                }

                function matchesParams() {
                    return !params || equalForKeys(params, $stateParams);
                }
            }
        ]
    };
}

angular.module('ui.router.state')
    .directive('uiSref', $StateRefDirective)
    .directive('uiSrefActive', $StateRefActiveDirective)
    .directive('uiSrefActiveEq', $StateRefActiveDirective);
