{% extends "sro2/main.html" %}
{% block contentheader %}
	Организация
	<a href="{{ next }}"><span class="ui-state-default button ui-corner-all">{{ org.name }}</span></a>
	Ввод нового адреса
{% endblock %}

{% block content %}
    <style>
    .ui-button {
        margin-left: -1px;
		font-size:11pt;
		height: 21px;
		margin-top: 0px;
    }
    .ui-button-icon-only .ui-button-text {
        padding: 0em;
    } 
    .ui-autocomplete-input {
        margin: 0;
		font-size:11pt;
		margin-top: 4px;
        padding-left: 3px;
    }
    .ui-autocomplete {
        max-height: 200px;
        overflow-y: auto;
        font-size: 11pt;
    }

.divType input {
    width: 200px;
}

.divTypeAdd input {
    width: 200px;
}

.divAddress input {
    width: 550px;
    margin-left: 10px; 
}

.divAddressAdd input {
    width: 550px;
    margin-left: 10px;
    font-size: 11pt;
    margin-top: 4px;
    padding-left: 4px; 
}

.divPlus {
    height: 19px;
    width: 30px;
    margin-top: 4px;
    margin-left: 6px;
}

.divPlus span{
    margin-top: 1px;
    margin-left: 6px;   
}

.divRow {
    width: 885px;
    /*height: 21px;
    margin-top: 6px;*/
    clear: left; 
    cursor:pointer;
}

.inputLabel {
    font-size: 11pt;
    width: 200px;
    margin-right: 35px;
    margin-top: 4px;
    margin-bottom: 0px;
    padding-left: 3px;
}

.divTypeAddress {
	font-size:11pt;
	margin-top:4px;
	height:17px;
	padding-top:1px;
	padding-bottom:1px; color:#222;
	font-family: Verdana, Arial, sans-serif;
	margin-bottom:0px;
	width:106px;
}

.disabled{
	 opacity: 0.5;
}
</style>
    

	<script>
        $(function() {
				var modeAdd = false;
				loadImage("divAddress0");
                $('#divAddress0').load(
				    '{% url gw.views.index %}address/getcountry/',
					function () {
					   $('#divAddress0 select').attr('id', 'selectAddress0');
					   $('#divAddress0 select').show();
					   $('#divAddress0 input').val('РОССИЯ');
                       $('#divAddress0 select').val(170);
					   $('#divAddress0 select').combobox();
					   loadNextType('divAddress0');
					}
				);
				hideElements();
				showButtonPlus(0, "plus");
				createTypes();
                
                $('.eb').click(function() {
                    if ($(this).hasClass('ui-state-active')) {
				        $(this).removeClass('ui-state-active')
				    }else{
				        $(this).addClass('ui-state-active')	
				    }                        
                })
				
				function createTypes() {
                    last = $('#divSelectTypes select option').size() - 1;
					$('#divSelectTypes select option').each(function(i){
						if ($(this).val() != '') {
						  var input = $( "<div>" + $(this).html() + '</div>' )
                            .appendTo('#divTypes')
                            .addClass("button ui-state-default eb left divTypeAddress")
							.css('border-color', '#AAA')
							.css('color', '#222')
							.attr('id', 'Type' + $(this).val())
						  if (i == 1){
						  	input.addClass('ui-corner-left').css('margin-left', '10px');
						  }
						  if (i == last){
							  	  input.addClass('ui-corner-right');
					      }
						  if (i == 1 && i == last) {
                              input.addClass('ui-state-active');
                          }
						}
					})		
				}
							
                function onAutocompleteSelect(input){
					var div_id = input.parent().attr('id');
					var type = div_id.substring(0, div_id.length - 1);
					var number = getNumberFromId(div_id);
					if (type == "divAddress"){
					   loadNextType(div_id);
					}
                    if (type == "divType"){
                       loadNextAddress(div_id);
                    }
                    if (type == "divTypeAdd"){
                       $('#divAddressAdd' + number + ' input').focus();
                    }     
                }
						
				function loadNextType(divAddress_id) {
					var number = parseInt(divAddress_id.substring(divAddress_id.length - 1, divAddress_id.length));
					clearAddFieds();
					modeAdd = false;
					if (number == 7){
						show3AddFields(divAddress_id);						
						showButtonPlus(number + 1, "plus");
					}else{
					   hideElements();			
					   if ($('#' + divAddress_id + ' select').val() != ''){					   
					       var divType_id = 'divType' + (number + 1);
                           removeSelects(number + 1, number);
					       loadImage(divType_id);
					       $('#' + divType_id).load(
					           '{% url gw.views.index %}address/gettype/' + $('#' + divAddress_id + ' select').val() + '/',
                                function() {
                                    if ($('#' + divType_id + ' select option').length == 1){
										$('#' + divType_id + ' select').remove();
										show3AddFields(divAddress_id);
                                    }else{
									   $('#' + divType_id + ' select').attr('id', 'selectType' + (number + 1));
                                       $('#' + divType_id + ' select').combobox();
									   showButtonPlus(number + 1, "plus");
									   $('#' + divType_id + ' input').focus();
								    }
                                }						   
					       );
                        }else{
                            removeSelects(number, number);
                        }	
					}			
				}
                
                function loadNextAddress(divType_id) {
                    hideElements();
					var number = divType_id.substring(divType_id.length - 1, divType_id.length);
                    clearAddFieds();
                    modeAdd = false;
                    if ($('#' + divType_id + ' select').val() != ''){                        
                        var divAddress_id = "divAddress" + number;
                        var divAddressPrev_id = "divAddress" + (parseInt(number) - 1);
                        removeSelects(number, number);			
                        loadImage(divAddress_id);
					    $('#' + divAddress_id).load(
					        '{% url gw.views.index %}address/getaddress/' + $('#' + divAddressPrev_id + ' select').val() + '/' + $('#' + divType_id + ' select').val() + '/',
							function () {
								$('#' + divAddress_id + ' select').attr('id', 'selectAddress' + number);
								$('#' + divAddress_id + ' select').combobox();
								showButtonPlus(number, "plus");							
								$('#' + divAddress_id + ' input').focus();
							}
						);
                    }else{
						removeSelects(number, number - 1);
					}
				}
				
				function loadImage(id) {
					$('#' + id).html("<img src='{% url views.index %}static/ajax-loader.gif' style='margin-bottom: -5px; margin-left: 10px;' height='20px'>");
				}
				
				function removeSelects(numberType, numberAddress) {
                    $('.divType').each(function(i) {
                        var divType_id_current = $(this).attr('id');
                        var number_current = divType_id_current.substring(divType_id_current.length - 1, divType_id_current.length);
                        if (parseInt(number_current) > numberType){
							$(this).html('');
                        }
                    })
                    $('.divAddress').each(function(i) {
                        var divAddress_id_current = $(this).attr('id');
                        var number_current = divAddress_id_current.substring(divAddress_id_current.length - 1, divAddress_id_current.length);
                        if (parseInt(number_current) > numberAddress){
							$(this).html('');
                        }
                    })					
				}
				
				function hideElements() {
                    $('#labelZip').hide();
					$('#inputZip').hide();
					$('#buttonSave')	
                       .addClass('disabled')
                       .unbind('click');
				}
				
                function showBottom(divAddress_id) {
                    $('#buttonSave')
					   .removeClass('disabled')
					   .unbind('click')
					   .click(function(){
					       buttonSave_onclick();
					   });
					if (divAddress_id != 0) {
					   $('#zip').load(
					       '{% url gw.views.index %}address/getzip/' + $('#' + divAddress_id + ' select').val() + '/',
					       function () {
					           if ($('#zip').html() != 'None'){
						          $('#inputZip').val($('#zip').html());
						      }else{
						          $('#inputZip').val('');
						      }
						      $('#labelZip').show();
                              $('#inputZip').show();
					       }
					   )
					}else{
						$('#labelZip').show();
						$('#inputZip').show();
					}
				}
				
				function show3AddFields(divAddress_id) {
                    $('.divTypeAdd').each(function(i) {
                       var divTypeAdd_id = $(this).attr('id');
                       var number = getNumberFromId(divTypeAdd_id);                    
                       if (number <= 3) {
                           $(this).load(
                                '{% url gw.views.index %}address/getalltypes/',
                                function() {
                                    $('select', this).attr('id', 'selectTypeAdd' + number);
                                    $('select', this).combobox();
                                    $('#divAddressAdd' + number).html('');
                                    var input = $( "<input>" )
                                        .appendTo('#divAddressAdd' + number)
                                        .addClass("ui-widget ui-widget-content ui-corner-all")
                                    if (number == 1) {
                                        $('input', this).val('д (Дом)');
                                        $('select', this).val(97);
                                        $('#divAddressAdd' + number + ' input').focus();
                                    }
                                    
                                }
                            )
                        }
                     })
					 showBottom(divAddress_id);			
			    }
				
				function showButtonPlus(number, act) {
				    $('.divPlus').each(function(i) {
					   var divPlus_id_current = $(this).attr('id');
					   var number_current = divPlus_id_current.substring(divPlus_id_current.length - 1, divPlus_id_current.length); 
					   if (act == "plus") {
					       if (number_current <= number) {
					           $(this).show();   
					       }else{
					           $(this).hide();
					       }
						   if (number_current == number) {
                              $('span', this).removeClass('ui-icon-arrowreturnthick-1-w')                          
                              $('span', this).addClass('ui-icon-plusthick')					   	
						   }
					   }else{
					       if (number_current != number) {
						      $(this).hide();
						   }else{
                              $('span', this).removeClass('ui-icon-plusthick')						   	
						   	  $('span', this).addClass('ui-icon-arrowreturnthick-1-w')
						      $(this).show();
						   }
					   }			   
					})
				}
                
				$('.divPlus').click(function() {
                    if ($('span', this).hasClass('ui-icon-plusthick')){
					   var divPlus_id = $(this).attr('id');
                       var number = getNumberFromId(divPlus_id);
					   showAddFields(number);
					   modeAdd = true;
					}else{
                       var divPlus_id = $(this).attr('id');
                       var number = getNumberFromId(divPlus_id);
                       hideAddFields(number);
					   modeAdd = false;
                    }
				})
				
				function showAddFields(number) {
				    var type = $('#divType' + number + ' input').val();
					var type_number = parseInt($('#divType' + number + ' select').val());
					var address = $('#divAddress' + number + ' input').val();
					$('.divType').each(function(i) {
					    var divType_id_current = $(this).attr('id');
                        var number_current = divType_id_current.substring(divType_id_current.length - 1, divType_id_current.length);
						if (number_current >= number) {
							$(this).html('');
							$('#divAddress' + number_current).html('');
						}
					})
					$('.divTypeAdd').each(function(i) {
                       var divTypeAdd_id = $(this).attr('id');
                       var number = getNumberFromId(divTypeAdd_id);					   
					   $(this).load(
                            '{% url gw.views.index %}address/getalltypes/',
							function() {					
                                $('select', this).attr('id', 'selectTypeAdd' + number);
                                $('select', this).combobox();
                                if (number == 1) {									
									//$('select option[value = ' + type_number + ']', this).attr('selected', 'selected');
									$('input', this).val(type);
									$('select', this).val(type_number);									
                                }
							}
					   )
					   $('#divAddressAdd' + number).html('');
					   var input = $( "<input>" )
                           .appendTo('#divAddressAdd' + number)
                           .addClass( "ui-widget ui-widget-content ui-corner-all" )
                    })
					$('#divAddressAdd1 input').val(address).focus();
					showButtonPlus(number, "minus");
					if (number != 1){
					    showBottom('divAddress' + (number - 1));
					}else{
                        showBottom(0);
					}
				}
                
                function hideAddFields(number) {
					clearAddFieds();
                    loadNextType('divAddress' + (number - 1));				
                    showButtonPlus(number, "plus");    
                }
							
				function getNumberFromId(id) {
					return parseInt(id.substring(id.length - 1, id.length));
				}
				function clearAddFieds() {
                    $('.divTypeAdd').each(function(i) {
                        $(this).html('');
                        var divTypeAdd_id = $(this).attr('id');
                        number_current = getNumberFromId(divTypeAdd_id);
                        $("#divAddressAdd" + number_current).html('');
                    })					
				} 
								
				{% include "sro2/autocomplete.html" %}
				
				$('#buttonCancel').click(function(){
					location = '{{ next }}' + '#address';
				})
				
                function buttonSave_onclick(){
					postTypes = pickUpTypes();
					if (checkInformation(postTypes)) {
					   post = '{';
					   post += '"' + 'divAddress0' +                      '":"' + $('#divAddress0 select').val() +                         '",';
					
					   $('.divType').each(function(i) {
					       number = getNumberFromId($(this).attr('id'));
					       if ($('select', this).val() != undefined && $('#divAddress' + number + ' select').val() != ''){
					           post += '"' + $(this).attr('id') +          '":"' + $('select', this).val() +                               '",';
						       post += '"' + 'divAddress' + number +       '":"' + $('#divAddress' + number + ' select').val() +           '",';
					       } 
					   })
					
                       $('.divTypeAdd').each(function(i) {
                       number = getNumberFromId($(this).attr('id'));
                           if ($('select', this).val() != undefined && $('#divAddressAdd' + number + ' input').val() != ''){
                               post += '"' + $(this).attr('id') +          '":"' + $('select', this).val() +                               '",';
                               post += '"' + 'divAddressAdd' + number +    '":"' + $('#divAddressAdd' + number + ' input').val() +         '",';
                           } 
                       })
					   post += postTypes;
					   post += '"' + 'zip' +                               '":"' + $('#inputZip').val() +                                  '"';
					   post += '}';
					   $.post(
                            "{% url gw.views.contact_address_save org.id %}",
                            post,
							function (data) {  
                                location = '{{ next }}' + '#address';								
							}
				       )
					}             
                }
				
				function checkInformation(postTypes){
					if (postTypes == '' || $('#inputZip').val() == '' || $('#inputZip').val().length != 6) {
						alert('Выберите тип адреса и введите корректный индекс!');
						return false;
					}else{
						return true;
					}
				}
				
				function pickUpTypes() {
					postTypes = '';
					$('.divTypeAddress').each(function(i){
						if ($(this).hasClass('ui-state-active')) {
                            postTypes += '"' + $(this).attr('id') + '":"' + 'true' +  '",';						
						}
					})
					return postTypes;
				}
		})

    </script>

    <div class="divRow"><input id = "inputTypeAddress" class="ui-widget ui-widget-content ui-corner-all left inputLabel" value = "Тип" readonly="readonly"> <div id="divTypes"></div>
	<div class="divRow"><input id = "inputCountry" class="ui-widget ui-widget-content ui-corner-all left inputLabel" value = "Страна" readonly="readonly"> <div id="divAddress0" class="divAddress"></div></div>
    <div class="divRow"><div id="divType1" class="divType left"> </div>     <div id="divAddress1" class="divAddress left"> </div> <div id="divPlus1" class="ui-state-default ui-corner-all smallbutton right divPlus"> <span class="ui-icon ui-icon-plusthick"></span></div></div>
    <div class="divRow"><div id="divType2" class="divType left"> </div>     <div id="divAddress2" class="divAddress left"> </div> <div id="divPlus2" class="ui-state-default ui-corner-all smallbutton right divPlus"> <span class="ui-icon ui-icon-plusthick"></span></div></div>
    <div class="divRow"><div id="divType3" class="divType left"> </div>     <div id="divAddress3" class="divAddress left"> </div> <div id="divPlus3" class="ui-state-default ui-corner-all smallbutton right divPlus"> <span class="ui-icon ui-icon-plusthick"></span></div></div>
    <div class="divRow"><div id="divType4" class="divType left"> </div>     <div id="divAddress4" class="divAddress left"> </div> <div id="divPlus4" class="ui-state-default ui-corner-all smallbutton right divPlus"> <span class="ui-icon ui-icon-plusthick"></span></div></div>
    <div class="divRow"><div id="divType5" class="divType left"> </div>     <div id="divAddress5" class="divAddress left"> </div> <div id="divPlus5" class="ui-state-default ui-corner-all smallbutton right divPlus"> <span class="ui-icon ui-icon-plusthick"></span></div></div>
    <div class="divRow"><div id="divType6" class="divType left"> </div>     <div id="divAddress6" class="divAddress left"> </div> <div id="divPlus6" class="ui-state-default ui-corner-all smallbutton right divPlus"> <span class="ui-icon ui-icon-plusthick"></span></div></div>
    <div class="divRow"><div id="divType7" class="divType left"> </div>     <div id="divAddress7" class="divAddress left"> </div> <div id="divPlus7" class="ui-state-default ui-corner-all smallbutton right divPlus"> <span class="ui-icon ui-icon-plusthick"></span></div></div>
		
    <div class="divRow"><div id="divTypeAdd1" class="divTypeAdd left"> </div>     <div id="divAddressAdd1" class="divAddressAdd left"> </div> </div>
    <div class="divRow"><div id="divTypeAdd2" class="divTypeAdd left"> </div>     <div id="divAddressAdd2" class="divAddressAdd left"> </div> </div>	
    <div class="divRow"><div id="divTypeAdd3" class="divTypeAdd left"> </div>     <div id="divAddressAdd3" class="divAddressAdd left"> </div> </div>
    <div class="divRow"><div id="divTypeAdd4" class="divTypeAdd left"> </div>     <div id="divAddressAdd4" class="divAddressAdd left"> </div> </div>
    <div class="divRow"><div id="divTypeAdd5" class="divTypeAdd left"> </div>     <div id="divAddressAdd5" class="divAddressAdd left"> </div> </div>
    <div class="divRow"><div id="divTypeAdd6" class="divTypeAdd left"> </div>     <div id="divAddressAdd6" class="divAddressAdd left"> </div> </div>
	
	<div class="divRow"><input id = "labelZip" class="ui-widget ui-widget-content ui-corner-all left inputLabel" value = "Индекс" readonly="readonly"> <input id="inputZip" class="ui-widget ui-widget-content ui-corner-all left inputLabel divTypeAddress" type="text" style="margin-left:10px;" maxlength="6"></div>
    <br>
	<div style="clear:left; width:205px; margin-bottom:20px;">
	<div id='buttonSave'
          class='disabled ui-corner-all ui-state-default button left' style="font-size:11pt; margin-top:6px; height:19px; padding-top:1px; padding-bottom:1px; color:#222; border-color: #AAA; font-family: Verdana, Arial, sans-serif;">
    Сохранить
    </div>
	<div id='buttonCancel'
          class='ui-corner-all ui-state-default button right' style="font-size:11pt; margin-top:6px; height:19px; padding-top:1px; padding-bottom:1px; color:#222; border-color: #AAA; font-family: Verdana, Arial, sans-serif;">
    Отменить
    </div>
	<div id="zip" style="display:none;"></div>
	<div id="divSelectTypes"  style="display:none;">{{ formaddresstype }}</div>
	</div>
	<br>
	<br>

{% endblock %}