(function($) {

	var options, defaults = {
	
		color    	  : '#2fbbbf',
		fillColor 	  : '#fff',
		selectedWidth : 1, // размер карандаша
		
		width : 1006, // ширина самой страницы
		
		_pencil : {},
		_drawing : false,
	
	};
	
	// наши публичные методы
	var methods = {
		// инициализация плагина
		init:function(param) {
			// актуальные настройки, будут индивидуальными при каждом запуске
			options = $.extend({}, defaults, param);
			
			// Только если окно шире контента
			if( $(this).width() <= options.width + 200 ) {
				return;
			}
			
			// создаем контейнеры по бокам.
			// ширина контейнера
			var width = Math.round( ($(this).width() - options.width - 10) / 2 );
			// сдвиг влево второго контейнера
			var left = options.width + width;
			
			var canv1 = document.createElement('canvas');
			canv1.id = 'canvas1';
			$(this).append( canv1 );
			$(canv1).css({ position: 'fixed', top: 0, left: 0, width: width, height: $(this).height(), cursor:'url(/images/icons/pencil.png) 0 15, auto' });
			
			var canv2 = document.createElement('canvas');
			canv2.id = 'canvas2';
			$(this).append( canv2 );
			$(canv2).css({ position: 'fixed', top: 0, left: left, width: width, height: $(this).height(), cursor:'url(/images/icons/pencil.png) 0 15, auto' });
			
			
			var el = createCanvas( canv1, 0 );
			createCanvas( canv2, left );
			
			if( el ) {
				initColorChange();
			}

			$(this).data('jDraw', true);
			return this;
		},
		
		color:function(param) {
			options.color = param.color;
		}
		
	};
	
	
	$.fn.jDraw = function(method) {
		// немного магии
		if ( methods[method] ) {
			// если запрашиваемый метод существует, мы его вызываем
			// все параметры, кроме имени метода прийдут в метод
			// this так же перекочует в метод
			return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
		} else if ( typeof method === 'object' || ! method ) {
			// если первым параметром идет объект, либо совсем пусто
			// выполняем метод init
			return methods.init.apply( this, arguments );
		} else {
			// если ничего не получилось
			$.error( 'Метод "' +  method + '" не найден в плагине jQuery.mySimplePlugin' );
		}
	};
	
	
	function initColorChange() {
		
		var div = document.createElement('div');
		div.id = "colorChange";
		$('body').append( div );
		$(div).css({ position: 'absolute', 'z-index': 10, top: 0, left: 0, width: 110, height: 110 });
		
		var cp = Raphael.colorwheel(5, 5, 100, options.color, div);
			
		cp.onchange = function (clr) {
			$('body').jDraw('color', { color : clr });
		};
		
		$(div).hide();
	}
	
	// создаем элементы
	function createCanvas( el, left ) {
		$(el)[0].width = $(el).width();
		$(el)[0].height = $(el).height();
		
		var ctx = null;
		
		// Если нет канваса, нет рисования)
		try {
			ctx = $(el)[0].getContext("2d");
		} catch(e){ 
			return false; 
		}
		
		_bind( $(el), ctx, left );
		
		return true;
	}
	
	// биндим движения
	function _bind( el, ctx, left ) {
	
		el.bind('mousedown', function(event){ startDraw( event, ctx, left ) } );
		el.bind('mouseup',   function(event){ stopDraw(  event, ctx, left ) } );
		el.bind('mouseout',  function(event){ stopDraw(  event, ctx, left ); } );
		el.bind('mousemove', function(event){ moveDraw(  event, ctx, left ) } );
		
	};
	
	
	function startDraw( e, ctx, left ) {
		$('#colorChange').show();
	
		options._pencil.x = e.clientX - left;
		options._pencil.y = e.clientY;
		
		ctx.beginPath();
		ctx.strokeStyle = options.color;
		ctx.lineWidth = options.selectedWidth;
		ctx.moveTo(options._pencil.x, options._pencil.y);
		
		options._drawing = true;
	};
	
	
	function stopDraw( e, ctx, left) {
		options._pencil.x = e.clientX  - left;
		options._pencil.y = e.clientY;
		
		options._drawing = false;
	};
	
	function moveDraw( e, ctx, left ) {
		if( options._drawing == false ) {
			return;
		}
		options._pencil.x = e.clientX  - left;
		options._pencil.y = e.clientY;
		
		ctx.lineTo(options._pencil.x, options._pencil.y);
		ctx.stroke();
		ctx.moveTo(options._pencil.x, options._pencil.y);
	};
	

})(jQuery);