First of all the scripts things should be in the view. For you problem I would do something like
In the controller
$mailbox = Mailbox::model()->inbox($this->module->getUserId()); //I assume this returns the mailbox from that user?
$this->renderPartial('_mailbox',compact('mailbox ')); //compact is the same as array('mailbox'=>$mailbox) so use whatever you prefer.
In the view I would simply do something like this
<?php foreach($mailbox->messages as $message):
$class = ''; //order unread if you want to give both a different class name
if($message->read): //if this is true
$class = 'read';
endif; ?>
<div id='<?= $message->id ?>'class='message $class'> <!-- insert whatever info from the message --></div>
<?php endforeach; ?>
So now it will add the class read to every message that has been read. Then in CSS you can simply change it style. I hope this is enough information? I use foreach(): endforeach; and if(): endif; in the view files, but you could use foreach() {}, but I prefer foreach, as it looks better combined with HTML.
EDIT about you second question, how do they become read. This you could do with JQUERY. example.
$(".message").on("click", function() {
var id = $(this).attr('id');
$.ajax {
type:"POST",
url: "controller/action/"+id; //the controller action that fetches the message, the Id is the action variable (ex: public function actionGetMessage($id) {})
completed: function(data) {
//data = the message information, you might do type: 'JSON' instead. Use it however you want it.
if(!$(this).hasClass("read"))
$(this).addClass("read"); //give it the class read if it does not have it already
}
}
});
This simply gives the div the class read and it should look like the other items with the class read.