var rocon=(function(){/**
 * Общие методы и свойства для rocon
 * @author Sergey Chikuyonok (sc@design.ru)
 * @copyright Art.Lebedev Studio (http://www.artlebedev.ru)
 */

var re_rule = /\.rc(\d+)\b/,
	re_class = /\brc(\d+)\b/,
	re_shape_flag = /\brc-shape\b/,

	/** Префиск для создаваемых CSS-правил */
	rule_prefix = 'rocon__',

	/** Базовый класс для создаваемых элементов */
	base_class = 'rocon',
	
	/** Привязанные к определенным классам фоны */
	binded_props = [],

	/** Результат, возвращаемый в объект <code>rocon</code> */
	result = {
		/**
		 * Добавление/обновление уголков для динамически созданных элементов.
		 * Может принимать неограниченное количество элементов либо массивов
		 * элементов, у которых нужно обновить уголки  
		 */
		update: function(){},
		bindProperties: function(){
			var id = 1;
			return function(rule, bg, border_width) {
				binded_props.push({
					'id': id++,
					'rule': rule, 
					'bg': mapArray(expandProperty(bg), function(val){
						if (val.charAt(0) != '#')
							val = '#' + val;
						return convertColorToHex(val);
					}),
					'border_width': border_width || 0
				});
			}
		}(),
		
		process: function(context) {
			processRoundedElements(context);
		}
	},

	/** @type {CSSStyleSheet} Таблица стилей для уголков */
	corners_ss = null,

	/** Кэш для уголков */
	_corner_cache = {},
	
	/** Классы элементов, которым нужно добавить скругленные уголки */
	elem_classes = [],
	
	/** Список функций, которые нужно выполнить при загрузке DOM-дерева */
	dom_ready_list = [],
	
	/** Загрузился ли DOM? */
	is_ready = false,
	
	/** Привязано ли событие, ожидающее загрузку DOM? */
	readyBound = false,

	userAgent = navigator.userAgent.toLowerCase(),
	
	/** 
	 * CSS-селекторы, которые уже были добавлены в стили. 
	 * Используется для того, чтобы не создавать одинаковые правила
	 */
	processed_rules = {},

	/** Тип и версия браузера пользователя. Взято с jQuery */
	browser = {
		version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
		safari: /webkit/.test( userAgent ),
		opera: /opera/.test( userAgent ),
		msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
		mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
	};

/**
 * Выполняет все функции, добавленные на событие onDomContentLoaded.
 * Взято с jQuery
 */
function fireReady() {
	//Make sure that the DOM is not already loaded
	if (!is_ready) {
		// Remember that the DOM is ready
		is_ready = true;

		// If there are functions bound, to execute
		if ( dom_ready_list.length ) {
			
			for (var i = 0; i < dom_ready_list.length; i++) {
				dom_ready_list[i].call(document);
			}
			
//			walkArray(dom_ready_list, function(){
//				this.call(document);
//			});

			// Reset the list of functions
			dom_ready_list = null;
		}
	}
}

/**
 * Добавляет слушателя на событие onDomContentLoaded
 * @type {Function} fn Слушатель
 */
function addDomReady(fn) {
	dom_ready_list.push(fn);
}

/**
 * Проверка на наступление события onDomContentLoaded. 
 * Взято с jQuery
 */
function bindReady(){
	if ( readyBound ) return;
	readyBound = true;

	// Mozilla, Opera and webkit nightlies currently support this event
	if ( document.addEventListener ) {
		// Use the handy event callback
		document.addEventListener( "DOMContentLoaded", function(){
			document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
			fireReady();
		}, false );

	// If IE event model is used
	} else if ( document.attachEvent ) {
		// ensure firing before onload,
		// maybe late but safe also for iframes
		document.attachEvent("onreadystatechange", function(){
			if ( document.readyState === "complete" ) {
				document.detachEvent( "onreadystatechange", arguments.callee );
				fireReady();
			}
		});

		// If IE and not an iframe
		// continually check to see if the document is ready
		if ( document.documentElement.doScroll && !window.frameElement ) (function(){
			if ( is_ready ) return;

			try {
				// If IE is used, use the trick by Diego Perini
				// http://javascript.nwbox.com/IEContentLoaded/
				document.documentElement.doScroll("left");
			} catch( error ) {
				setTimeout( arguments.callee, 0 );
				return;
			}

			// and execute any waiting functions
			fireReady();
		})();
	}
}

/**
 * Вспомогательная функция, которая пробегается по всем элементам массива
 * <code>ar</code> и выполняет на каждом элементе его элементе функцию
 * <code>fn</code>. <code>this</code> внутри этой функции указывает на 
 * элемент массива
 * @param {Array} ar Массив, по которому нужно пробежаться
 * @param {Function} fn Функция, которую нужно выполнить на каждом элементе массива
 * @param {Boolean} forward Перебирать значения от начала массива (п умолчанию: с конца)
 */
function walkArray(ar, fn, forward) {
	if (forward) {
		for (var i = 0, len = ar.length; i < len; i++)
			if (fn.call(ar[i], i) === false)
				break;
	} else {
		for (var i = ar.length - 1, result; i >= 0; i--)
			if (fn.call(ar[i], i) === false)
				break;
	}
}

/**
 * Преобразует один массив элементов в другой с помощью функции callback.
 * Взято в jQuery
 * @param {Array} elems
 * @param {Function} callback
 * @return {Array}
 */
function mapArray(elems, callback) {
	var ret = [];

	// Go through the array, translating each of the items to their
	// new value (or values).
	for ( var i = 0, length = elems.length; i < length; i++ ) {
		var value = callback( elems[ i ], i );

		if ( value != null )
			ret[ ret.length ] = value;
	}

	return ret.concat.apply( [], ret );
}

/**
 * Функция добавления скругленных уголков элементу. Для каждого браузера 
 * будет своя функция
 */
function addCorners(){
	return;
};

// TODO Добавить исключение при правильной работе border-radius

/**
 * Преобразует цвет из RGB-предствления в hex
 * @param {String} color
 * @return {String}
 */
function convertColorToHex(color) {
	var result;
	function s(num) {
		var n = parseInt(num, 10).toString(16);
		return (n.length == 1) ? n + n : n;
	}
	
	function p(num) {
		return s(Math.round(num * 2.55));
	}
	
	if (result = /rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/.exec(color))
		return '#' + s(result[1]) + s(result[2]) + s(result[3]);

	// Look for rgb(num%,num%,num%)
	if (result = /rgb\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*\)/.exec(color))
		return '#' + p(result[1]) + p(result[2]) + p(result[3]); 

	// Look for #a0b1c2
	if (result = /#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})/i.exec(color))
		return '#' + result[1] + result[2] + result[3];
		
	if (result = /#([a-f0-9])([a-f0-9])([a-f0-9])/i.exec(color))
		return '#' + result[1] + result[1] + result[2] + result[2] + result[3] + result[3];
	
	s = null;
	p = null;
		
	return color;
}

/**
 * Создает HTML-элемент <code>name</code> с классом <code>class_name</code>
 * @param {String} name Название элемента
 * @param {String} class_name Класс элемента
 * @return {Element}
 */
function createElement(name, class_name) {
	var elem = document.createElement(name);
	if (class_name) {
		elem.className = class_name;
	}
	return elem;
}

/**
 * Простая проверка наличия определенного класса у элемента
 * @param {HTMLElement} elem
 * @param {String} class_name
 * @return {Boolean}
 */
function hasClass(elem, class_name) {
	var re = new RegExp('\\b' + class_name + '\\b');
	return elem.nodeType == 1 && re.test(elem.className || '');
}

/**
 * Возвращает значение CSS-свойства <b>name</b> элемента <b>elem</b>
 * @author John Resig (http://ejohn.org)
 * @param {Element} elem Элемент, у которого нужно получить значение CSS-свойства
 * @param {String|Array} name Название CSS-свойства
 * @return {String|Object}
 */
function getStyle(elem, name) {
	var cs, 
		result = {},
		camel = function(str, p1){return p1.toUpperCase();};
	
	walkArray(name instanceof Array ? name : [name], function(){
		var n = this, 
			name_camel = n.replace(/\-(\w)/g, camel);
		
		// If the property exists in style[], then it's been set
		// recently (and is current)
		if (elem.style[name_camel]) {
			result[name_camel] = elem.style[name_camel];
		}
		//Otherwise, try to use IE's method
		else if (browser.msie) {
			result[name_camel] = elem.currentStyle[name_camel];
		}
		// Or the W3C's method, if it exists
		else if (document.defaultView && document.defaultView.getComputedStyle) {
			if (!cs)
				cs = document.defaultView.getComputedStyle(elem, "");
			result[name_camel] = cs && cs.getPropertyValue(n);
		}
	});
	
	return name instanceof Array ? result : result[name.replace(/\-(\w)/g, camel)];
		
}

/**
 * Разворачивает краткую запись четырехзначного свойства в полную:<br>
 * 	— a      -&gt; a,a,a,a<br>
 *	— a_b    -&gt; a,b,a,b<br>
 *	— a_b_с  -&gt; a,b,с,b<br>
 * 
 * @param {String} prop Значение, которое нужно раскрыть
 * @return {Array} Массив с 4 значениями
 */
function expandProperty(prop) {
	var chunks = (prop || '').split('_');
		
	switch (chunks.length) {
		case 1:
			return [chunks[0], chunks[0], chunks[0], chunks[0]];
		case 2:
			return [chunks[0], chunks[1], chunks[0], chunks[1]];
		case 3:
			return [chunks[0], chunks[1], chunks[2], chunks[1]];
		case 4:
			return chunks;
	}
	
	return null;
}

/**
 * Возвращает цвет фона элемента
 * @type {Function}
 * @param {Element} elem Элемент, для которого нужно достать цвет фона
 * @param {Boolean} use_shape Для элемента создаются уголки в виде формы
 * @return {Array} Массив из 4 элементов фона
 */
var getBg = (function() {

	var session_elems = [], 
		default_color = '#ffffff';
	
	/**
	 * Основной цикл с использованием кэширования
	 */
	function mainLoopCache(elem) {
		var c;
		do {
			if (elem.nodeType != 1)
				break;
			
			if (elem.rocon_bg) { // цвет был найден ранее
				return elem.rocon_bg;
			} else { // цвет еще не найден
				session_elems.push(elem);
				c = getStyle(elem, 'background-color');
				if (c != 'transparent')
					return convertColorToHex(c);
			}
				
		} while (elem = elem.parentNode);
		
		return default_color;
	}
	
	/**
	 * Основной цикл без кэширования
	 */
	function mainLoopNoCache(elem) {
		var c;
		do {
			if (elem.nodeType != 1)
				break;
				
			c = getStyle(elem, 'background-color');
			if (c != 'transparent')
				return convertColorToHex(c);
				
		} while (elem = elem.parentNode);
		
		return default_color;
	}
	
	return function(elem, use_shape){
		var cl = /* String */elem.className, 
			bg = null;
		
		// сначала посмотрим, указан ли фон в классе элемента
		var bg_props = /\brcbg([a-f0-9_]+)\b/i.exec(cl);
		
		if (bg_props) {
			
			bg =  mapArray(expandProperty(bg_props[1]), function(el){
				return convertColorToHex('#' + el);
			});
			
			return bg;
		}
		
		// Теперь проверяем, есть ли привязанный через rocon.bindBg() к классу фон
		var elem_props = getBindedProperties(elem);
		if (elem_props) {
			return elem_props.bg;
		}
		
		if (!use_shape) 
			elem = elem.parentNode;
		
		if (getBg.use_cache) {
			session_elems = [];
			bg = mainLoopCache(elem);
			// закэшируем цвет фона у всех элементов, по которым проходились
			walkArray(session_elems, function(){
				this.rocon_bg = bg;
				getBg.processed_elems.push(this);
			});
			
			session_elems = null;
		} else {
			bg = mainLoopNoCache(elem);
		}
		
		return expandProperty(bg);
	}
})();

getBg.use_cache = true;
getBg.processed_elems = [];

function getBindedProperties(elem) {
	var cl = elem.className, result = null;
	walkArray(binded_props, function(){
		if (
			// проверка наличия подстроки
			(typeof(this.rule) == 'string' && cl.indexOf(this.rule) != -1) ||
			// проверка по регулярке
			cl.search(this.rule) != -1
		) {
			result = this;
			return false;
		}
	}, true);
	
	return result;
}

/**
 * Добавляет CSS-правило в стиль
 * @param {String} selector CSS-селектор, для которого нужно добавить правила
 * @param {String} rules CSS-правила
 */
function addRule(selector, rules) {
	corners_ss.insertRule(selector + ' {' + rules + '}', corners_ss.cssRules.length);
}

/**
 * Функция поиска правил для скругленных уголков
 * @param {Function} addFunc Функция добавления уголков
 */
function findRules(addFunc) {
	/** @type {String[]}  */
	var match;
	
	walkArray(document.styleSheets, function(){
		walkArray(this.cssRules || this.rules, function(){
			if (match = re_rule.exec(this.selectorText))
				addFunc(this, parseInt(match[1], 10));
		});
	});
}

/**
 * Очищает элемент от предыдущих вставок скругленных уголков
 * @param {Element} elem
 * @param {String} [add_class] Классы, которые нужно добавить
 * @return {Element} Переданный элемент
 */
function cleanUp(elem, add_class) {
	var	cl = (elem.className || '').replace(new RegExp('\\s*' + base_class + '[\-_].+?\\b', 'ig'), '');
	if (add_class) {
		cl += ' ' + add_class;
	}
	
	elem.className = cl;
	return elem;
}

	
/**
 * Функция добавления правил для скругленных уголков
 */
function addRoundedProperties(/* CSSStyleRule */ rule, /* Number */ radius) {
	elem_classes.push(rule.selectorText.substr(1));
}

/**
 * Создает новую таблицу стилей на странице, куда будут добавляться правила
 * для описания скругленных уголков
 * @return {CSSStyleSheet}
 */
function createStylesheet() {
	if (!corners_ss) {
		if (document.createStyleSheet) {
			corners_ss = document.createStyleSheet();
		} else {
			var style = createElement('style');
			style.rel = 'rocon';
			document.getElementsByTagName('head')[0].appendChild(style);
			
			/*
			 * Просто получить самый последний стиль не получится: иногда стили
			 * добавляются внутрь <body> (так делает счетчик Яндекса, например),
			 * в этом случае мы не можем быть уверены, что только что 
			 * добавленная таблица стилей — последняя. Поэтому пробегаетмся 
			 * по всем таблицам в поисках нашей  
			 */ 
			walkArray(document.styleSheets, function(){
				if (this.ownerNode.rel == 'rocon') {
					corners_ss = this;
					return false;
				}
			});
		}
	}
	
	return corners_ss;
}

/**
 * Возвращает массив элементов, которым нужно добавить скругленные уголки.
 * Элементом массива является объект со свойствами <code>node</code> 
 * и <code>radius</code>
 * @param {Element} [context] Откуда брать элементы
 * @return {Array}
 */
function getElementsToProcess(context) {
	var elems = [], m;
	
	walkArray((context || document).getElementsByTagName('*'), function(){
		if (m = re_class.exec(this.className || '')) {
			elems.push({node: this, radius: parseInt(m[1], 10)});
		}
	});
	
	return elems;
}

/**
 * Обрабатывает все элементы на странице, которым нужно добавить скругленные
 * уголки
 */
function processRoundedElements(context){
	var elems = getElementsToProcess(context);
	if (elems.length) {
		createStylesheet();
		walkArray(elems, function(){
			addCorners(this.node, this.radius);
		});
	}
}
/**
 * Проверяет, был ли добавлен CSS-selector в таблицу стилей
 * @param {String} selector
 * @return {Boolean}
 */
function isProcessed(selector) {
	return processed_rules[selector] ? true : false;
}

/**
 * Возвращает параметры уголка элемента
 * @param {Element} elem Элемент, у которого нужно получить параметры уголка
 * @param {Number} [radius] Радиус скругления
 */
function getCornerParams(elem, radius) {
	var cl = elem.className || '';
	radius = radius || parseInt(cl.match(re_class)[1], 10);
	var use_shape = re_shape_flag.test(cl),
		props = getBindedProperties(elem);
	
	var border_color = '';
	var border_width = props ? props.border_width : (parseInt(getStyle(elem, 'border-left-width')) || 0);
	if (border_width) {
		// нужно отрисовать бордюр
		border_color = convertColorToHex(getStyle(elem, 'border-left-color') || '#000');
	}
	
	return {
		'radius': radius,
		'bg_color': getBg(elem, use_shape),
		
		// толщина бордюра не может быть больше радиуса скругления
		// (так по CSS3 спецификации)
		'border_width': (border_width > radius) ? radius : border_width,
		'real_border_width': border_width,
		'border_color': border_color,
		'use_shape': use_shape
	};
}

/**
 * Применяет уголки к элементам, переданным в массиве. В основном вызывается из
 * <code>rocon.update()</code>
 * @param {arguments} args Аргументы функции
 * @param {Function} fn Функция, которую нужно выполнить на каждом элементе
 */
function applyCornersToArgs(args, fn) {
	walkArray(args, function(){
		walkArray((this instanceof Array) ? this : [this], fn);
	});
}

/**
 * Делает копию объекта
 * @param {Object} obj
 * @return {Object}
 */
function copyObj(obj) {
	var result = {};
	for (var p in obj) 
		if (obj.hasOwnProperty(p))
			result[p] = obj[p];
	
	return result;
}

/**
 * Корректирует CSS-свойства элемента для правильного рисования уголков в виде
 * формы
 * @param {HTMLElement} elem Элемент, который нужно подкорректировать
 * @param {String} class_name Имя создаваемого класса
 * @param {getCornerParams()} options параметры рисования уголка
 */
function adjustBox(elem, class_name, options) {
	var elem_styles = getStyle(elem, ['padding-top', 'padding-bottom', 'margin-top', 'margin-bottom']);
	function getProp(prop) {
		return parseInt(elem_styles[prop], 10) || 0;
	}
	
	/*
	 * Используем форму, поэтому у блока снижаем верхние и нижние
	 * бордюры, а также на величину радиуса снижаем верхний 
	 * и нижний паддинг 
	 */
	
	var padding_top = Math.max(getProp('paddingTop') - options.radius + options.border_width, 0),
		padding_bottom = Math.max(getProp('paddingBottom') - options.radius + options.border_width, 0),
		margin_top = getProp('marginTop') + options.radius,
		margin_bottom = getProp('marginBottom') + options.radius,
		border_width = options.real_border_width - options.border_width;
	
	addRule('.' + class_name, 
			'border-top-width:' + border_width + 'px;' +
			'border-bottom-width:' + border_width + 'px;' +
			'padding-top:' + padding_top + 'px;' +
			'padding-bottom:' + padding_bottom + 'px;' +
			'margin-top:' + margin_top + 'px;' +
			'margin-bottom:' + margin_bottom + 'px' );
}

addDomReady(processRoundedElements);
// после того, как добавили уголки, необходимо очистить кэш фона,
// иначе будут проблемы с динамическим обновлением блоков
addDomReady(function(){
	walkArray(getBg.processed_elems, function(){
		this.removeAttribute('rocon_bg');
	});
	getBg.use_cache = false;
});

bindReady();/**
 * Добавление уголков для Safari
 * @author Sergey Chikuyonok (sc@design.ru)
 * @copyright Art.Lebedev Studio (http://www.artlebedev.ru)
 * @include "common.js"
 */

if (browser.safari) {
	addCorners = function(elem, radius) {
		var selector = '.rc' + radius;
		if (!isProcessed(selector)) {
			addRule(selector, '-webkit-border-radius:' + radius + 'px; -khtml-border-radius:' + radius);
			processed_rules[selector] = true;
		}
	}
	
	result.update = function() {
		applyCornersToArgs(arguments, function(){
			var m = re_class.exec(this.className || '');
			if (m) 
				addCorners(this, parseInt(m[1]));
		});
	}
}/**
 * Добавление уголков для Firefox
 * @author Sergey Chikuyonok (sc@design.ru)
 * @copyright Art.Lebedev Studio (http://www.artlebedev.ru)
 * @include "common.js"
 */

if (browser.mozilla) {
	addCorners = function(elem, radius) {
		var selector = '.rc' + radius;
		if (!isProcessed(selector)) {
			addRule(selector, '-moz-border-radius:' + radius + 'px');
			processed_rules[selector] = true;
		}
	}
	
	result.update = function() {
		applyCornersToArgs(arguments, function(){
			var m = re_class.exec(this.className || '');
			if (m) 
				addCorners(this, parseInt(m[1]));
		});
	}
}/**
 * Добавление уголков для Opera
 * @author Sergey Chikuyonok (sc@design.ru)
 * @copyright Art.Lebedev Studio (http://www.artlebedev.ru)
 * @include "common.js"
 * @include "/js-libs/canvas-doc.js"
 */
 
if (browser.opera) {
	/*
	 * Нужно дожаться, пока загрузится DOM-дерево, после чего получить все 
	 * элементы, которым нужно скруглить уголки, и добавить соотвествующие 
	 * стили и элементы
	 */
	
	createStylesheet();
	addRule('.' + base_class, 'position:absolute;background-repeat:no-repeat;z-index:1;display:none');
	addRule('.' + base_class + '-init', 'position:relative;');
	addRule('.' + base_class + '-init>.' + base_class, 'display:inline-block;');
	addRule('.' + base_class + '-tl', 'top:0;left:0;background-position:100% 100%;');
	addRule('.' + base_class + '-tr', 'top:0;right:0;background-position:0 100%;');
	addRule('.' + base_class + '-bl', 'bottom:0;left:0;background-position:100% 0;');
	addRule('.' + base_class + '-br', 'bottom:0;right:0;');
	
	/** @type {HTMLCanvasElement} Холст, на котором будут рисоваться уголки */
	var cv = createElement('canvas');
	
	/**
	 * Возвращает подготовленный контекст рисования на холсте
	 * @param {getCornerParams()} options Параметры рисования уголка
	 * @param {Boolean} is_shape Будем рисовать форму (true) или контр-форму (false)?
	 * @return {CanvasRenderingContext2D}
	 */
	function getDrawingContext(options) {
		options.border_width = (options.border_width > options.radius) 
				? options.radius 
				: options.border_width;
		
		if (options.border_width > 1)
			options.radius -= options.border_width / 2;
			
		
		var width = options.radius * 2 + options.border_width, height = width;
		if (options.use_shape) {
			width = 2000;
			if (options.border_width < options.real_border_width) {
				height += (options.real_border_width - options.border_width) * 2;
			}
		}
		
		
		if (options.border_width == 1) {
			width--;
			height--;
		}
		
		cv.width = options.width = width;
		cv.height = options.height = height;
		
		/** @type {CanvasRenderingContext2D} */
		var ctx = cv.getContext('2d');
		
		ctx.strokeStyle = options.border_color;
		ctx.lineWidth = options.border_width;
		ctx.lineJoin = 'miter';
		ctx.lineCap = 'square';
		ctx.fillStyle = options.bg_color[0];
		
		ctx.clearRect(0, 0, width, height);
		return ctx;
	}
	
	/**
	 * Делает обводку в виде звездочки
	 * @param {CanvasRenderingContext2D} ctx Контекст рисования
	 * @param {Number} options.radius Радиус скругления
	 * @param {String} options.color Цвет уголка в hex-формате
	 * @param {Number} options.border_width Толщина обводки
	 * @param {String} options.border_color Цвет обводки
	 */
	function strokeStar(ctx, options) {
		var deg90 = Math.PI / 2, 
			b2 = (options.border_width > 1) ? options.border_width : 0,
			rb2 = options.radius * 2 + b2;
		
		ctx.beginPath();
		ctx.arc(0, 0, options.radius, deg90, 0, true);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.arc(rb2, 0, options.radius, deg90 * 2, deg90, true);
		ctx.stroke();
		
		ctx.beginPath();
		ctx.arc(rb2, rb2, options.radius, -deg90, deg90 * 2, true);
		ctx.stroke();
	
		ctx.beginPath();
		ctx.arc(0, rb2, options.radius, 0, -deg90, true);
		ctx.stroke();
	}
	
	/**
	 * Рисует «звездочку» для создания формы уголков через canvas
	 * @param {Number} options.radius Радиус скругления
	 * @param {String} options.color Цвет уголка в hex-формате
	 * @param {Number} options.border_width Толщина обводки
	 * @param {String} options.border_color Цвет обводки
	 * @return {String} Картинка в формате data:URL
	 */
	function drawStarShape(options) {
		options = copyObj(options);
		
		var ctx = getDrawingContext(options),
			deg90 = Math.PI / 2, 
			deg360 = Math.PI * 2,
			bw = options.border_width,
			b2 = (bw > 1) ? bw : 0,
			rb2 = options.radius * 2 + b2,
			diff = 0,
			draw_borders = (options.border_width < options.real_border_width);
			
		var drawCircle = function(x, y) {
			ctx.beginPath();
			ctx.arc(x, y, options.radius, 0, deg360, true);
			ctx.closePath();
			ctx.fill();
		}
		
		if (draw_borders) {
			// нужно дорисовать толщину бордера
			diff = options.real_border_width - options.border_width;
			ctx.save();
			ctx.translate(0, diff);
		}
		
		drawCircle(0, 0);
		drawCircle(rb2, 0);
		drawCircle(rb2, rb2);
		drawCircle(0, rb2);
		
		ctx.fillRect(rb2, 0, options.width, options.height);
		
		if (bw) {
			strokeStar(ctx, options);
			ctx.fillStyle = ctx.strokeStyle;
			ctx.fillRect(rb2, options.radius - (bw > 1 ? bw / 2 : bw), options.width, bw * 2);
			
			if (draw_borders) {
				ctx.restore();
				ctx.fillStyle = options.border_color;
				ctx.fillRect(0, 0, options.width, diff);
				ctx.fillRect(0, options.height - diff, options.width, diff);
				ctx.fillStyle = options.bg_color;
			}
		}
		
		return ctx.canvas.toDataURL();
	}
	
	/**
	 * Рисует «звездочку» через canvas
	 * @param {Number} options.radius Радиус скругления
	 * @param {String} options.color Цвет уголка в hex-формате
	 * @param {Number} options.border_width Толщина обводки
	 * @param {String} options.border_color Цвет обводки
	 * @return {String} Картинка в формате data:URL
	 */
	function drawStar(options) {
		var old_opt = options;
		options = copyObj(options);
		
		var ctx = getDrawingContext(options),
			radius = options.radius,
			b2 = (options.border_width > 1) ? options.border_width : 0,
			rb2 = radius * 2 + b2,
			r = old_opt.radius,
			deg90 = Math.PI / 2;

		ctx.save();
		ctx.beginPath();
		ctx.arc(0, 0, radius, deg90, 0, true);
		ctx.arc(rb2, 0, radius, deg90 * 2, deg90, true);
		ctx.arc(rb2, rb2, radius, -deg90, deg90 * 2, true);
		ctx.arc(0, rb2, radius, 0, -deg90, true);
		ctx.closePath();
		ctx.clip();
	
		
		ctx.fillStyle = options.bg_color[2];
		ctx.fillRect(0, 0, r, r)
		
		ctx.fillStyle = options.bg_color[3];
		ctx.fillRect(r, 0, r, r);
		
		ctx.fillStyle = options.bg_color[0];
		ctx.fillRect(r, r, r, r);
		
		ctx.fillStyle = options.bg_color[1];
		ctx.fillRect(0, r, r, r);
		ctx.restore();
		
		if (options.border_width)
			strokeStar(ctx, options);
		
		return ctx.canvas.toDataURL();
	}
	
	/**
	 * Возвращает ключ, по которому кэшируются отрисованные элементы
	 * @param {getCornerParams()} cparams Параметры скругления блока
	 * @param {HTMLElement} elem Элемент, для которого делаем скругление
	 * @return {String}
	 */
	function getCacheKey(cparams, elem) {
		var binded = getBindedProperties(elem);
		return [
			cparams.radius, 
			cparams.bg_color.join('-'), 
			cparams.real_border_width, 
			cparams.border_color, 
			cparams.use_shape,
			binded ? binded.id : 0
		].join(':');
	}
	
	/**
	 * Создает CSS-правила для уголков определенного радиуса и цвета
	 * @param {getCornerParams()} cparams Параметры скругления блока
	 * @param {HTMLElement} elem Элемент, для которого делаем скругление
	 * @return {String} Имя класса, которое нужно присвоить элементу
	 */
	function createCSSRulesOpera(cparams, elem) {
		var cache_key = getCacheKey(cparams, elem),
			radius = cparams.radius,
			bw = cparams.real_border_width || 0,
			diff = (cparams.use_shape) ? bw - cparams.border_width : 0;
		
		// смотрим, делали ли правило с такими же параметрами
		if (!_corner_cache[cache_key]) {
			// создаем новое правило
			var cur_class = rule_prefix + corners_ss.cssRules.length;
			_corner_cache[cache_key] = cur_class;
			
			addRule('.' + cur_class + '>.' + base_class, 
				'background-image: url("' + ( cparams.use_shape ? drawStarShape(cparams) : drawStar(cparams) ) + '");' +
				'width: '+ radius +'px;' +
				'height: ' + (radius + diff) + 'px;'
			);
			
			var offset_x = -bw, offset_y = -bw;
			if (cparams.use_shape) {
				offset_y = -radius - diff;
				adjustBox(elem, cur_class, cparams);
				addRule(
					'.' + cur_class + '>.' + base_class + '-tl, .' + cur_class + '>.' + base_class + '-bl', 
					'width:auto;left:0;right:'+ (radius - bw) +'px;background-position:-' + radius + 'px 100%;'
				);
				addRule('.' + cur_class + '>.' + base_class + '-bl', 'background-position:-' + radius + 'px 0;');
			}
			
			if (offset_x || offset_y) {
				addRule('.' + cur_class + '>.' + base_class + '-tl', 'top:'+ offset_y +'px; left:'+ offset_x +'px');
				addRule('.' + cur_class + '>.' + base_class + '-tr', 'top:'+ offset_y +'px; right:'+ offset_x +'px');
				addRule('.' + cur_class + '>.' + base_class + '-bl', 'bottom:'+ offset_y +'px; left:'+ offset_x +'px');
				addRule('.' + cur_class + '>.' + base_class + '-br', 'bottom:'+ offset_y +'px; right:'+ offset_x +'px');
			}
		}
		
		return _corner_cache[cache_key];
	}

	/**
	 * Добавляет уголки элементу
	 * @param {Element} elem
	 */
	addCorners = function(elem, radius){
		// если у элемента нет класса — значит, нет указания, какие уголки
		// нужно добавить
		if (!elem.className)
			return;
		
		// проверим, нужно ли добавлять элементы с уголками
		var dont_add = false;
		walkArray(elem.childNodes, function(){
			if (hasClass(this, base_class)) {
				dont_add = true;
				return false;
			}
		});
		
		var elem_class = createCSSRulesOpera(getCornerParams(elem, radius), elem);
		
		if (!dont_add) 
			// добавляем уголки
			walkArray(['tl', 'tr', 'bl', 'br'], function(){
				elem.appendChild( createElement('span', base_class + ' ' + base_class +'-' + this) );
			});
		
		cleanUp(elem, elem_class + ' ' + base_class + '-init');
	};
	
	addDomReady(function(){
		/*
		 * Одна из причин, по которой я ненавижу Оперу — это 
		 * необходимость до сих пор вставлять подобные костыли, 
		 * чтобы что-то отобразились на странице
		 */
		document.documentElement.style.outline = 'none';
	});
	
	result.update = function() {
		applyCornersToArgs(arguments, function(){
			addCorners( cleanUp(this) );
		});
	}
}/**
 * Добавление уголков для IE
 * @author Sergey Chikuyonok (sc@design.ru)
 * @copyright Art.Lebedev Studio (http://www.artlebedev.ru)
 * @include "common.js"
 */

if (browser.msie) {
	/*
	 * Уголки для IE создаем через VML.
	 * 
	 * У IE в этом скрипте есть одно очень узкое место: динамическое добавление
	 * CSS-правил в таблицу стилей (функция addRule()). Для увеличения 
	 * производительности был применен следующий трюк: сначала, при первичной 
	 * инициализации, весь CSS накапливается в переменной css_text, и после того,
	 * как все необходимые правила для существующих блоков были созданы, 
	 * накопленный CSS применяется к созданной таблице стилей. После этого 
	 * функция addRule() уже указывает на метод corners_ss.addRule()  
	 */
	
	_corner_cache.ix = 0;
	_corner_cache.created = {};
	
	var css_text = '',
		corner_types = {
			tl: 0,
			tr: 1,
			br: 2,
			bl: 3
		};
	
	var vml_class = 'vml-' + base_class; //использую именно класс, чтобы работало в IE8
	
	try {
		if (!document.namespaces["v"])
			document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
	} catch(e) { }
	
	createStylesheet();
	var dot_class = '.' + base_class;
	corners_ss.cssText = "." + vml_class + " {behavior:url(#default#VML);display:inline-block;position:absolute}" +
		dot_class + "-init {position:relative;zoom:1;}" +
		dot_class + " {position:absolute; display:inline-block; zoom: 1; overflow:hidden}" +
		dot_class + "-tl ." + vml_class + "{flip: 'y'}" +
		dot_class + "-tr ." + vml_class + "{rotation: 180;right:1px;}" +
		dot_class + "-br ." + vml_class + "{flip: 'x'; right:1px;}";
		
	if (browser.version < 7) {
		corners_ss.cssText += dot_class + '-tr, ' + dot_class + '-br {margin-left: 100%;}';
//				dot_class + ' .' + vml_class + '{position:absolute}' +
//				dot_class + '-tr .' + vml_class + '{right: 0}';
	}
	
	addRule = function(selector, rules){
		css_text += selector + '{' + rules + '}';
	};
	
	/**
	 * Создает элемент со скругленным уголком. В функции используется
	 * кэширование, то есть ранее созданный уголок дублируется, 
	 * а не создается заново
	 * @param {getCornerParams()} options Параметры рисования уголка 
	 * @return {HTMLElement}
	 */
	function createCornerElementIE(options) {
		var radius = options.radius,
			border_width = options.border_width,
			cache_key = radius + ':' + border_width + ':' + options.use_shape;
		
		if (!createCornerElementIE._cache[cache_key]) { // элемент еще не создан
			
			var multiplier = 10;
			
			var cv = createElement('v:shape');
			cv.className = vml_class;
			cv.strokeweight = border_width + 'px';
			cv.stroked = (border_width) ? true : false;
			var stroke = createElement('v:stroke');
			stroke.className = vml_class;
			stroke.joinstyle = 'miter';
			cv.appendChild(stroke);
			
			var w = radius, h = w;
			
			cv.style.width = w + 'px';
			cv.style.height = h + 'px';
			
			radius -= border_width / 2;
			radius *= multiplier;
			var bo = border_width / 2 * multiplier;
			var px = Math.round((radius + bo) / w);
			var rbo = radius + bo;
			
			cv.coordorigin = Math.round(px / 2) + ' ' + Math.round(px / 2);
			cv.coordsize = rbo + ' ' + rbo;
			
			var path = '';
			var max_width = rbo + px;
			
			if (options.use_shape) {
				max_width = 2000 * multiplier;
				path = 'm' + max_width + ',0 ns l' + bo +',0  qy' + rbo + ',' + radius + ' l' + max_width + ',' + radius + ' e ';
			} else {
				path = 'm0,0 ns l' + bo +',0  qy' + rbo + ',' + radius + ' l' + rbo + ',' + rbo + ' l0,' + rbo + ' e ';
			}
			
			
			// stroke
			path += 'm' + bo + ',' + (-px) + ' nf l' + bo + ',0 qy' + rbo + ',' + radius + ' l ' + (max_width) +','+ radius +' e x';
			
			cv.path = path;
				
			createCornerElementIE._cache[cache_key] = cv;
		}
		
		return createCornerElementIE._cache[cache_key].cloneNode(true);
	}
	
	createCornerElementIE._cache = {};
	
	/**
	 * Создает скругленный уголок
	 * @param {getCornerParams()} cparams параметры уголка
	 * @param {String} type Тип уголка (tl, tr, bl, br)
	 */
	function drawCornerIE(cparams, type){
		var cv = createCornerElementIE(cparams);
		cv.fillcolor = cparams.bg_color[corner_types[type]] || '#000';
		cv.strokecolor = cparams.border_color || '#000';
		
		var elem = createElement('span', base_class + ' ' + base_class + '-' + type);
		elem.appendChild(cv);
		
		return elem;
	}
	
	/**
	 * Удаляет у элемента старые уголки
	 * @param {HTMLElement} elem Элемент, у которого нужно удалить уголки 
	 */
	function removeOldCorners(elem) {
		walkArray(elem.childNodes, function(){
			if (hasClass(this, base_class)) {
				elem.removeChild(this);
			}
		});
		
		cleanUp(elem);
	}
	
	/**
	 * Возвращает имя класса для переданных параметров. Используется для 
	 * того, чтобы не плодить много разных классов для одних и тех же правил
	 * @param {getCornerParams()} options Параметры рисования уголка
	 * @return {String}
	 */
	function getClassName(options) {
		var key = options.radius + ':' + (options.real_border_width || 0) + ':' + options.use_shape;
		if (!_corner_cache[key]) {
			_corner_cache[key] = rule_prefix + _corner_cache.ix++;
		}
		
		return _corner_cache[key];
	}
	
	/**
	 * Создает CSS-правила для скругленных уголков
	 * @param {getCornerParams()} options Параметры рисования уголка
	 * @param {HTMLElement} elem Элемент, которому добавляются уголки
	 * @param {Number} border_width Толщина бордюра
	 */
	function createCSSRules(options, elem) {
		var radius = options.radius,
			border_width = options.real_border_width || 0,
			diff = (options.use_shape) ? options.real_border_width - options.border_width : 0;
//		border_width += 10;
		
//		corners_ss.disabled = true;
			
		var class_name = getClassName(options);
		if (!_corner_cache.created[class_name]) {
			// такое правило еще не создано в CSS, создадим его
			var prefix = (browser.version < 7) 
							? '.' + class_name + ' .' + base_class  // IE6 
							: '.' + class_name + '>.' + base_class; // IE7+
			
			var offset_x = -border_width, 
				offset_y = -1 -border_width;
			
				
			addRule(prefix, 'width:' + (radius + border_width + 1) + 'px;height:' + (radius + 1) + 'px');
			
			if (options.use_shape) {
				offset_y = -radius - 1 - diff;
				var left_adjust = radius + options.border_width * 2 + diff;
				adjustBox(elem, class_name, options);
				var clip_size = Math.max(radius - border_width * 2, 0),
					pad_size = Math.min(radius - border_width * 2, 0) * -1;
				
				if (browser.version < 7) {
					pad_size += parseInt(getStyle(elem, 'padding-left') || 0) + parseInt(getStyle(elem, 'padding-right') || 0);
				}
				
				var css_rules = 'width:100%;clip:rect(auto auto auto ' + clip_size + 'px);padding-right:' + pad_size + 'px;left:' + (-border_width - clip_size) + 'px;';
				addRule(prefix + '-tl', css_rules + 'top:' + offset_y + 'px;');
				addRule(prefix + '-tl .' + vml_class, 'left:' + clip_size + 'px');
				
				addRule(prefix + '-bl', css_rules +'bottom:' + offset_y + 'px;');
				addRule(prefix + '-bl .' + vml_class, 'left:' + clip_size + 'px');
			} else {
				addRule(prefix + '-tl', 'left:' + offset_x + 'px;top:' + offset_y + 'px;');
				addRule(prefix + '-bl', 'left:' + offset_x + 'px;bottom:' + offset_y + 'px;');
			}
			
			if (browser.version < 7) {
				offset_x = -radius + (border_width ? radius % 2 - border_width % 2 : -radius % 2);
				
				addRule(prefix + '-tr', 'left:' + offset_x + 'px;top:' + offset_y + 'px;');
				addRule(prefix + '-br', 'left:' + offset_x + 'px;bottom:' + offset_y + 'px;');
			} else {
				addRule(prefix + '-tr', 'right:' + offset_x + 'px;top:' + offset_y + 'px;');
				addRule(prefix + '-br', 'right:' + offset_x + 'px;bottom:' + offset_y + 'px;');
			}
			
			_corner_cache.created[class_name] = true;
		}
	}
	
	addCorners = function(elem, radius) {
		var cparams = getCornerParams(elem, radius);
		
		createCSSRules(cparams, elem);
		
		// теперь добавляем сами уголки в элемент
		walkArray(['tl', 'tr', 'bl', 'br'], function(){
			elem.appendChild(drawCornerIE(cparams, this));
		});
		
		
		// говорим, что все добавилось
		elem.className += ' ' + getClassName(cparams) + ' ' + base_class + '-init';
		
	};
	
	result.update = function() {
		applyCornersToArgs(arguments, function(){
			removeOldCorners(this);
			addCorners(this);
		});
	};
	
	addDomReady(function(){
		corners_ss.cssText += css_text;
		css_text = '';
		addRule = corners_ss.addRule;
	});
};return result;})();