/****************************************
*   
*    Main Page
*
*****************************************/ 

    function showMessage(iserror,msg){
    
                if(iserror == true){
                    $('#img_error').show();
                }else{
                    $('#img_error').hide();
                }
                
                document.getElementById(showClientId("span_error")).innerHTML = msg;
                $('#divErrorMessage').fadeIn('slow', function() {});
                document.getElementById('popupState').value = 'pop';
                
    }


 function checkUserLocation(){
    
        for(i=1; i <= document.getElementById(showClientId('tblImgHolder')).rows.length; i++){
            var imgname = "#divdrag" + i;
            if ( document.getElementById(showClientId('txtAddArea')).value == $(imgname).attr('area') && document.getElementById(showClientId('txtAddLocation')).value == $(imgname).attr('location') && document.getElementById(showClientId('txtAddState')).value == $(imgname).attr('state')){
               showMessage(true,"Location exist.");
               return false;
           }
        }

        if (document.getElementById(showClientId('txtAddArea')).value.replace(/^\s+|\s+$/g,"") == "" || document.getElementById(showClientId('txtAddLocation')).value.replace(/^\s+|\s+$/g,"") == "" || document.getElementById(showClientId('txtAddState')).value.replace(/^\s+|\s+$/g,"") == ""){
            showMessage(true,"Please enter a location and an area.");
            return false;
        } 
       
        if (document.getElementById(showClientId('txtAddArea')).className == 'textbox_transparent_txt2' || document.getElementById(showClientId('txtAddLocation')).className == 'textbox_transparent_txt2') {
            showMessage(true,"Please enter a location and an area.");
            return false;
        }

        return true;
 }
 

$(function() {

    $("#divcov1").css({'background-image': 'url(../images/vote/WiMAX_area_white.gif)'});

    $('#btnAddCoverage').click(function(){
        if (document.getElementById('popupState').value == 'pop'){
         
        }else if (checkUserLocation() == true){

            var tbl =  document.getElementById(showClientId('tblImgHolder'));            
             
            var finalRow = tbl.rows.length;
            var row = tbl.insertRow(finalRow);
            var cellLeft = row.insertCell(0);
            var newdiv = document.createElement("div");
            
            var nextRow = finalRow + 1
            newdiv.setAttribute('id','divdrag'+nextRow);
            newdiv.setAttribute('covid','user');
            newdiv.setAttribute('runat','server');
            newdiv.setAttribute('area',document.getElementById(showClientId('txtAddArea')).value);
            newdiv.setAttribute('location',document.getElementById(showClientId('txtAddLocation')).value);
            newdiv.setAttribute('state',document.getElementById(showClientId('txtAddState')).value);
            newdiv.setAttribute('style','width:339;');
                            
            var newTbl = '<table class="draggable_table" cellpadding="0"><tr><td colspan="3" height="1" bgcolor="#EBEBEB"></td></tr><tr>' +
            '<td width="6%"><img id="img_divdrag10" src="../images/vote/Star_Grey.gif" width="20" height="24" /></td>' +
            '<td width="94%"><span id="span_divdrag10" class="draggable_span" runat="server">' +
            document.getElementById(showClientId('txtAddLocation')).value + ", " + document.getElementById(showClientId('txtAddArea')).value + ", " + document.getElementById(showClientId('txtAddState')).value +
            '</span></td></tr>  </table>';
            
            newdiv.innerHTML = newTbl;
            cellLeft.appendChild(newdiv);                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
                            
            var inimgname = "#" + newdiv.getAttribute("id");

            $(inimgname).addClass('img_content').draggable({
                helper: 'clone',
                opacity: 0.60
            });
           
            showMessage(false, document.getElementById(showClientId('txtAddLocation')).value + ", " + document.getElementById(showClientId('txtAddArea')).value + ", " + document.getElementById(showClientId('txtAddState')).value + ' has been added to the selection pane.');
                            
            document.getElementById(showClientId('txtAddArea')).className =  'textbox_transparent_txt2';
            document.getElementById(showClientId('txtAddLocation')).className =  'textbox_transparent_txt2';
            document.getElementById(showClientId('txtAddArea')).value = 'e.g. Petaling Jaya';
            document.getElementById(showClientId('txtAddLocation')).value = 'e.g. Jalan 222';
        }
	                
});

//-------------------------------------------------------------------------------------------

	          $('table.droppable-gallery div').addClass('img_content').draggable({
				        helper: 'clone',
				        handle: 'span',
				        opacity: 0.40 
	          });
	          
//-------------------------------------------------------------------------------------------
 
	          $(".droppable-photos-container").droppable({ 
	                accept:     ".img_content", 
	                tolerance:  "pointer", 
	                    over: function(ev, ui) { 
                           if ($(this).css('background-image').indexOf('white') != -1){
                               $(this).css({'opacity':'0.40'}); 
                               //$(this).css({'background-image': 'url(../images/vote/WiMAX_Coverage_Area_imgless.gif)'}); 
                           }
                        }, 
                        out: function(ev, ui) { 
                          if ($(this).css('background-image').indexOf('white') != -1){
                            $(this).css({'opacity':'1.00'}); 
                            //$(this).css({'background-image': 'url(../images/vote/WiMAX_area_white.gif)'});
                          }
                        }, 
	                    drop: function(ev, ui) {
	                    
	                    $(this).css({'opacity':'1.00'}); 

	                    if (document.getElementById('popupState').value == 'clean'){
	                        
                            var divno = $(this).attr('id').charAt(6) +  $(this).attr('id').charAt(7);
                            var inPosition = true;
                            
                            // check if droppable is on first pane
                            if (divno > 1){
                                for(i=2; i <= divno; i++){
                                    if  (document.getElementById(showClientId("hiddenID"+(i-1))).value == ""){
                                        inPosition = false;
                                    } 
                                }
                            }
                            
                            // If dropped at correct place
                            if (inPosition == true){
                                
                                //if originally contain item, unhide it in selection pane       
	                            var inimgname = "#" + $(this).attr('imgname');
                                     $(inimgname).slideToggle();    

                                //clear up current droppable pane
                                $(this).empty();
                                
                                //if item is not user added, sets image as background-image
                                var imgname  =  ui.draggable.clone().attr('imgname')
                                
                                if ((ui.draggable.clone().attr('covid')!= "user") && (imgname != '')){ 
                                    $(this).css({'background-image': 'url(locationimg/thumb' + imgname + ')'});
                                }
                                else{
                                    $(this).css({'background-image': 'url(../images/vote/WiMAX_Coverage_Area_imgless.gif)'});
                                }
          
                                $(this).hide().fadeIn(2000);

                                //sets droppable imgname = image's id
	                            $(this).attr('imgname',ui.draggable.clone().attr('id'));
                   
                                //sets dropped item values to hidden fields
                                document.getElementById(showClientId("hiddenID"+divno)).value = ui.draggable.attr('covid');
	                            document.getElementById(showClientId("hiddenLocation"+divno)).value =  ui.draggable.attr('location');
	                            document.getElementById(showClientId("hiddenState"+divno)).value =  ui.draggable.attr('state');
	                            document.getElementById(showClientId("hiddenArea"+divno)).value = ui.draggable.attr('area');
    	                        
	                            //sets the locaion, area , state in display pane
	                            $("#span_loc"+divno).empty();
	                            $("#span_area"+divno).empty();
	                            $("#span_state"+divno).empty();
    	                        
	                            $("#divinfo"+divno).hide();

	                            $("#span_loc"+divno).append(ui.draggable.attr('location')+", ");
	                            $("#span_area"+divno).append(ui.draggable.attr('area')+", ");
	                            $("#span_state"+divno).append(ui.draggable.attr('state'));
    	                        
	                            $("#divinfo"+divno).slideToggle();
      	            
  	                            //hide the dropped item in selection pane
	                            ui.draggable.slideToggle();
    	                                	       
                                //create remove link           
                                var removeLink = document.createElement("a"); 
                                removeLink.innerHTML = "<img src='../images/vote/img_remove.png' alt='Remove' width='12px' height='12px' border='0px'></img>";
                                removeLink.setAttribute("id","rmlink"+divno);
                                removeLink.setAttribute("class","remove-link");
                                //removeLink.setAttribute("style","text-decoration:none;cursor: pointer; cursor:hand;");
                                
                                removeLink.onclick = function()
                                {    
                                    //Clear hiddenfield values
                                     document.getElementById(showClientId("hiddenID"+divno)).value = "";
	                                 document.getElementById(showClientId("hiddenLocation"+divno)).value = "";
	                                 document.getElementById(showClientId("hiddenState"+divno)).value =  "";
	                                 document.getElementById(showClientId("hiddenArea"+divno)).value = "";
    	                             
	                                 $("#divinfo"+divno).slideToggle();
    	                             
	                                 $("#span_loc"+divno).empty();
	                                 $("#span_area"+divno).empty();
	                                 $("#span_state"+divno).empty();
    	                             
                                     //clear droppable and puts numbering back
                                     $("#divcov"+divno).empty();
                                     $("#divcov"+divno).css({'background-image': 'url(locationimg)'});
                                     $("#divcov"+divno).css({'text-align': 'center'});
                                                                      
                                     //Send all backgrounds to gray off mode
                                     for(i=1; i <= 10; i++){
                                        if  (document.getElementById(showClientId("hiddenID"+i)).value == ""){
                                            $("#divcov"+i).css({'background-image': 'url(../images/vote/WiMAX_area_grey.gif)'});
                                        }
                                     }
                                     
                                     //Activates the first detected pane without values
                                     for(i=1; i <= 10; i++){
                                        if  (document.getElementById(showClientId("hiddenID"+i)).value == ""){
                                            //$("#divcov"+i).css({'background-color': '#FFFFFF'});
                                            $("#divcov"+i).css({'background-image': 'url(../images/vote/WiMAX_area_white.gif)'});
                                            i=11
                                        }
                                     }
                                     
                                     //unhide item selection pane and clear droppable imagname
                                     var inimgname = "#" + $("#divcov"+divno).attr('imgname');
                                     $(inimgname).slideToggle();   
                                     $("#divcov"+divno).attr('imgname','');                                 
                                }
                                
                                //append remove link to right
                                $(this).css({'text-align': 'right'});
                                $(this).append("<div style='height:75px;'>&nbsp;</div>");
                                $(this).append(removeLink);

	                            //set background color to WHITE if previous box is filled
	                            for(i=1; i <= 10; i++){
                                    if  (document.getElementById(showClientId("hiddenID"+i)).value == ""){
                                        
                                        $("#divcov"+i).css({'background-image': 'url(../images/vote/WiMAX_area_white.gif)'});
                                        i=11;
                                    }
                                }
    	                       
	                        }//if its previous pane not dropped
	                    }
    	            }//popupstate     
	                });
	            //=============================================================
	              
	        });
	        
	        
    function checkLeadDetails(){
        
        var regex_name = new RegExp("^[a-zA-Z/ ]{1,30}$");
        if (regex_name.test(document.getElementById(showClientId('txtName')).value) == false){
            showMessage(true, "Please enter your Name with less than 30 alphabets without special characters.");
            return false;
        }
        
        var regex_nric = new RegExp("^[0-9-]{14}$");
         if (regex_nric.test(document.getElementById(showClientId('txtNRIC')).value) == false){
            showMessage(true,'Please enter your NRIC number.');
            return false;
        }
        var regex_email = new RegExp("^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})$");
        if (regex_email.test(document.getElementById(showClientId('txtEmail')).value) == false){
            showMessage(true,"Invalid email format. Please try again (check the '@' and '.' in the email address.");
            return false;
        }
        var regex_contact = new RegExp("^[0-9]{7,10}$");
         if (regex_contact.test(document.getElementById(showClientId('txtContact')).value) == false){
            showMessage(true,'Contact No. must be between 7-10 digits.');
            return false;
        } 
        
        /*
        if (document.getElementById(showClientId('txtStreet')).value.length < 1){
            showMessage(true,'Please enter your street address.');
            return false;
        }*/     
        
        var regex_city = new RegExp("^[a-zA-Z ]{0,40}$");
        if (regex_city.test(document.getElementById(showClientId('txtCity')).value) == false){
            showMessage(true,'Please enter your City with less than 40 alphabets.');
            return false;
        } 
        
        if (document.getElementById(showClientId('txtPO')).value.length > 0){
            var regex_postal = new RegExp("^[0-9]{5}$");
            if (regex_postal.test(document.getElementById(showClientId('txtPO')).value) == false){
                showMessage(true,'Please enter your Postal Code with 5 digits.');
                return false;
            } 
        }

        return true;
    }
    
    //------ navigation controls -----------
     $(document).ready(function() {

       $("#div_PopUp").show();
       $("#div_draggableImg").show();
       $("#div_DropPanel").show();
       $("#div_dragdrop").show();

           //hide show navigation buttons
        function swapButtonDiv(divname){
              $('#div_BtnVote').hide();
              $("#div_BtnLead").hide();
              $("#"+divname).show();
        }
   
        //vote next button
       $("#btn_voteNext").click(function() {
       if(document.getElementById('popupState').value == 'clean'){
            var notEmpty = "no"
            
            for(i=1; i <=10; i++){
                 if ($("#divcov"+i).attr('imgname') != ""){
                    notEmpty = "yes"
                 }
             }  
             if (notEmpty == "yes") {
                 //$("#div_draggableImg").slideToggle();
                 //$("#div_leadInfo").slideToggle();
                   swapButtonDiv("div_BtnLead");  
                     
                   $("#div_draggableImg").animate({opacity: 'toggle', height: 'toggle'}, 500, '', 
                       function(){ 
                            $("#div_leadInfo").animate({opacity: 'toggle', height: 'toggle'}, 500, '',
                                function(){
                                    $("#span_step2").slideToggle('fast',
                                        function(){
                                            $("#span_step4").slideToggle('fast',
                                                function(){
                                                    for(i=1; i <=10; i++){
                                                        $("#rmlink"+i).hide();
                                                        if (document.getElementById(showClientId("hiddenID"+i)).value == ""){
                                                            $("#divcov"+i).slideToggle();
                                                        }
                                                     } 
                                                }
                                            );
                                        }
                                    );
                                }
                            ); 
                       }
                   );  

             }else
             {
                showMessage(true,"You must vote at least 1 location")
             }
        }//pop up state     
        });
        
        
        //lead back button
        $("#btn_leadBack").click(function() {
        if(document.getElementById('popupState').value == 'clean'){       
             swapButtonDiv("div_BtnVote");
             $("#div_leadInfo").animate({height: 'toggle'}, 500, '', 
                function(){
                    $("#div_draggableImg").animate({height: 'toggle'}, 500, '',
                        function(){
                             $("#span_step4").slideToggle("fast",
                                function(){
                                     $("#span_step2").slideToggle("fast",
                                        function(){
                                            for(i=1; i <=10; i++){
                                                $("#rmlink"+i).show(); 
                                                $("#divcov"+i).fadeIn(2000);
                                             } 
                                             
                                        }
                                     );
                                }
                             );
                        }
                    );    
                }
             );
        }//popupstate     
        });
        
        
        //open demo pop up
        $("#btnShowDemo").click(function() { 
            if (document.getElementById('popupState').value == 'clean') {
                $('#div_PopUp').toggle("drop", {direction: "down" }, 1500); 
                $("#div_demobutton").slideToggle();
                document.getElementById('popupState').value = 'pop';
            }
        });

       
        //close demo
        $("#a_Close").click(function() {
            $("#div_dragdropflash").show();
            $("#div_dragdrop").show();
            $("#div_demobutton").slideToggle();
            $("#div_PopUp").toggle("drop", {direction: "down" }, 1500); 
            document.getElementById('popupState').value = 'clean';
        });
        
        //close error
        $("#a_errorclose").click(function() { 
            $('#divErrorMessage').fadeOut('slow', function() {});
            document.getElementById('popupState').value = 'clean';
        });
        
       var strURL = window.location.pathname;
       var strArray = strURL.split("/");
       var filename = (strArray[strArray.length - 1]);
      
       if (filename == "vote_main.aspx") {
            document.getElementById('div_PopUp').style.visibility="visible";
            document.getElementById('divErrorMessage').style.visibility="visible";
        }

       $("#div_dragdropflash").show();
       $("#div_demobutton").hide();
      
       $('#divErrorMessage').slideToggle();
       $("#div_leadInfo").hide();
       $("#div_BtnLead").hide();
       $("#span_step4").hide();
       
       var foo = window.location.hash;
       if (foo.length > 0 && (foo.substr(1, foo.length) == "voteagain" )){
             $("#div_PopUp").hide();
             $("#btnShowDemo").show();     
             document.getElementById('popupState').value = 'clean';
       }
       
        
     });
    
    
    /****************************************
    *   
    *    Completion Page
    *
    *****************************************/
    
    
    $(document).ready(function() {
	        
	        $('#div_PopUp1').hide();
	        
	        $("#div_tellfriend").click(function() {
	            $('#div_PopUp1').toggle("drop", {direction: "up" }, 1200); 
	        });
	        
            $("#a_Close1").click(function() {
                $('#div_PopUp1').toggle("drop", {direction: "up" }, 1200); 
            });
            
    });