var priceSave, calcMode;
var sImg = "38";
var nImg = "78";

var imgOver = function () {this.setStyle('border-bottom','3px solid #714000'), this.set('opacity', '0.8')}
var imgOut = function () {this.setStyle('border-bottom','3px solid #E8D299'), this.set('opacity', '1')}

var heightOver = function () {this.setStyle('border-bottom','3px solid #714000')}
var heightOut = function () {this.setStyle('border-bottom','3px solid #E8D299')}

var currentActive = true;

/*window.addEvent('domready', function(){
    hideSectionVis();
	initSections();
});*/
//Set titles
//Initiate button with event
//reset data
//build small SectionList
function initSections() {
	calcMode = 0;
	$('orderForm').setStyle('display', 'none');
//	$('content').getElement('h1').set('text', 'Рассчитай шкаф-купе. Секции');
//	$('sectionsList').getElement('h2').set('text', 'Образцы секций');
	initButtonsS();
	initHeightClickable();
	resetData();
	buildSectionsList();
}
function initHeightClickable() {
	$('rightHeight').addEvents({
		click: function() {changeCurrent(this)},
		mouseover: heightOver,
		mouseout: heightOut
	});
}

//Set titles
//Initiate button with event
//destroy sections list
//build frontside list
function initFrontside() {
	calcMode = 1;

	priceSave = $('price').get('html');

	//if (getCurrent().id == 'rightHeight') {$('selectedElements').getLast().grab('currentS')}
	var sElements = $('selectedElements').getElements('.el');
	var i=0; var fs = false;
	while (sElements[i]) {
		if ((sElements[i].id != 'bleft') && (sElements[i].id != 'bright') && (sElements[i].id != 'bookshelf')) {
			sElements[i].grab('currentS');
			fs=true;
			break;
		}
	i++;
	}
	if (!fs) {$('currentS').setStyle('visibility', 'hidden'); currentActive = false};

	$('holder').setStyle('height', '420px');
	$('content2').getElement('h1').set('text', 'Рассчитай шкаф-купе. Фасады');
	$('sectionsList').getElement('h2').set('text', 'Образцы фасадов');

	var remButtons = $('selectedElements').getElements('.remItem');
	remButtons.setStyle('display','none');
		
	initButtonsF();
	buildFrontsideList();
}
function initOrder() {
	calcMode = 2;
	$('holder').setStyle('height', '360');
	$('content2').getElement('h1').set('text', 'Заказать шкаф-купе');
	$('buttonsContainer').set('html', '');
	$('currentS').setStyle('display', 'none');
	$('sectionsList').setStyle('display', 'none');
	$('orderForm').setStyle('display', 'block');
	$('prevF').addEvent('click', function(){initPreviousFrontside()});

	var remButtons = $('selectedElements').getElements('.remFItem');
	remButtons.setStyle('display','none');
	var images = $('selectedElements').getElements('img');
	images.removeEvents('click');

	var spanEl = $('selectedElements').getElements('.el');
	spanEl.removeEvents('mouseover');
	spanEl.removeEvents('mouseout');


	$('rightHeight').removeEvents({
		click: function() {changeCurrent(this)},
		mouseover: heightOver,
		mouseout: heightOut
	});

	generateOrderArray();
}
//Builds bottom section list.
//Add events to them.
//Add three elements to "selectedSections" preview.
function buildSectionsList() {
	var i=0;
	var smallList = "";
	var wb = "";

	while ( wSections[i] )  {
		wb = "nmb";
		if ((wSections[i].type == "bleft") || (wSections[i].type == "bright")) wb = "smb";
		smallList = smallList + '<li id=\"s'+wSections[i].id+'\" class=\"'+wb+'\"><img src=\"'+wSections[i].img+'\" '+wb+' height=235 alt=\"'+wSections[i].name+'\" title=\"'+wSections[i].name+'\" /><span class=\"addItem\" title=\"Добавить секцию\"></span><span class=\"itemWidth\"><span><em>'+wSections[i].size+'</em></span></span><span class=\"itemPrice\"><span>'+wSections[i].price+'</span> грн</span></li>';
		i++
	}
	$('sections').set('html', smallList);

	var addButtons = $('sections').getElements('.addItem');
	var sectionImages = $('sections').getElements('img');

	addButtons.addEvent('click', function(){addSection(this);});
	//sectionImages.addEvent('click', function(){addSection(this);});

	sectionImages.addEvents({
		click: function(){addSection(this);},
		mouseover: imgOver,
		mouseout: imgOut
	});


	/*
	if (!$('selectedElements').hasChildNodes()) {
		$('s1').getElement('.addItem').fireEvent('click');
		$('s2').getElement('.addItem').fireEvent('click');
		$('s3').getElement('.addItem').fireEvent('click');
	}*/
}

//Builds bottom frontside list.
//Add events to them.
function buildFrontsideList() {
	var i=0;
	var smallList = "";

	while ( wFrontside[i] )  {
		smallList = smallList + '<li id=\"f'+wFrontside[i].id+'\"><img src=\"'+wFrontside[i].img+'\" height=235 alt=\"'+wFrontside[i].name+'\" title=\"'+wFrontside[i].name+'\" /><span class=\"addItem\" title=\"Добавить секцию\"></span><span class=\"itemWidth\"><span><em>'+wFrontside[i].size+'</em></span></span><span class=\"itemPrice\"><span>'+wFrontside[i].price+'</span> грн</span></li>';
		i++
	}
	$('sections').set('html', smallList);

	var frontsideImages = $('sections').getElements('img');
	var addButtons = $('sections').getElements('.addItem');
	addButtons.addEvent('click', function(){addFrontside(this)});

	frontsideImages.addEvents({
		click: function(){addFrontside(this);},
		mouseover: imgOver,
		mouseout: imgOut
	});
}

//resetting starting values.
function resetData() {
	$('topWidth').getElement('span em').set('text', '0');
  $('price').set('text', '0');
	$('topWidth').setStyle('width', '0');
}
//Event for add Section
//Turn visibility if it was turned off after "alldelete"
//add section with image, current (if needed), events
//logic of adding sections (brders)
function addSection(el) {
	var initiateCurrent = "";
	var currentEl = getCurrent();
	var eIndex = getIndex(el);														//element index number (1,2 .. n)
	var eId = el.getParent().get('id');
	var altText = wSections[eIndex].name;								//name (alt, titile) of el
	var selectedElements = document.getElementById('selectedElements');
	var sectionEl = new Element('span', {'class' : 'el'});
	var imgWidth = nImg;																				//standard size for img

	showSectionVis();

	if (wSections[eIndex].type == "bleft" || wSections[eIndex].type == "bright") imgWidth = sImg;							//width for brder elements

	sectionEl.innerHTML = '<img class=\"'+eId+'\" src=\"'+wSections[eIndex].img+'\" width=\"'+imgWidth+'\" height=\"312\" alt=\"'+altText+'\" title=\"'+altText+'\" /><span class=\"remItem\"></span>'+initiateCurrent+'</span>';
	sectionEl.getElement('img').addEvent('click', function(){changeCurrent(this)});
	sectionEl.getElement('.remItem').addEvent('click', function(){remSection(this, imgWidth, wSections[eIndex].size, wSections[eIndex].price)});

	sectionEl.addEvents({
		mouseover: imgOver,
		mouseout: imgOut
	});

	if (wSections[eIndex].type) sectionEl.id = wSections[eIndex].type;
		else currentActive = true;
	
		
	if (!(wSections[eIndex].type == "bleft" || wSections[eIndex].type == "bright") || ((wSections[eIndex].type == "bright") && !document.getElementById('bright')) || ((wSections[eIndex].type == "bleft") && !document.getElementById('bleft'))) {
		if ( $('holder').getStyle('width').toInt() > 600 ) {$('holder').setStyle('width', '680px')};
		incSection(imgWidth, wSections[eIndex].size, wSections[eIndex].price);
	}
	

	if (!(wSections[eIndex].type == "bleft" || wSections[eIndex].type == "bright")) {
		if (currentEl.id == "rightHeight") {
			selectedElements.appendChild(sectionEl);
		} else selectedElements.insertBefore(sectionEl,currentEl);
	}
	else {
			if ((wSections[eIndex].type == "bleft") && !document.getElementById('bleft')) {
				if (!selectedElements.hasChildNodes()) {
					selectedElements.appendChild(sectionEl);
				}
				else {
					selectedElements.insertBefore(sectionEl,selectedElements.firstChild)
				}
			}
			else if ((wSections[eIndex].type == "bleft") && document.getElementById('bleft')) {
				var borderIndex = $('bleft').getElement('img').get('class');
				borderIndex = borderIndex.substring(1, el.length);
				if (!(eIndex == borderIndex)) {
					decSection(imgWidth, wSections[borderIndex].size, wSections[borderIndex].price)
					incSection(imgWidth, wSections[eIndex].size, wSections[eIndex].price);
					sectionEl.replaces('bleft');
				}
			}
			else if ((wSections[eIndex].type == "bright") && !document.getElementById('bright')) {
				selectedElements.appendChild(sectionEl);
				if (currentEl.id == "rightHeight") sectionEl.grab('currentS');
			}
			else if ((wSections[eIndex].type == "bright") && document.getElementById('bright')) {
				borderIndex = $('bright').getElement('img').get('class');
				borderIndex = borderIndex.substring(1, el.length);
				if (!(eIndex == borderIndex)) {
					sectionEl.grab('currentS');

					decSection(imgWidth, wSections[borderIndex].size, wSections[borderIndex].price)
					incSection(imgWidth, wSections[eIndex].size, wSections[eIndex].price);
					sectionEl.replaces('bright');
				}
			}
	}
}
function addFrontside(el) {
	var eIndex = getIndex(el);														//element index number (1,2 .. n)
	var eId = el.getParent().get('id');
	
	if (getCurrent().getElement('.fimg')) {
		var cIndex = getCurrent().getElement('.fimg').get('class');
		cIndex = cIndex.substring(6, cIndex.length).toInt();
	}
	var frontsideImg = new Element('img', {'class':'fimg '+eId,'src':''+wFrontside[eIndex].img, 'title' : wFrontside[eIndex].name, 'alt' : wFrontside[eIndex].name});
	frontsideImg.addEvent('click', function(){changeCurrent(this)});
	frontsideImg.addEvent('mouseover', function(){
		this.set('opacity', fOpacity);
	});
	frontsideImg.addEvent('mouseout', function(){
		this.set('opacity', '1');
	});

	if (getCurrent() && !(getCurrent().get('id') == 'bright' || getCurrent().get('id') == 'bookshelf' || getCurrent().get('id') == 'bleft') && !(getCurrent().getElement('.fimg')))
		{
			if (currentActive) {
				var remFrontsideB = new Element('span', {'class':'remFItem'});
				remFrontsideB.addEvent('click', function(){remFrontside(this, wFrontside[eIndex].price)});

				getCurrent().adopt(frontsideImg, remFrontsideB);
				var price = $('price').get('text').toInt() + wFrontside[eIndex].price.toInt();
				$('price').set('text', price+',00');
			}
		}
		//IN CASE IF THERE IS ALREADY A FRONTSIDE and its not THE SAME (as inserting)
		else if (getCurrent().getElement('.fimg') && !(eIndex.toInt() == cIndex.toInt()) ) {
			if (currentActive) {
				price = $('price').get('text').toInt() - wFrontside[cIndex].price.toInt() + wFrontside[eIndex].price.toInt();
				$('price').set('text', price+',00');

				var currentImage = getCurrent().getElement('.fimg');
				currentImage.dispose();

				getCurrent().grab(frontsideImg);
			}
		}
}
//If there is any current - return it parent element. Otherwise 'false'
function getCurrent() {
	var el = document.getElementById('currentS');
	if (el) {el = el.parentNode;return el}
	return false
}

//increase values on AddSection event
//Increase total price, size and width of container
function incSection(elWidth, elSize, elPrice) {
	elWidth = elWidth.toInt();
	elSize = elSize.toInt();
	elPrice = elPrice.toInt();

	var topWidth = $('topWidth').getStyle('width').toInt();
	$('topWidth').setStyle('width', elWidth + topWidth);
	var length = $('topWidth').getElement('span em').get('text').toInt() + elSize;
	$('topWidth').getElement('span em').set('text', length);
	var price = $('price').get('text').toInt() + elPrice;
	$('price').set('text', price+',00');
}

//decrease values on AddSection event
//decrease total price, size and width of container
function decSection(elWidth, elSize, elPrice) {
	elWidth = elWidth.toInt();
	elSize = elSize.toInt();
	elPrice = elPrice.toInt();

	var topWidth = $('topWidth').getStyle('width').toInt();
	$('topWidth').setStyle('width', topWidth - elWidth);
	var length = $('topWidth').getElement('span em').get('text').toInt() - elSize;
	$('topWidth').getElement('span em').set('text', length);
	var price = $('price').get('text').toInt() - elPrice;
	$('price').set('text', price+',00');
}
//return index "number" from elements id/class s10 => 10
function getIndex(el) {
	el = el.parentNode;
	el = el.id;
	el = el.substring(1, el.length); //takes numbers from 2-nd to last char (s10 => 10)
	return el;
}

//decrease total price,width,size
//change position of current if it is being removing
//dispose  element
//if its last element - show "informer" text
function remSection(el, elW, elS, elP) {
	decSection(elW, elS, elP);
	el = el.getParent();

	if (el.hasChild('currentS')) {
		if (el.getNext()) {el.getNext().grab('currentS')}
		else if ((el.getPrevious()) && el.getPrevious().id != 'bleft' ) {el.getPrevious().grab('currentS')}
				 else {$('rightHeight').grab('currentS')}
	}

	el.dispose();
	if (!$('selectedElements').hasChildNodes()) {hideSectionVis()};

	if ( ($('holder').getStyle('width').toInt() ==  680) && ($('selectedElements').getStyle('width').toInt() < 600)) {
		$('holder').setStyle('width', 'auto')
	};
}
function remFrontside(el, elP) {
	var fImg = el.getParent().getElement('.fimg');

	var price = $('price').get('text').toInt() - elP;
	$('price').set('text', price+',00');

	fImg.dispose();
	el.dispose();
}
//switch 'current' element on click (if not leftBrder or already current)
function changeCurrent(el) {
	if ((calcMode == 1) && ((el.id == 'bleft') || (el.id == 'bookshelf'))) return;
	if ((calcMode == 0) && (el.id == 'rightHeight') && !document.getElementById('bright')) el.grab('currentS')

	el = el.getParent();
	if (el.id != 'bleft' && (!el.getElementById('currentS')) && !(((el.id == 'bright') || (el.id == 'bookshelf')) && (calcMode == 1))) {
		el.grab('currentS')
	}


}
//hide blank info (if all sections was deleted)
//create informer text
function hideSectionVis() {
	$('holder').setStyle('visibility', 'hidden');
	$('sForm').setStyle('visibility', 'hidden');
	$('informer').setStyle('display', 'inline');
}
//hide informer
//show sections
function showSectionVis() {
	if ($('holder').getStyle('visibility', 'hidden')) {
		$('holder').setStyle('visibility', 'visible');
		$('sForm').setStyle('visibility', 'visible');
		$('informer').setStyle('display', 'none');
	}
}
//create buttons for sections add event to go next to frontside
function initButtonsS() {
	$('buttonsContainer').innerHTML = "";
	var bNext = new Element("input", {'type' : 'button', 'value' : 'Выберем фасады'});
	bNext.addEvent('click', function(){initFrontside()});
	$('buttonsContainer').set('html', '<i class="bLeft inSection"><i class="bRight"><i></i></i></i>');
	$('buttonsContainer').getElement('.bLeft .bRight i').grab(bNext);
}
function initButtonsF() {
	$('buttonsContainer').innerHTML = "";
	$('buttonsContainer').set('html', '<i class="bLeft inSection"><i class="bRight"><i><input id="prev" name="done" type="button" value="Назад" /></i></i></i><i class="bLeft inSection ind"><i class="bRight"><i><input id="next" name="done" type="button" value="Готово" /></i></i></i>')
	$('prev').addEvent('click', function(){initPreviousSections()});
	$('next').addEvent('click', function(){initOrder()});
}
function initPreviousSections() {
	calcMode = 0;
	if ($('currentS').getStyle('visibility', 'hidden')) $('currentS').setStyle('visibility', 'visible');
	$('content2').getElement('h1').set('text', 'Рассчитай шкаф-купе. Секции');
	$('sectionsList').getElement('h2').set('text', 'Образцы секций');
	$('price').set('html', priceSave);
	$('selectedElements').getElements('.fimg').destroy();
	$('selectedElements').getElements('.remFItem').destroy();

	initButtonsS();
	buildSectionsList();

	var remButtons = $('selectedElements').getElements('.remItem');
	remButtons.setStyle('display', 'block');
	initHeightClickable()
}

function initPreviousFrontside() {
	calcMode = 1;
	$('content2').getElement('h1').set('text', 'Рассчитай шкаф-купе. Фасады');
	var remButtons = $('selectedElements').getElements('.remFItem');
	remButtons.setStyle('display','block');
	$('currentS').setStyle('display', 'block')
	$('sectionsList').setStyle('display', 'block');
	$('orderForm').setStyle('display', 'none');

	$('holder').setStyle('height', '420');
	$('selectedElements').getElements('img').addEvent('click', function() {changeCurrent(this)});
	
	initButtonsF();

	var spanEl = $('selectedElements').getElements('.el');
	spanEl.addEvents({
		click: function() {changeCurrent(this)},
		mouseover: imgOver,
		mouseout: imgOut
	});
}
function generateOrderArray() {
	var elImg = $('selectedElements').getElements('img');
	var imgClass;
	
	$('orderArray').innerHTML = "";
	var i = 0;
	while (elImg[i]) {
		imgClass = elImg[i].get('class');
		var inputEl = new Element('input', {'type':'hidden', 'value':getArticle(imgClass), 'name':'wardrobe['+i+']'});
		$('orderArray').grab(inputEl);
		i++;
	}
}
function getArticle(imgClass) {
	if (imgClass.charAt(0) == "s") {
		imgClass = imgClass.substring(1, imgClass.length);
		imgClass.toInt();
		return wSections[imgClass].article
	} else {
		imgClass = imgClass.substring(6, imgClass.length);
		imgClass.toInt();
		return wFrontside[imgClass].article
	}
}

function checkFieldsFill() {
/* проверяем заполнены ли обязательные поля */
    var uname = $('txtUsername').get('value');
    var uphone = $('txtPhone').get('value');
    
    if ((uname !='') && (uphone != '')) {
        $('btnSend').set('disabled', '');
    } else {
        $('btnSend').set('disabled', 'disabled');
    }
}