'use strict';

var angular = require('angular')
  , app = angular.module('mjbondra.components.styles.services', []);

/**
 * Media query wrapper service
 *
 * ex. wrapMedia('highResolution', '.foobar{color:red}');
 * ex. wrapMedia('tablet', '.foobar{color:red}')
 *
 * @param  {string} type - media query type
 * @param  {string} css  - css styles
 * @return {string}      - media query wrapped css styles
 */
app.factory('wrapMediaQuery', [function () {
  return function (type, css) {
    var breakpoint = {
      mobileWide: 30, // em; 480px
      tablet: 48, // em; 768px
      desktop: 64.0625 // em; 1025px
    };

    var highResolution = [
      '(min-resolution: 1.3dppx)',
      '(-webkit-min-device-pixel-ratio: 1.3)',
      '(min--moz-device-pixel-ratio: 1.3)',
      '(min-resolution: 124.8dpi)'
    ];

    var actions = {
      breakpoint: function (name) {
        return '(min-width:' + breakpoint[name] + 'em)';
      },
      highResolution: function () {
        return highResolution.join(',');
      }
    };

    var mediaQuery = '@media';
    if (typeof actions[type] === 'function')
      mediaQuery += actions[type]();
    else if (typeof breakpoint[type] === 'number')
      mediaQuery += actions.breakpoint(type);
    else return css;

    return mediaQuery + '{' + css + '}';
  };
}]);

/**
 * Project Background (CSS styles)
 *
 * ex. wrapSelector('.foobar', ['color:red','font-size:1.6rem']);
 *
 * @param  {string} selector - css selector
 * @param  {array}  rules    - an array of css rule strings
 * @return {string}          - selector wrapped css rules
 */
app.factory('wrapSelector', [function () {
  return function (selector, rules) {
    return selector + '{' + rules.join(';') + '}';
  };
}]);

@@ -122,35 +122,751 @@
 %0A * 
-Media query wrapper service
+Hex-to-RGBA%0A *%0A * ex. hexToRgba('#333333', 0.5);%0A *%0A * @param  %7Bstring%7D hex     - media query type%0A * @param  %7Bnumber%7D opacity - css styles%0A * @return %7Bstring%7D         - media query wrapped css styles%0A */%0Aapp.factor('hexToRgba', %5Bfunction () %7B%0A  return function (hex, opacity) %7B%0A    opacity = opacity %7C%7C 1;%0A    var matches = /%5E#?(%5Ba-f%5Cd%5D%7B2%7D)(%5Ba-f%5Cd%5D%7B2%7D)(%5Ba-f%5Cd%5D%7B2%7D)$/i.exec(hex)%0A%0A    return matches ? %7B%0A      r: parseInt(matches%5B1%5D, 16),%0A      g: parseInt(matches%5B2%5D, 16),%0A      b: parseInt(matches%5B3%5D, 16),%0A      a: opacity,%0A      toString: function () %7B%0A        return 'rgba(' +%0A          this.r + ',' +%0A          this.b + ',' +%0A          this.g + ',' +%0A          this.a + ')';%0A      %7D%0A    %7D : null;%0A  %7D;%0A%7D%5D);%0A%0A/**%0A * CSS media query wrapper
 %0A *%0A
@@ -2036,39 +2036,28 @@
 %0A * 
-Project Background (CSS styles)
+CSS selector wrapper
 %0A *%0A

add hex-to-rgba service