$(document).ready(function(){
	var tfContainer=document.getElementById("tfContainer")
	new tarifController(tfContainer)//расширяем переданный элемент методами изменения размера
	// Обрабатываем изменение чекбоксов
	$(".controllerPanel :checkbox").click(function(){
		//Нажав на чекбокс получаем id и объект связанной с чекбоксом колонки
		var colID=$(this).attr("name")
		var colNode=document.getElementById(colID)
		//console.log("Element Id: %s",colID)
		//Если  элемента с таким ID нету завершаем работу функции
		if (colNode==null) return;
		//alert("CheckBox Start")
		var wStyle=getStyle(colNode,"width")
		wStyle=parseInt(wStyle)+2//2 - толщина границ
		if ($(this).attr('checked')) {
			//должны показать
			if (colNode.style.display=="none"){
			colNode.style.display="inline-block";
			tfContainer.tarifController.growContainer(wStyle);
			}
		}else{
			//должны скрыть
			if (colNode.style.display!="none"){
			colNode.style.display="none";
			tfContainer.tarifController.smallerContainer(wStyle);
			}
		}
	})
	
	//обрабатываем последовательно все колонки
	$('#tfContainer>div').each(function(){
		var id=this.id
		var element= document.getElementById(id);
		//alert('wStyle')
		var wStyle=getStyle(element,"width")
		wStyle=parseInt(wStyle)+2
		//в каждой колонке ищем кнопку и добавляем обработчик click
		$(this).find('.header>div>div.button').click(function(){
			//скрываем элемент
			element.style.display="none";
			tfContainer.tarifController.smallerContainer(wStyle);
			//снимаем галочку в чекбоксе
			$(".controllerPanel :checkbox[name='"+id+"']").removeAttr("checked")
			//обнуляем отступ в контейнере (иначе будет баг при перетаскивании колонок крсором мыши) 
			$(tfContainer).css("margin-left","0px")
		})
		var mouseDownAt;
		var totalMarginLeft;
		$(this).mousedown(function(e){
			mouseDownAt = { x: e.pageX, y: e.pageY }
			
			//var divContainer=this.parentElement;// Для замыкания области видимости переменной ( элемент "колонка")
			var divContainer=$(this).parent();
			divContainer.css('cursor','pointer')
			totalMarginLeft=parseInt(getStyle(divContainer[0],"margin-left"))
			//Используется Jquery метод css() - т.к в IE/Opera возвращает undefined
			totalMarginLeft=parseInt(divContainer.css("margin-left"))
			
			if (window.opera){//Отладка в Opera
				if (divContainer[0])
					window.opera.postError("element exist");
				else
					window.opera.postError("element don't exist");
				
				var mes="style:"+divContainer[0].style["margin-left"];// => undefined
				mes+=", Margin-left: "+totalMarginLeft+ " style: "+getStyle(divContainer[0],"margin-left")
				mes+=", currentStyle: "+divContainer[0].currentStyle[name]// => undefined
				mes+=", Jquery: "+divContainer.css("margin-left")
				window.opera.postError(mes)
			}
			//var displayAreaW=parseInt(getStyle(divContainer.parentElement,"width"))//Ширина отображаемой области
			var displayAreaW=parseInt(getStyle(divContainer.parent()[0],"width"))//Ширина отображаемой области
			var activAreaW=parseInt(getStyle(divContainer[0],"width"))//Ширина активной области - где размещается колонки
			var mouseMoveHandler=function(e){
				//var dY= e.pageY - mouseDownAt.y
				var dX=e.pageX - mouseDownAt.x//Приращение по оси X
				var buf1=activAreaW +(totalMarginLeft+Math.floor(dX/20))// MarginLeft is "-"!!!
				//console.log("buf1: %s (B: %s, A: %s)", buf1, activAreaW, displayAreaW)
				if (  (buf1 > displayAreaW)&&(buf1<activAreaW) ){
					totalMarginLeft+=Math.floor(dX/20)
					//divContainer.style["margin-left"]=totalMarginLeft+"px"
					divContainer.css("margin-left",totalMarginLeft+"px")
				}
				//return false;
			}
			var mouseUpHandler=function(e){
				mouseDownAt = null
				document.ondragstart = document.body.onselectstart = null
				$(document).unbind('mousemove',mouseMoveHandler)
				$(document).unbind('mouseup',this)
				divContainer.css('cursor','default')
			}
			$(document).bind('mousemove',mouseMoveHandler)
			$(document).bind('mouseup',mouseUpHandler)
			document.ondragstart = document.body.onselectstart = function() {return false}
			return false;
		})
	})
	
})

// Получаем объект  в котором размещаются колнки
// Добавляем к этому объекту новые функции
function tarifController(element){
	//alert("tarifController Start")
	element.tarifController=this;
	//ф-ция уменьшение размера объекта  на размер удаляемой колонки 
	this.smallerContainer=function(value){
		var widthStyle=getStyle(element,"width")
		element.style.width=parseInt(widthStyle)-value+"px";
	}
	//функция увеличения размера контейнера в котором размещаются колонки с тарифами
	this.growContainer=function(value){
		var widthStyle=getStyle(element,"width")
		element.style.width=parseInt(widthStyle)+value+"px";
	}
}
// Получение свойства style (name) определенного элемента (elem) 
// Иногда возвращает undefined в Opera и IE
function getStyle( elem, name ) { 
    // Если свойство присутствует в style[], значит, оно было 
    // недавно установлено (и является текущим) 
	
	if (elem.style[name]) 
       return elem.style[name]; 
	// В противном случае, попытка воспользоваться методом IE 
    else if (elem.currentStyle) 
       return elem.currentStyle[name]; 
  
    // Или методом W3C, если он существует 
    else if (document.defaultView && document.defaultView.getComputedStyle) { 
       // Вместо textAlign в нем используется традиционное правило 
       // написания стиля — 'text-align' 
       name = name.replace(/([A-Z])/g,"-$1"); 
       name = name.toLowerCase(); 
  
        // Получение объекта style и получение значения свойства 
       // (если оно существует) 
       var s = document.defaultView.getComputedStyle(elem,""); 
       return s && s.getPropertyValue(name); 
  
    // В противном случае, мы используем какой-то другой браузер 
    } else 
       return null; 
} 
//-------------------------------------------

// Обрабатываем окна
$(document).ready(function(){
	var messageWindow;
	$('.metka').mouseenter(function(e){
		//Определяем элемент содержащий сообщеение
		var mesNode=$(this).find('.message')
		var mesDimension={w:parseInt(mesNode.css('width')), h:parseInt(mesNode.css('height'))}// Определяем ширину и размер метки
		//Проверить на других браузерах: 
		var screenDimension=screenSize()
		
		var inf = "screen w:"+screenDimension.w+" screen h: "+screenDimension.h
		console.log(inf)
		var inf2="client x:"+e.clientX+" client y:"+e.clientY
		console.log(inf2)
		
		messageWindow= new lightWindow({
			width: mesDimension.w+'px',
			height:mesDimension.h+'px',
			left:e.clientX+"px"})
		//Координаты левого верхнего угла сообщения
		var posX=0;
		var posY=0;
		//ось Y: По умолчанию сообщение устанавливается над меткой 
		if (e.clientY>mesDimension.h+20){
			posY=e.pageY-(mesDimension.h+20)
		}else{// Если сообщение вылезает за пределы видимой части экрана, то размещается ниже метки
			posY=e.pageY+20
		}
		var mes1="e.clientX: "+e.clientX+" screenDimension.w: "+screenDimension.w+" mesDimension.w: "+mesDimension.w;
		//ось X: Сообщение располагается справа от метки
		if (e.clientX<(screenDimension.w - mesDimension.w-20)){
			posX=e.pageX+10
		}else{//Если вылезает за пределы видимой части экрана то слева от метки
			posX=e.pageX-(mesDimension.w+10)
		}
		console.log(mes1)
		messageWindow.addStyle({top:posY+'px', left:posX+'px'})
		messageWindow.make( mesNode.html())// Выводим на экран
	})
	$('.metka').mouseleave(function(e){
		if(messageWindow&&messageWindow.remove)
			messageWindow.remove()
	})
if ($.browser.msie) {
	$('#number li:odd, #headerColumn li:odd, .tarif-plan li:odd').css("background-color","#E9E9E9")
}

})
//Объект Окно
function lightWindow(styleObj){
	this.winNode= document.createElement("div")
	if (styleObj!=undefined)
		this.addStyle(styleObj)
	document.body.appendChild(this.winNode)
}
with(lightWindow){
	prototype.addStyle=function(styleObj){
		for(var i in styleObj){
			$(this.winNode).css(i,styleObj[i])
			//this.winNode.style[i]=styleObj[i] //Работает в Chrome!
			// в chrome "border-radius" , а в FF "borderRadius"
		}
	}
	prototype.remove=function(){
		if (this.winNode!=null){//Чтобы избешать лишних ошибок с повторным удалением проверяем на null
			document.body.removeChild(this.winNode)
			this.winNode=null// обнуляем окно
			}
	}
	// метод выводящий сообщение
	prototype.make=function(html){
		$(this.winNode).addClass('mes_win')
		this.winNode.innerHTML=html
	}
}
//-----------------------------------------------------------------------
function screenSize() {
    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));
    return {w:w, h:h};
}
