Alloy UI demo portlet

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>

<portlet:resourceURL id="getJson" var="resouceURL"></portlet:resourceURL>
<portlet:defineObjects />

<style type="text/css">
.red {
    background: red;
}
.black {
    background: black;
}
.white {
    background: white;
}
.toolTip {
     background: white;
     border-radius : 0;
     border: 4px solid blue;
}
</style>

<h1>This is the AUI Demo portlet.</h1>
<!-- Example 1 -->
<h4>Color Test Example</h4>
<ul id="colorList">
 <li>red</li>
 <li>black</li>
 <li>blue</li>
 <li>green</li>
 <li>white</li>
</ul>
<br/>
<aui:button cssClass="colorBtn" value="colorTest"></aui:button>
<br/>
<aui:button cssClass="applyColorBtn" value="applyColor"></aui:button>
<aui:button cssClass="unApplyColorBtn" value="unApplyColor"></aui:button>
<br/>
<br/>
<aui:button cssClass="ajaxCall" value="Ajax Call"></aui:button>
<div id="ajaxResponse">Waiting for ajax response</div>
<br/>
<br/>
<aui:button cssClass="auiDialog" value="Open Dialog"></aui:button>
<br/>
<br/>
<div id="check" style="width: 200px" align="left">Tooltip on mouse hover</div>
<br/>
<br/>
<h4>Start typing the name of a state (such as Alaska, California, or Maine)</h4>
<div id="myAutoComplete"></div>
<br/>
<h4>Alloy - Editable Demo</h4>
<div id="editor1">Edit Me</div>
<br/>
<div id="editor2">
Edit Me Heloo world Edit Me Heloo worldEdit 
Edit Me Heloo worldEdit Me Heloo worldEdit
Edit Me Heloo worldEdit Me Heloo worldEdit
</div>
<br/>
<h4>Alloy - Toolbar demo</h4>
<div id="demo1"></div>
<br/>
<h4>Alloy - Panel demo</h4>
<div id="myId"></div>
<br/>
<h4>Alloy - Sort demo</h4>
<ul class="vertical" id="vertical">
   <li>List Item 1</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
   <li>List Item 4</li>
   <li>List Item 5</li>
   <li>List Item 6</li>
</ul>
<br/>
<h4>Alloy - Calender demo</h4>
<input type="text" name="input1" size="55" value="" id="input1" />
<br/>
<h1>Alloy - AUI tag demo w.r.t Liferay</h1>
<aui:form>
 <!-- AUI Layout -->
 <h4>AUI tag layout</h4>
 <aui:layout>
 <aui:column columnWidth="25" first="true">
 Heloo
 </aui:column>
 <aui:column columnWidth="75" last="true">
 World
 </aui:column>
 </aui:layout>
 <br/>
 <h4>AUI tag panel</h4>
 <aui:panel collapsible="true" label="Personal Information" >
  Helloooooo
 </aui:panel>
 <br/>
 <h4>AUI tag button</h4>
 <aui:button value="Click me"></aui:button>
 <br/>
 <h4>AUI tag button-row</h4>
 <aui:button-row>
  <aui:button name="saveButton" type="submit" value="save" />
  <aui:button name="cancelButton" type="button" value="cancel" />
 </aui:button-row>
 <br/>
 <h4>AUI tag input</h4>
 <aui:input name="firstName" lebel="FirstName" type="text"></aui:input>
</aui:form>
<aui:script >

AUI().ready("node", "aui-dialog", "aui-tooltip", function(A){
 
 /******************** Example1*****************************/
 
 A.one('.colorBtn').on("click", function(){
  
  //This line get "colorList" object
  var colorList = A.one("#colorList");
  //This will get li elements list inside "colorList" ul
  var colors = colorList.all("li");
  //Following code returns list of all li elemetns on page
  var totalLiTags = A.all("li");
  alert("No of colors in list are "+colors.size() + "\n" +
  "Total li elements of page are "+totalLiTags.size());
 });
 
 
 /******************* Example2*******************************/
 A.one('.applyColorBtn').on("click", function(){
  A.all("#colorList li").each(function(currentNode,index,nodeList){
   if(currentNode.text() == "red"){
    currentNode.addClass("red");
   }else if(currentNode.text() == "black"){
    currentNode.addClass("black");
   }else if(currentNode.text() == "white"){
    currentNode.addClass("white");
   }
  });
 });
 A.one('.unApplyColorBtn').on("click", function(){
  A.all("#colorList li").each(function(currentNode,index,nodeList){
   if(currentNode.text() == "red"){
    currentNode.removeClass("red");
   }else if(currentNode.text() == "black"){
    currentNode.removeClass("black");
   }else if(currentNode.text() == "white"){
    currentNode.removeClass("white");
   }
  });
 });
 
 A.one('.ajaxCall').on('click', function() {
  A.io.request('${resouceURL}', {
    dataType: 'json',
    on: {
     success: function() {
       //alert(this.get('responseData')); //alerts 2
       var dataRes = this.get('responseData');
       //alert("Response"+dataRes.length)
        var rowData = ""
      for(var index = 0; index < dataRes.length; index++){
       rowData = rowData+dataRes[index].Content+" "+dataRes[index].content_button+"<br/>";
     }
     A.one('#ajaxResponse').html(rowData);
     }
    }
  });
 });
    
 A.one('.auiDialog').on('click', function() {
   var instance = new A.Dialog({
   bodyContent: 'This is helooworld Dialog body',
   centered: true,
   constrain2view: true,
   destroyOnClose: true,
   draggable: true,
   height: 150,
   resizable: false,
   stack: true,
   title: 'Dialog title',
   width: 500,
   close:true,
   modal:true,
   buttons : [
      {
       text: 'Submit',
       handler: function() {
        this.set('bodyContent', 'Processing tour data');
        //ajaxCall();
       }
      }]
   }).render();
  });
  
  
  new A.Tooltip({
    trigger: '#check',
    align: { points: [ 'tl', 'tr' ] }, //lc, rc
    showArrow: false,
    bodyContent: 'This is my tooltip.Enjoy the toolTip',
    cssClass : 'toolTip'
   })
   .render();
});


AUI().use('aui-autocomplete', 'aui-editable', 'aui-toolbar', 'aui-panel', 'aui-sortable','aui-calendar-base', function(A) {
 /******************** Example3*********************************/
 var states = [ 
          ['AL', 'Alabama', 'The Heart of Dixie'],
          ['AK', 'Alaska', 'The Land of the Midnight Sun'],
          ['AZ', 'Arizona', 'The Grand Canyon State'],
          ['AR', 'Arkansas', 'The Natural State'],
          ['CA', 'California', 'The Golden State'],
          ['CO', 'Colorado', 'The Mountain State'],
          ['CT', 'Connecticut', 'The Constitution State'],
          ['DE', 'Delaware', 'The First State'],
          ['DC', 'District of Columbia', "The Nation's Capital"],
          ['FL', 'Florida', 'The Sunshine State'],
          ['GA', 'Georgia', 'The Peach State'],
          ['HI', 'Hawaii', 'The Aloha State'],
          ['ID', 'Idaho', 'Famous Potatoes'],
          ['IL', 'Illinois', 'The Prairie State'],
          ['IN', 'Indiana', 'The Hospitality State'],
          ['IA', 'Iowa', 'The Corn State'],
          ['KS', 'Kansas', 'The Sunflower State'],
    ['KY', 'Kentucky', 'The Bluegrass State'],
          ['LA', 'Louisiana', 'The Bayou State'],
          ['ME', 'Maine', 'The Pine Tree State'],
          ['MD', 'Maryland', 'Chesapeake State'],
          ['MA', 'Massachusetts', 'The Spirit of America'],
          ['MI', 'Michigan', 'Great Lakes State'],
          ['MN', 'Minnesota', 'North Star State'],
          ['MS', 'Mississippi', 'Magnolia State'],
          ['MO', 'Missouri', 'Show Me State'],
          ['MT', 'Montana', 'Big Sky Country'],
          ['NE', 'Nebraska', 'Beef State'],
          ['NV', 'Nevada', 'Silver State'],
          ['NH', 'New Hampshire', 'Granite State'],
          ['NJ', 'New Jersey', 'Garden State'],
          ['NM', 'New Mexico', 'Land of Enchantment'],
          ['NY', 'New York', 'Empire State'],
          ['NC', 'North Carolina', 'First in Freedom'],
          ['ND', 'North Dakota', 'Peace Garden State'],
          ['OH', 'Ohio', 'The Heart of it All'],
          ['OK', 'Oklahoma', 'Oklahoma is OK'],
          ['OR', 'Oregon', 'Pacific Wonderland'],
          ['PA', 'Pennsylvania', 'Keystone State'],
          ['RI', 'Rhode Island', 'Ocean State'],
          ['SC', 'South Carolina', 'Nothing Could be Finer'],
          ['SD', 'South Dakota', 'Great Faces, Great Places'],
          ['TN', 'Tennessee', 'Volunteer State'],
          ['TX', 'Texas', 'Lone Star State'],
          ['UT', 'Utah', 'Salt Lake State'],
          ['VT', 'Vermont', 'Green Mountain State'],
          ['VA', 'Virginia', 'Mother of States'],
          ['WA', 'Washington', 'Green Tree State'],
          ['WV', 'West Virginia', 'Mountain State'],
          ['WI', 'Wisconsin', "America's Dairyland"],
          ['WY', 'Wyoming', 'Like No Place on Earth']
      ];
 
  window.AC = new A.AutoComplete(
   {
    dataSource: states,
    schema: {
     resultFields: ['key', 'name', 'description']
    },
    matchKey: 'name',
    delimChar: ',',
    typeAhead: true,
    contentBox: '#myAutoComplete'
   }
  );
 
  AC.render();
  
  /**************************** Example4***********************************/
  (new A.Editable(
   {
    node: '#editor1'
   }
  ));
  (new A.Editable({
  node: '#editor2',
  inputType: 'textarea'
  })); 
  
  /**************************** Example5***********************************/
  new A.Toolbar({
   activeState: true, children: [ {label: 'Add', icon: 'plus'}, {label: 'Remove', icon: 'minus'}, {label: 'Config', icon: 'gear'} ]
  }).render('#demo1');
  
  /**************************** Example6***********************************/
  new A.Panel({
   headerContent: 'Panel Container',
   collapsible: true,
   boundingBox: '#myId',
   bodyContent: "Heloo World" 
  }).render();
  
  /**************************** Example7***********************************/
  new A.Sortable(
   {
    nodes: '#vertical li',
    constrain: {
     stickY: true
    }
   }
  );
  
  /**************************** Example8***********************************/
  new A.Calendar({
  trigger: '#input1',
  dates: ['09/14/2009', '09/15/2009','09/16/2009'],
  //dateFormat: '%d/%m/%y %A',
  dateFormat: '%d/%m/%y',
  setValue: true,
  selectMultipleDates: false
  }).render();
});
</aui:script>