var current_step = 1;							/* Текущий шаг */
var selected_package = 0;						/* Выбранный пакет */
var selected_templates = new Array;				/* Выбранные шаблоны */
var selected_templates_previews = new Array;	/* Превьюшки выбранных шаблонов */

function StepOver(step){
	if(step > current_step){
		setElementOpacity(document.getElementById('topHeader'), 0.3);
		setElementOpacity(document.getElementById('header'), 0.3);
		setElementOpacity(document.getElementById('footer'), 0.3);
		for(var i=(current_step+1); i<=3; i++){
			setElementOpacity(document.getElementById('step'+i), 0.9);
		}
	}
}
function StepOut(){
	setElementOpacity(document.getElementById('topHeader'), 1);
	setElementOpacity(document.getElementById('header'), 1);
	setElementOpacity(document.getElementById('footer'), 1);
	for(var i=1; i<=3; i++){
		setElementOpacity(document.getElementById('step'+i), 1);
	}
}
function Step_Over(){
		setElementOpacity(document.getElementById('topHeader'), 0.3);
		setElementOpacity(document.getElementById('header'), 0.3);
		setElementOpacity(document.getElementById('footer'), 0.3);
}
function Step_Out(){
	setElementOpacity(document.getElementById('topHeader'), 1);
	setElementOpacity(document.getElementById('header'), 1);
	setElementOpacity(document.getElementById('footer'), 1);
}

function PassTemplates(){
	switch(selected_package){
		case 1:
			document.getElementById('package_image').src = '/templates/prosto/images/paket-prosto.gif';
			document.getElementById('package').value = 'Prosto';
		break;
		case 2:
			document.getElementById('package_image').src = '/templates/prosto/images/paket-prosto-plus.gif';
			document.getElementById('package').value = 'Prosto+';
		break;
	}
	document.getElementById('templates').value = '#' + selected_templates.join(', #');
	NextStep();
}

function PassTemplatesI(){
	switch(selected_package){
		case 1:
			document.getElementById('package_image').src = '/templates/prosto/images/paket-prosto.gif';
			document.getElementById('package').value = 'Prosto';
		break;
		case 2:
			document.getElementById('package_image').src = '/templates/prosto/images/paket-prosto-plus.gif';
			document.getElementById('package').value = 'Prosto+';
		break;
	}
	document.getElementById('templates').value = '#' + selected_templates.join(', #');
	//setElementOpacity(document.getElementById('wrapper'), 1);
	HideAlert1Block();

	NextStep();
}


function SelectPackage(num){
	selected_package = num;
	NextStep();
}

function SelectTemplate(id, preview){
	var alert1 = document.getElementById('alert1');
	var template_isset = false;
	if(selected_templates.length < 4){
		for(var i=0; i<selected_templates.length; i++){
			if(selected_templates[i] == id){
				template_isset =true;
				alert('Вы уже выбрали данный макет!');
			}
		}
		if(template_isset == false){
			selected_templates.push(id);
			selected_templates_previews.push(preview);
			
			alert1.style.left = document.body.clientWidth/2 - 210 + 'px';
			alert1.style.top  = document.documentElement.scrollTop + 150 + 'px'; // document.body.clientHeight/2 - win.height/2;
			//alert(document.body.clientWidth+'|'+document.body.clientHeight+'|'+document.documentElement.scrollTop);
			ShowShadowBlock();
			alert1.style.display = 'block';
		}
	}
	document.getElementById('choiseTopPad').innerHTML = GetChoiceBlockContent();
	document.getElementById('choiseBottomPad').innerHTML = GetChoiceBlock2Content();
	document.getElementById('yourChoiseDesign').innerHTML = GetYourChoiseDesign();
	document.getElementById('templates_link_'+id).innerHTML = '<span>Макет выбран</span>';
	ShowChoiceBlock();
}

function RemoveTemplate(id){
	for(var i=0; i<selected_templates.length; i++){
		if(selected_templates[i] == id){
			selected_templates.splice(i,1);
			selected_templates_previews.splice(i,1);
		}
	}
	document.getElementById('choiseTopPad').innerHTML = GetChoiceBlockContent();
	document.getElementById('choiseBottomPad').innerHTML = GetChoiceBlock2Content();
	document.getElementById('templates_link_'+id).innerHTML = "<a href='javascript: SelectTemplate({$v.template_id}, '{$v.big}')'>Выбрать!</a>";

	if(selected_templates.length > 0){
		ShowChoiceBlock();	
	} else {
		HideChoiceBlock();
	}
}

function ShowChoiceBlock(){
	document.getElementById('choice').style.display = 'block';
}

function ShowAlert2Block() {
			var alert2 = document.getElementById('alert2');
			alert2.style.left = document.body.clientWidth/2 - 210 + 'px';
			alert2.style.top  = document.documentElement.scrollTop + 150 + 'px';
			ShowShadowBlock();
			alert2.style.display = 'block';
}
function ShowShadowBlock() {
			var layer = document.getElementById("layerShadow");
			var img	  = document.images["bg"];

			layer.style.width  = document.body.clientWidth;
			layer.style.height = document.body.clientHeight;		

			img.width  = document.body.clientWidth;
			img.height = document.body.clientHeight;

			setElementOpacity(document.getElementById('layerShadow'), 0.9);
			layer.style.display = "block";
}

function HideChoiceBlock(){
	document.getElementById('choice').style.display = 'none';
}
function HideAlert1Block(){
	document.getElementById('alert1').style.display = 'none';
	HideShabowBlock();
}
function HideAlert2Block(){
	document.getElementById('alert2').style.display = 'none';
	HideShabowBlock();
}

function HideShabowBlock(){
	var layer = document.getElementById("layerShadow");
	var img	  = document.images["bg"];

	img.width  = 0;
	img.height = 0;

	layer.style.display = "none";
}

function GetChoiceBlockContent(){
	var pads = '<table border="0" class="choice-bg"><tr>';
	for(var i=0; i<selected_templates.length; i++){
		pads += '<td width="107"><div class="choice-numb"'+ ((i == selected_templates.length-1)?' style="background:none;"':'') +'><span>#' + selected_templates[i] + '</span>' +
				  '<a href="javascript: RemoveTemplate('+selected_templates[i]+')" class="button-choice"><img src="/templates/prosto/images/close.gif" width="19" height="17" alt="" /></a>' +
				  '<a href="javascript: doTooltip(event,\''+selected_templates_previews[i]+'\')" class="button-choice"><img src="/templates/prosto/images/lupa.gif" width="18" height="17" alt="" onmouseover="doTooltip(event,\''+selected_templates_previews[i]+'\')" onmouseout="hideTip()" /></a>' +
				  '</div></td>';
	}
	pads += '<td valign="top"><div class="button-choice"><a href="javascript: PassTemplates();" class="button-choice"><img src="/templates/prosto/images/choice.gif" width="156" height="52" alt="" /></a></div></td></tr></table>';
	return pads;	
}

function GetChoiceBlock2Content(){
	var pads = '<table border="0" width="215">';
	var line = 0;
	for(var i=0; i<selected_templates.length; i++){
		line++;
		pads += '<tr><td><div class="choice-numbI"><span>#' + selected_templates[i] + '</span>' +
				  '<a href="javascript: doTooltip(event,\''+selected_templates_previews[i]+'\')" class="button-choice"><img src="/templates/prosto/images/lupai.gif" width="84" height="17" alt="" onmouseover="doTooltip(event,\''+selected_templates_previews[i]+'\')" onmouseout="hideTip()" /></a>' +
				  '<a href="javascript: RemoveTemplate('+selected_templates[i]+')" class="button-choice"><img src="/templates/prosto/images/closei.gif" width="68" height="17" alt="" /></a>' +
				  '</div></td></tr>';
	}
	pads += '</table>';
	return pads;	
}

function GetYourChoiseDesign(){
	var pads = '';
	var line = 0;
	for(var i=0; i<selected_templates.length; i++){
		line++;
		pads = 'Выбран макет #' + selected_templates[i] + '';
	}
	return pads;	
}

function HideSteps(){
	for(var i=1; i<=3; i++){
		document.getElementById('step_'+i).style.display = (i == current_step) ? 'block' : 'none';	
	}
}

function NextStep(){
	if(current_step<3){
		Step(current_step+1);		
	}
}

function Step(num){
	document.getElementById('step_'+current_step).style.display = 'none';
	document.getElementById('step_'+num).style.display = 'block';
	ActivateStepPad(num)
	current_step = num;
}

function ActivateStepPad(step){
	switch(step){
		case 1:
			document.getElementById('step'+current_step).className = 'step'+current_step;
			document.getElementById('step'+step).className = 'step'+step + 'a';
		break;
		case 2:
			document.getElementById('step1').className = 'step1v';
			document.getElementById('step2').className = 'step2a';
		break;
		case 3:
			document.getElementById('step1').className = 'step1vi';
			document.getElementById('step2').className = 'step2v';
			document.getElementById('step3').className = 'step3a';
		break;
		
	}
}