<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                autoDrawBackground="true"
                creationComplete="itemrenderer1_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.Text;
            import mx.events.FlexEvent;


            protected function itemrenderer1_creationCompleteHandler(event:FlexEvent):void
            {

                if(data!=null)
                {
                    // Retrieving the user's DOB
                    var dateStr:String = data.dob;
                    //Splitting the DOB up to make it compatible with Flex
                    var parts:Array = dateStr.split("-");

                    if(parts == null || parts.length != 3)
                    {
                        Alert.show("There is an error retrieving the user's DOB.");
                    }

                    var dobDay:* = parts[2];
                    var dobMonth:* = parts[1] - 1;
                    var dobYear:* = parts[0];
                    // Pasting the DOB back together
                    var userDOB : Date = new Date(dobYear, dobMonth, dobDay);
                    var today : Date = new Date();
                    var diff : Date = new Date();
                    //Calculating & printing the Age
                    diff.setTime( today.getTime() - userDOB.getTime() );
                    var userAge : int = diff.getFullYear() - 1970;
                    ageLbl.text = "Age: " + userAge.toString();

                    //Re-formatting the date submitted
                    var lastsubmittedStr:String = data.datesubmitted;
                    var parts2:Array = lastsubmittedStr.split("-");

                    if (parts2 == null || parts.length != 3)
                    {
                        Alert.show("There is an error retrieving datesubmitted");
                    }

                    var lastupdateDay:* = parts2[2];
                    var lastupdateMonth:* = parts2[1];
                    var lastupdateYear:* = parts2[0];

                    lastupdatedLbl.text = "Last Updated: " + lastupdateDay + "/" + lastupdateMonth + "/" + lastupdateYear;

                    if (data.gender == "male") {
                        maleImg.visible=true;
                        femaleImg.visible=false
                    }
                    else {
                        femaleImg.visible=true;
                        maleImg.visible=false;
                    }

                    flagImg.source = "flags/" + data.nationality + ".jpg";

                    twitterIcon();
                    youtubeIcon();
                    flickrIcon();



                }


            }

            public function viewUser():void
            {
                //Creating a URL for a facebook profile
                trace(data.facebookid);
                var facebookUrl:* = "http://www.facebook.com/" + data.facebookid;
                navigateToURL(new URLRequest(facebookUrl));
            }

            public function messageUser():void
            {
                trace(data.facebookid);
                var messageUrl:* = "http://www.facebook.com/messages/" + data.facebookid;
                navigateToURL(new URLRequest (messageUrl));
            }

            protected function twitterIcon():void
            {
                if (data.twitterid.length <=3)
                {
                    twittericonImg.includeInLayout=false;
                    twittericonImg.visible=false;
                }
                else {
                    twittericonImg.includeInLayout=true;
                    twittericonImg.visible=true;
                }
            }

            protected function youtubeIcon():void
            {
                if (data.youtubeid.length <=3)
                {
                    youtubeiconImg.includeInLayout=false;
                    youtubeiconImg.visible=false;
                }
                else {
                    youtubeiconImg.includeInLayout=true;
                    youtubeiconImg.visible=true;
                }
            }

            protected function flickrIcon():void
            {
                if (data.flickrid.length <=3)
                {
                    flickriconImg.includeInLayout=false;
                    flickriconImg.visible=false;
                }
                else {
                    flickriconImg.includeInLayout=true;
                    flickriconImg.visible=true;
                }
            }

            protected function viewTwitter():void
            {
                navigateToURL(new URLRequest('http://www.twitter.com/#!/' + data.twitterid));

            }

            protected function viewYoutube():void
            {
                navigateToURL(new URLRequest('http://www.youtube.com/user/' + data.youtubeid));

            }

            protected function viewFlickr():void
            {
                navigateToURL(new URLRequest('http://www.flickr.com/photos/' + data.flickrid));
            }

        ]]>
    </fx:Script>
    <fx:Style source="thevoyageapp.css" />


    <s:Group>
        <s:Rect width="737" height="100%">
            <s:fill><s:SolidColor color="#fce7d6" /></s:fill>
        </s:Rect>

        <s:Image id="fbImg" source="http://graph.facebook.com/{data.facebookid}/picture?type=normal" x="5" y="5" useHandCursor="true" buttonMode="true"
             mouseChildren="false" click="viewUser()"/>
    <s:Label id="firstnameLbl" x="120" y="5" styleName="normaltext" text="{data.firstname}" useHandCursor="true" buttonMode="true"
             mouseChildren="false" click="viewUser()"/>
    <s:Label id="lastnameLbl" x="120" y="30" styleName="normaltext" text="{data.lastname}" useHandCursor="true" buttonMode="true"
             mouseChildren="false" click="viewUser()"/>
    <s:Label id="ageLbl" text="" x="120" y="60" styleName="normaltext" />
    <s:Image id="maleImg" source="@Embed('/images/male.png')" x="120" y="85" visible="false" />
    <s:Image id="femaleImg" source="@Embed('/images/female.png')" x="120" y="85" visible="false" />
    <s:Image id="flagImg" x="175" y="95" />
    <s:Image id="messageImg" x="120" y="135" source="@Embed('/images/messageicon.png')" useHandCursor="true" buttonMode="true" mouseChildren="false" click="messageUser()" />
    <s:Label id="messageLbl" x="152" y="139" text="Send Message" styleName="smalltext" useHandCursor="true" buttonMode="true" mouseChildren="false" click="messageUser()" />


    <s:Label id="voyagestatusLbl" text="Voyage Status" styleName="normaltext" x="350" y="5" />
    <s:TextArea id="voyageStatus"  text="{data.voyagestatus}" maxChars="200" editable="false" width="300" height="70" x="348" y="30" contentBackgroundColor="#fce7d6" />

    <s:HGroup id="usersocialMedia" x="350" y="110">
        <s:Image id="twittericonImg" source="@Embed('/images/twittericon.png')" useHandCursor="true" visible="false" buttonMode="true" mouseChildren="false" includeInLayout="false"
                 click="viewTwitter()"/>
        <s:Image id="youtubeiconImg" source="@Embed('/images/youtubeicon.png')" useHandCursor="true" visible="false" buttonMode="true" mouseChildren="false" includeInLayout="false"
                 click="viewYoutube()"/>
        <s:Image id="flickriconImg" source="@Embed('/images/flickricon.png')" useHandCursor="true" visible="false" buttonMode="true" mouseChildren="false" includeInLayout="false"
                 click="viewFlickr()"/>
        <s:Label id="lastupdatedLbl" styleName="smalltext"/>
    </s:HGroup>


    </s:Group>




</s:ItemRenderer>