var ImgRating=function(options){

     options={
        atagClass: options.atagClass || "rating",          // a tag class
        imgGray: options.imgGray ||"inc/icon_star_1.gif",  // gary star
        imgColor: options.imgColor ||"inc/icon_star_2.gif", // color star
        imgPre: options.imgPre || "star_",              // image pre
        spanId: options.spanId || "myRating",         // the rating wrap tag id <span>
        valueArea: options.valueArea || "value_area",  // the value area id
        cleanLabel:options.cleanLabel || "clean_label"
     };
     this.rating='';
     this.graySearch=new Image();
	 this.lightSearch=new Image();

     this.init=function(){

		this.graySearch.src="fileadmin/templates/images/search_gray.gif";
		this.lightSearch.src="fileadmin/templates/images/search_light.gif";
        // if the rating wrap no exist the exit;
        var ratingSpan=document.getElementById(options.spanId);
        if(!ratingSpan) return;

        this.aTags=this.getElementsByClass(options.atagClass,"a",options.spanId);
		
		//document.getElementById(options.valueArea).value='';

        ratingSpan.ImgRating=this;
        // bind onmouseout to the wrap
        ratingSpan.onmouseout=function(){
			//alert(options.valueArea);
			//alert(document.getElementById(options.valueArea).value);
			this.ImgRating.rating=document.getElementById(options.valueArea).value;
            for(var i=1;i<=this.ImgRating.rating;i++)
            document.getElementById(options.imgPre + i).src=options.imgColor;
			
        }
        this.clean_label=document.getElementById(options.cleanLabel);

        this.clean_label.ImgRating=this;
        this.clean_label.onclick=function(){
             this.ImgRating.cleanRating();
        }

        // loop the a tag and binding event
        for(var i=0; i<this.aTags.length; i++)
        {
            this.aTags[i].ImgRating=this;
            this.aTags[i].onmouseover=function(){
                this.ImgRating.grayStars();
                this.ImgRating.colorStars(this);
            };
            this.aTags[i].onmouseout=function(){
                this.ImgRating.cleanStar(this);
            };
            this.aTags[i].onclick=function(){
                this.ImgRating.setRating(this)
            }
        }
     };

     this.grayStars=function(){
        for(var i=1;i<6;i++)
        {
            document.getElementById(options.imgPre + i).src=options.imgGray;
        }
     };
     this.colorStars=function(element){
        for(var i=1;i<=element.rel;i++)
        {
            document.getElementById(options.imgPre + i).src=options.imgColor;
        }
     };
     // when the mouse over remove the color star from the without rating star
     this.cleanStar=function(element){
        for(var i=1;i<=element.rel;i++)
        {
            if(i<=this.rating) continue;
            document.getElementById(options.imgPre + i).src=options.imgGray;
        }
     };

     // when you click on a star then rating
     this.setRating=function(element){
        this.rating=element.rel;
        document.getElementById(options.valueArea).value=this.rating;
		//alert(document.getElementById(options.cleanLabel));
		document.getElementById(options.cleanLabel).src=this.lightSearch.src;
     };

     // clean all the rating ,only for my project
     this.cleanRating=function(){
        this.rating='';
        this.grayStars();
		document.getElementById(options.valueArea).value='';
		document.getElementById(options.cleanLabel).src=this.graySearch.src;
     };

     // a method for get all the star <a> tag, it would be better put it in the uility package.
     this.getElementsByClass=function(clsName,htmltag,parenNodeId){
        var arr = new Array();
        var theParentNode=document.getElementById(parenNodeId);
        var elems = theParentNode.getElementsByTagName(htmltag);

        for ( var cls, i = 0; ( elem = elems[i] ); i++ ){
            if ( elem.className == clsName ){
                arr[arr.length] = elem;
            }
        }
        return arr;
    }
};