TEST

test.js

YUI().use("jsonp", "substitute", "event", "panel", "tabview", function (Y){
    //Form Validation
    var validate = {
        /**
        * Username value check: must contain a lower and upper case letter and at least 1 number. Cannot contain special characters.
        * @param field {NodeObject} the field object
        * @return {boolean} the result of validation
        */   
        username: function(field){
            //Regex statements are broken into parts for ease of maintenance.
            var reUsernameUpperCase = /[A-Z]/,
                reUsernameLowerCase = /[a-z]/,
                reUsernameNumber    = /[0-9]/,
                reUsernameSpecial   = /[^a-zA-Z0-9]/;
            
            var usernameValue = field.get("value");
            
            if(reUsernameUpperCase.test(usernameValue) && reUsernameLowerCase.test(usernameValue) && reUsernameNumber.test(usernameValue)){
                if(!reUsernameSpecial.test(usernameValue)){
                    return true;
                }else{
                    return false;
                }
            }else{
                return false;
            }
        },
        /**
        * Password value check: must contain at least 2 numbers and be 8 to 15 characters in length
        * @param field {NodeObject} the field object
        * @return {boolean} the result of validation
        */
        password: function(field){
            var rePassword = /^(?=.*\d{2,}).{8,15}$/;//http://regexr.com?2vndp
            
            var passwordValue = field.get("value");
            
            if(rePassword.test(passwordValue)){
                return true;
            }else{
                return false;
            }
        },
        /**
        * Usernumber value check: must be 36 digits and have no non-numeral characters
        * @param field {NodeObject} the field object
        * @return {boolean} the result of validation
        */
        usernumber: function(field){
            var reUsernumber = /^[0-9]{36}(?!\D)$/;//http://regexr.com?2vndm
            
            var usernumberValue = field.get('value');
            
            if(reUsernumber.test(usernumberValue)){
                return true;
            }else{
                return false;
            }
        }
    };
    /**
    * checkField: checks a input field agaisnt a validator function.
    * @param fieldID {string} the id of the field to be checked. "#id"
    * @param validateFunction {string} the validate function to check the field with. "validate.username"
    */
    var checkField = function(fieldID, validateFunction){
        Y.one(fieldID).on('keyup', function(e){
            if(validateFunction(this)){
                this.addClass('success');
                this.removeClass('error');
            }else{
                this.removeClass('success');
                this.addClass('error');
            }
        });
    };
    var loginFormValidation = function(){
        checkField('#username', validate.username);
        checkField('#password', validate.password);
        checkField('#usernumber', validate.usernumber);      
        
        Y.one("#loginform").on("submit", function(e){
            e.preventDefault();
            var errorMessage = Y.one('#loginformerror');
            if(validate.username(Y.one('#username')) && validate.password(Y.one('#password')) && validate.usernumber(Y.one('#usernumber'))){
                errorMessage.setContent('<p></p>');
                document.loginform.submit();
            }else{
                errorMessage.setContent('<p>There was an error in the form.  Please try again.</p>');
            }
        });
        
        return false;
    };
    //--End Form Validation 
    //Find out more popup
    function iframePanel(){
        var panel = new Y.Panel({
            srcNode:    '#popupContent',
            centered:   true,
            width:      Y.DOM.winWidth()-(Y.DOM.winWidth()/10),//Leave 5% margin on either side.
            height:     Y.DOM.winHeight()-(Y.DOM.winHeight()/10),//Leave 5% margin above and below.
            zIndex:     5,
            centered:   true,
            modal:      true,
            visible:    false,
            render:     true
        });
        Y.one('#findoutmore').on('click', function(e){
            console.log("findoutmore");
            Y.one('#popupInsideContent').insert('<iframe id="cpanel" class="cpanel-iframe" src="http://www.cpanel.net"></iframe> ');
            //Set height of the popupInsideContent div to be = popupContent height - popupHeader height
            Y.one('#popupInsideContent').setStyle('height', 
                Y.one('#popupContent').getStyle('height').split("px")[0]-Y.one('#popHeader').getStyle('height').split("px")[0] + "px"
            );
            panel.show();
        });
         return false;
    }//--End of find out more popup 

    //Flickr Feed
    function flickrFeed(){
        function prepareJSONPUrl(url, proxy){
    		return Y.Lang.sub(url, {
    			callback: proxy
    		});
    	}
        function handleJSONP(response){
            var template = Y.one('#flickrTemplate').getContent();
            Y.each(response.items, function(obj){
                Y.one('#flickrContainer').append(Y.substitute(template, obj));
            });
        }
        var url = 'http://www.flickr.com/services/feeds/photos_public.gne?tags=punctuation,atsign&format=json&jsoncallback={callback}',
            showPictures = Y.one("#findPictures"),
            getFlickr;

        getFlickr = new Y.JSONPRequest(url, {
            format: prepareJSONPUrl,
            on:{
                success: handleJSONP
            }
        });

        Y.one('#showPictures').on('click', function(e){
            e.preventDefault;
            getFlickr.send();
        });
    }//--end of flickr feed
    
    
    //Tabs for display
    var tabview = new Y.TabView({
        srcNode: '#test'
    });
    tabview.render();
    Y.on("domready", function(){
        var formValidation = loginFormValidation();
        var iframe = iframePanel();
        var flickr = flickrFeed();
    });
    
});