Cinema Seating Design and Selection in asp dotnet

function GenerateSeatPlan(ATTBusType)
        {
           var $tableSeatPlan= $("#tableId");
           $tableSeatPlan.empty();
           // the values i have set here is hard coded, 
//you can easily use it  for your ease
           var _NoOfCabinCol =2;  
           var _NoOfCabinRow =1;
           var _NoOfColA =2;
           var _NoOfColB =2;
           var _NoOfColLastRow =1;
           var _NoOfRowA =7;
           var _NoOfRowB =8;
           
           var _BookedReservedDetails=ATTBusType.BookedReservedDetails;
           
           $tableSeatPlan.append("<tr id='trcabin'><td style='width:100%;'><table id='tbllcabin' border='0' style='width:100%;'></table></td></tr><tr id='trbody'><td style='width:100%;'><table id='tbllbody' border='0' style='width:100%;'></table</td></tr>");
            //   #region Cabin
            var  tbllcabinContent="";
            for (var i = 0; i < _NoOfCabinRow; i++)
            {
                var c=0;
                var trr="<tr>" ;
                for (var j = 0; j < _NoOfCabinCol; j++)
                {
                    c++;
                    var tdd="<td SeatNo='C"+c+"'  ";
                   // tdd=tdd  +"<img style='width:30px;height:30px' ";
                    if (j == _NoOfCabinCol - 1)
                    {
                        tdd=tdd+"class='driver'> <img style='width:30px;height:30px' src='images/steering.jpg' alt='Driver' /> ";
                    }
                    else
                    {
                        tdd=tdd+"class='selectable'> <img style='width:30px;height:30px' src='images/Bus_Seat.jpg' alt='Seat' /> ";
                    }
                    tdd=tdd+"</td> ";
                    trr=trr+tdd;
                 }
                 tbllcabinContent=tbllcabinContent +trr;
              }
              $('table#tbllcabin').append(tbllcabinContent);
            //  #endregion
            //  #region Body
                var  tbllbodyContent="";
                var seatcountA = 0;
                var seatcountB = 0;
                var colSpan;
                for (var i = 0; i < _NoOfRowB; i++)
                {
                    var colSpan = 0;
                    var trr="<tr> " ;
                    //For SideA
                    for (var j = 0; j < _NoOfColA; j++)
                    {
                        if (i == 0)
                        {
                            colSpan++;
                            var tdd="<td ";
                            if (j == 0)
                            {
                                tdd=tdd+ "id='door' style='background-color:transparent;text-align:center' >DOOR</td>";
                                trr=trr+tdd;
                            }
                        }
                        else
                        {
                            seatcountA++;
                            var tdd="<td SeatNo='A"+seatcountA+"' class='selectable'> <img style='width:30px;height:30px' src='images/Bus_Seat.jpg' alt='Seat' /></td>  ";
                            trr=trr+tdd;
                        }
                    }
                    trr=trr+"<td style='width:7px'><pre></pre></td>";
                    // End For SideA
                    // For SideB
                    for (var j = 0; j < _NoOfColB; j++)
                    {
                        seatcountB++;
                        var tdd="<td SeatNo='B"+seatcountB+"' class='selectable'> <img style='width:30px;height:30px' src='images/Bus_Seat.jpg' alt='Seat' /></td> ";
                        trr=trr+tdd;
                    }
                    tbllbodyContent=tbllbodyContent +trr+"</tr>";//tblBody.Rows.Add(tr);
                    // End For SideB
                }
                $('table#tbllbody').append(tbllbodyContent);
                //  $('#door').attr('colspan',$('#door').siblings().size()-1);  //-1 is done to manage space betn sideA and sideB
                $('#door').attr('colspan',_NoOfColA);
                //  tcBody.Controls.Add(tblBody);//  trBody.Controls.Add(tcBody);// tblSeatDisp.Rows.Add(trBody);
                // #endregion
                  //to create Delegated Events
                  BindDelegatedEventsToDynamicallyGeneratedElements();
                  var stat="";
                  var type="";
                  var stt="";
                  var height=0;
                 var elem;
                 var itm;
                 var lenth= _BookedReservedDetails.length;//In a for loop, don't access the length property of an array every time; cache it beforehand.
                 for (var i=0;i<lenth;i++)
                 {    //alert(_BookedReservedDetails[i].Seat) ;
                       itm=_BookedReservedDetails[i];
                       elem=$("[seatno='"+itm.Seat+"'] ");
                      stat=(itm.SeatStatus=="B" )?'Booked':'Reserved';
                      if(itm.CType=="N" )
                      {
                         type="Normal";
                      }
                      else if(itm.CType=="R" )
                      {
                         type="Regular";
                      }
                      else if(itm.CType=="S" )
                      {
                         type="Staff";
                      }
                      if(stat=='Booked')
                      {
                         stt='<tr><td>Boarding Place: </td><td>'+itm.BoardingPlace+'</td></tr>'+'<tr><td>Booked Date: </td><td>'+itm.BookedDate+'</td></tr>';
                         height=130;
                         //elem .removeClass('selectable');
                      }
                      else
                      {
                         stt='<tr><td>Reservation Date: </td><td>'+itm.ReservedDate+'</td></tr>';
                         height=115;
                      }
//                       $.data(elem, 'vals', {name: itm.CName,address:itm.Address,phone:itm.Phone});
//                      alert(elem.data('vals').name);
////                      alert(elem.data('vals').name);
                         elem.data('vals', {id:itm.PID, name:itm.CName,address:itm.Address,phone:itm.Phone,cType:itm.CType});
//                      alert(elem.data('vals').name);
                                 elem
                                .attr('status',itm.SeatStatus)
                                .qtip({
                                                content: '<table class="tooltip" style="width:100%"><tr><td style="font-size:larger:">Status</b>:</td><td>'+ stat +
                                                    '</td></tr>   <tr><td>Name: </td><td>'+itm.CName+'</td></tr>   <tr><td>Address: </td><td>'+itm.Address+
                                                    '</td></tr> <tr><td>Phone: </td><td>'+itm.Phone+'</td></tr> <tr><td>Type: </td><td>'+type+'</td></tr>'+stt+'</table>',
                                                position: {
                                                             corner: {
                                                                         target: 'rightTop',
                                                                         tooltip: 'leftBottom'
                                                                     },
                                                             adjust: {x:0}
                                                          },
                                                style: {
                                                            width: 260,
                                                            height: height,
                                                            padding: 3,
                                                            background:'#A2D959',// '#A2D959',
                                                            color: '#fcfae6',
                                                            textAlign: 'left',
                                                            opacity:1,
                                                            border: {
                                                                width: 2,
                                                                radius: 27,
                                                                color: '#A2D959',//'#f7b64a',
                                                                opacity:1
                                                            },
                                                            tip: { // Now an object instead of a string
                                                                  corner: 'leftBottom', // We declare our corner within the object using the corner sub-option
                                                                  opacity:.5
                                                                 // color: '#6699CC'
                                                            //    size: {
                                                            //    x: 40, // Be careful that the x and y values refer to coordinates on screen, not height or width.
                                                            //    y : 0 // Depending on which corner your tooltip is at, x and y could mean either height or width!
                                                            //         }
                                                                 }
                                                            // tip: 'bottomLeft',
                                                            //name: 'dark' //Inherit the rest of the attributes from the preset dark style
                                                }
                                            });
                 }
        }

function BindDelegatedEventsToDynamicallyGeneratedElements()
	    {
	         $('.selectable').each(function(){
	              $(this).append('<div >'+$(this).attr('SeatNo')+'</div>');
	         });
	         $('.selectable').contextMenu('popup', {     bindings: {
                                                                        'Reservation': function(t) {
                                                                               if(!( $('.selected').length) || $('.selected').filter('[status=R]').length) return false;  // if( $('.selected').length<1 || $('.selected').filter('[status=R]').length>0) return false;                                                                                                                                                 
                                                                             ResetReservationForm();
                                                                             $( "#dialog-form-reserve" ).dialog( "open" );                                                                                      
                                                                        },
                                                                        'Booking': function(t) {
                                                                             if(!( $('.selected').length) ||  $('.selected').filter('[status=B]').length ) return false;
                                                                             ResetBookingForm();
                                                                             var selxn=$('.selected').filter('[status=R]');
                                                                             if(selxn.length) // same as  if( $('.selected').filter('[status=R]').length>0)
                                                                             {                                                                                                                                            
                                                                                   $('#name').attr('readonly','readonly'); $('#name').val( selxn.filter(':first').data('vals').name );                                                                                    
                                                                                   $('#address').attr('readonly','readonly'); $('#address').val( selxn.filter(':first').data('vals').address );                                                                                                                                                                        
                                                                                   $('#phone').attr('readonly','readonly'); $('#phone').val( selxn.filter(':first').data('vals').phone );    
                                                                                   $('#phone').val( selxn.filter(':first').data('vals').phone );
                                                                                   $customerType.val(selxn.filter(':first').data('vals').cType); 
                                                                                   personID=  selxn.filter(':first').data('vals').id;
                                                                                   personAction="E";           
                                                                             }                                                                                                    
                                                                             $( "#dialog-form-book" ).dialog( "open" );                                                                           
                                                                             if(boardingPlace=="")
                                                                             {
                                                                                $.ajax({
                                                                                url:'SeatPlan.aspx',
                                                                                data:{LoadBoardingPlace:'yes'},
                                                                                dataType:'json',
                                                                                success:function(data){
                                                                                   boardingPlace=data;
                                                                                   LoadBoardingPlace();
                                                                                },
                                                                                error:function(){
                                                                                    $validationText.html('Could Not Load Boarding Place.');
                                                                                    $validation.dialog('open');
                                                                                }
                                                                                
                                                                                });
                                                                             }         
                                                                        },
                                                                         'Cancellation': function(t) {

                                                                                var decision=       confirm('are You Sure ?');
                                                                                if(decision===false) return false;
                                                                                      
                                                                               if(!( $('.selected').length) || (      $('.selected').length != $('.selected').filter('[status=R],[status=B]').length  ) )    return false;
                                                                               GetSelectedSeat(); 
                                                                               $.ajax({
                                                                                url:'SeatPlan.aspx',
                                                                                data: {cancellation:'Y',opnDt:$openDate.val() ,typId:$busType.val() , selected: seats },                                                                              
                                                                                success:function(data){
                                                                                   if(data=="Success"){  
                                                                                       $validationText.html(' Cancellation Succcessfully.');
                                                                                       $validation.dialog('open'); 
                                                                                       Check() ;
                                                                                       }
                                                                                   else 
                                                                                   {  
                                                                                      $validationText.html(' Cancellation Failed.');
                                                                                       $validation.dialog('open');  
                                                                                   } 
                                                                                
                                                                                },
                                                                                error:function(){
                                                                                    $validationText.html('Reservation Cancellation Failed.');
                                                                                    $validation.dialog('open');  
                                                                                }
                                                                                
                                                                                });         
                                                                                                                                                            
                                                                        },
                                                                        'Exit': function(t) {
                                                                         RemoveSelection();
                                                                        }
                                                                   },                                                                                   
                                                        menuStyle: {
                                                          background: 'none repeat-x scroll 50% 50% #E4E2CC',
                                                          border: '1px solid #E4E2CC',
                                                          margin:'2px 2px 2px 5px',
                                                          fontWeight: 'bold',
                                                          padding: '0.4em 0.2em',
                                                          position: 'relative',
                                                          fontFamily: 'Trebuchet MS,Tahoma,Verdana,Arial,sans-serif'                                                                         
                                                         
                                                        },
                                                        itemStyle : {                                                                          
                                                          color: '#E78F08',
                                                          border: 'none',
                                                          fontSize: '1.1em'
                                                        },
                                                        itemHoverStyle: {
                                                          fontSize: '1.15em',                                                                         
                                                          border: 'none'
                                                        }                                               
                                                        
              });  
              
              
	    }