﻿

function SCanvas(){

	this.canvas;
	this.context;

	// цвет фона
	this.font_color = "rgba(175,220, 251, 0.85)";	
	// размер зтираний
	this.clear_radius = 50;
	
	//---
	// признак перетаскивания...
	this.canDrag = false;
	

	// инициализация
	this.init = function(id){
	
		this.canvas = document.getElementById(id);
		if (typeof(this.canvas) != "object") return;
		this.context = this.canvas.getContext('2d');
		
		// Ставим размер кк у окна браузера
		this.setSizeLikeWindow();

		// начинаем работу..
		this.Start();
		// инициализация кнопки закрытия...
		this.initCloser();
		
		this.Bind();

	};
	
	// Установить размер как окно браузера...
	this.setSizeLikeWindow = function(){
	
		var w, h; // Объявляем переменные, w - длина, h - высота
		w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth));
		h = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight));
		
		this.setSize(w,h);

	};
	
	// изменение размера
	this.setSize = function(w,h){
		this.canvas.width = w;
		this.canvas.height = h;
	};
	
	// начало ...
	this.Start = function(){
		this.drawFont();
	};
	this.initCloser = function(){
	
		var cl = document.getElementById('closer');
		
		
		cl.style.display = "block";
		
		cl.style.position = "fixed";
		cl.style.top = '70px';
		cl.style.left = parseInt((this.canvas.width - cl.width-100),10)+'px';
	
	};
	
	//--------------------------------------------------------
	// События
	// добавление обработки событий
	this.Bind = function(){
		
		//this.canvas.onclick = this.myMouseClick;
		//this.canvas.onmousemove = this.myMouseMove;
		
		//Захват
		this.canvas.onmousedown = this.my_drag;
		// Перемещение
		this.canvas.onmousemove = this.my_move;
		// Бросить
		this.canvas.onmouseup = this.my_drop;
		
		// закрыть..
		document.getElementById('closer').onmousedown = this.closeCanvas;

	};
	
	this.closeCanvas = function(){
		document.getElementById('canvas_div').style.display = 'none';
	};
	
	this.my_drag = function(event){
	
		if(!event){event = window.event;}
		
		this.canDrag = true;
		
		return false;
	
	};
	
	this.my_move = function(event){
		
		if(!event){event = window.event;}
		
		// если это перемещение
		if(this.canDrag ){
			// то делаем что-то...
			//s_canvas.onDrag(defPosition(event));
			
			
			var abs_x = (event.pageX-window.scrollX);
			var abs_y = (event.pageY-window.scrollY);
			//s_canvas.onDrag({x:abs_x,y:abs_y});
			s_canvas.onDrag({x:abs_x,y:abs_y});
		}
		
		//window.status = "x:"+(event.pageX-window.scrollX)+" y:"+(event.pageY-window.scrollY);
		
		return false;
		
	};
	
	this.my_drop = function(event){
	
		this.canDrag = false;
	};
	
	
	
	
	//--------------------------------------------------------
	
	//Функция, которая выполняется при перемещении...pos - координаты..
	this.onDrag = function(pos){
	
		var g = this.context;
		
		g.save();
		/*
		g.fillStyle = 'red';
		g.beginPath();
		
		// рисуем круг
		var radius = 30;
				
		g.arc(pos.x, pos.y, radius, 0, Math.PI * 2, false);
 
		//g.lineWidth = 15;
		//g.strokeStyle = "green";
		//g.stroke();
		
		g.closePath();
		g.fill();	// Заливка
		//g.clip();
		*/
		
		
		//Очищаем:
		g.clearRect(pos.x,pos.y,this.clear_radius,this.clear_radius);
		
		
		// Очистка кругом...
		
		
		
		g.restore();
	
	};
	
	
	// рисуем фон
	this.drawFont = function(){
		
		var g = this.context;
		
		g.save();
// Рисуем фон....				
		g.fillStyle = this.font_color;

		g.fillRect (0,0,this.canvas.width,this.canvas.height);
		//----------------------
		// рисурки сюда...
		
		// растягиваем фон
		var img = new Image();
		img = document.getElementById('my_bg_img');
		g.drawImage(img, 0, 0, this.canvas.width,this.canvas.height)
				
		// снежинки по краям
		
		//Top Left
		var s_1 = new Image();
		s_1 = document.getElementById('my_snow_topleft_img');
		g.drawImage(s_1, 0, 0);
		//Top Right
		var s_2 = new Image();
		s_2 = document.getElementById('my_snow_topright_img');
		g.drawImage(s_2, this.canvas.width - s_2.width, 0);
		//Bottom Right
		var s_3 = new Image();
		s_3 = document.getElementById('my_snow_bottomright_img');
		g.drawImage(s_3, this.canvas.width - s_3.width, this.canvas.height - s_3.height);
		//Bottom Left
		var s_4 = new Image();
		//s_4.src = 'img/snow_bottomleft.png';
		s_4 = document.getElementById('my_snow_bottomleft_img');
		g.drawImage(s_4, 0, this.canvas.height - s_4.height);
		// текст по центру...
		var t = new Image();
		t = document.getElementById('my_ny_txt_img');
		g.drawImage(t, parseInt((this.canvas.width-t.width)/2,10), parseInt((this.canvas.height-t.height)/2,10));

		g.restore();
	
	};
	
};



// Функция для определения координат указателя мыши
function defPosition(event) {
      var x = y = 0;
      if (document.attachEvent != null) { // Internet Explorer & Opera
            x = window.event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
            y = window.event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
      } else if (!document.attachEvent && document.addEventListener) { // Gecko
            x = event.clientX + window.scrollX;
            y = event.clientY + window.scrollY;
      } else {
            // Do nothing
      }
      return {x:x, y:y};
};


function fixEvent(e) {
	// получить объект событие для IE
	e = e || window.event

	// добавить pageX/pageY для IE
	if ( e.pageX == null && e.clientX != null ) {
		var html = document.documentElement
		var body = document.body
		e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
		e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
	}

	// добавить which для IE
	if (!e.which && e.button) {
		e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) )
	}

	return e
};




