Untitled

<apex:page controller="IAMSCUController" tabStyle="Account" showHeader="false">

    <head>
        <script>
            $j = jQuery.noConflict();

            function showDialog(name, phone){
              //$j("#phoneNumber").html(phone);
              $j("#info-form").dialog("open");
              $j('#info-form').dialog("option" , "title" , name);
              $j('#info-form').dialog('option', 'position', 'center');
              return false;
            }

            $j(document).ready(function() {
               $j("#info-form").dialog({ autoOpen: false, modal: true, position: 'center'  });
            });
        </script>

        <style>
            .accountLink { cursor: pointer; cursor: hand; }
            .odd { background-color: #FCF7F7; height: 40px; cursor: pointer; cursor: hand; }
            .even { background-color: #E3DCDB; height: 40px; cursor: pointer; cursor: hand; }
            .row_hover{ background-color: red; height: 40px; }
        </style>
    </head>

    <apex:composition template="IamscuSiteTemplate">
        <apex:define name="body">
            <apex:form >

                <apex:pageBlock title="{!$Label.IAMSCUSchools}">

                    <p><strong>{!$Label.IAMSCUInfo1}</strong></p>
                    <p>{!$Label.IAMSCUInfo2}</p>
                    <p>{!$Label.IAMSCUInfo3}</p>
                    <p>{!$Label.IAMSCUSearchInfo}</p>
                    <br />

                    <apex:inputText value="{!nameSelected}" size="40"/>

                    <apex:selectList value="{!awardLevelSelected}" size="1" multiselect="false" >
                        <apex:selectOptions value="{!awardsLevels}"/>
                    </apex:selectList>

                    <apex:selectList value="{!countrySelected}" size="1" multiselect="false" >
                        <apex:selectOptions value="{!countries}"/>
                    </apex:selectList>

                    <apex:outputPanel id="statesPanel">
                        <apex:selectList value="{!stateSelected}" size="1" multiselect="false" rendered="{!statesEnabled}" >
                            <apex:selectOptions value="{!states}"/>
                        </apex:selectList>
                    </apex:outputPanel>

                    <apex:commandButton value="Search" action="{!invokeService2}"/>

                    <apex:actionStatus id="status" startText=" searching..." stopText=""/>
                    <br /><br />

                    <apex:outputPanel id="resultPanel" layout="block">

                        <apex:dataList value="{!outputs}" var="outs" id="theList">
                            <apex:outputText value="{!outs}"/>
                        </apex:dataList>

                        <apex:dataTable rules="rows" value="{!IAMSCUSchools}" var="school" width="100%" rowClasses="odd,even">
                            <apex:column onmouseup="alert('populate view');" width="20px" onmouseover="$j('#row-arrow-{!school.id}').show();" onmouseout="$j('#row-arrow-{!school.id}').hide();">
                                <img src="http://kumdo.com.au/bbs/skin/board/arrow.gif" id="row-arrow-{!school.id}"/>
                            </apex:column>
                            <apex:column onmouseup="alert('populate view');" onmouseover="$j('#row-arrow-{!school.id}').show();" onmouseout="$j('#row-arrow-{!school.id}').hide();">
                                {!school.Name}
                            </apex:column>
                            <apex:column onmouseup="alert('populate view');" onmouseover="$j('#row-arrow-{!school.id}').show();" onmouseout="$j('#row-arrow-{!school.id}').hide();">
                                <apex:commandLink action="{!invokeService}"
                                                  value="{!school.Name}"
                                                  reRender="resultPanel">
                                    <apex:param name="id2" value="{!school.Id}" />
                                </apex:commandLink>

                                &nbsp;<a href="" class="accountLink" onclick="return showDialog('{!school.Name}','{!school.Id}')"><apex:outputText value="send info"/></a>
                            </apex:column>
                        </apex:dataTable>

                        <apex:panelGrid columns="4">
                            <apex:commandLink action="{!first}">First</apex:commandlink>
                            <apex:commandLink action="{!previous}" rendered="{!hasPrevious}">Previous</apex:commandlink>
                            <apex:commandLink action="{!next}" rendered="{!hasNext}">Next</apex:commandlink>
                            <apex:commandLink action="{!last}">Last</apex:commandlink>
                        </apex:panelGrid>

                    </apex:outputPanel>
                </apex:pageBlock>

                <div id="info-form" >
                    <div style="float:left">First Name:</div><div id="firstName"></div>
                    <div style="float:left">Last Name:</div><div id="lastName"></div>
                    <div style="float:left">Position:</div><div id="position"></div>
                </div>
            </apex:form>
        </apex:define>
    </apex:composition>
</apex:page>