/*global $jQ document */
// this script requires jQuery UI be used
function showMessage(thisError, locationID, stateType, iconType)
{
    if ( !stateType )
    {
    	stateType = "highlight";
    }
    if (!iconType)
    {
        iconType = "alert";
    }
    
    //first clear all ui=widget
    if ( $jQ('.errorMessage').length )
    {
    	$jQ('.errorMessage').remove();
    }
    
    // create an messageHolder div
    var messageHolder = $jQ("<div></div>")
    		.addClass('ui-widget errorMessage')
    		.css('display','none');
	
		var stateHolder = $jQ('<div></div>')
				.attr("style", "margin: 10px 0; padding: 1.5em;")
			    .addClass("ui-state-" + stateType + " ui-corner-all");
			                    
		    var showmessageul = $jQ("<ul></ul>")
		    		.attr("style", "list-style-image:none;list-style-position:outside;list-style-type:none;margin-left:0;padding-left:0;");
		    
			    for (var i = 0; i < thisError.length; i++)
			    {
			        var showmessageli = $jQ("<li></li>")
			        		.html('<span class="ui-icon ui-icon-' + iconType + '" style="float: left; margin-right: .3em;"></span>' + thisError[i]);
			        $jQ(showmessageul).append(showmessageli);
			    }
    		$jQ(stateHolder).append(showmessageul);
    	$jQ(messageHolder).append(stateHolder);
    	$jQ('#' + locationID).before(messageHolder);
    	//$jQ(messageHolder).fadeIn('slow');
	$jQ(messageHolder).slideDown('slow');
   //have to add this to display error until css corrected
}