﻿<!--     
/********************************************
Created by: Adam Elsworth
Date: 01/02/2007
Title: Star rating javascript control
Description: Allows user to visually select a star rating

To use: Simply call the 'buildRatingControl([htmlElement])' function on the body 'onload' event

ie: 
<body onload='buildRatingControl(aDiv);'>
<div id='aDiv' />
</body>

********************************************** */   
//preload images -- this should be inserted in code of a user control. As the URLs must be dynamic
/*
if (document.images)
{
  pic1= new Image(32,20); 
  pic1.src="http://localhost:1443/images/star_selected_right_w.gif"; 

  pic2= new Image(32,20); 
  pic2.src="http://localhost:1443/images/star_selected_left_w.gif"; 
  
  pic3= new Image(32,20); 
  pic3.src="http://localhost:1443/images/star_bg_right_w.gif"; 
  
  pic4= new Image(32,20); 
  pic4.src="http://localhost:1443/images/star_bg_left_w.gif"; 

  pic5= new Image(6,20); 
  pic5.src="http://localhost:1443/images/star_blank.gif"; 
  
}
*/
        
        var maxRating = 5; //Property
        var currentRating = 2.5; //Property
        var starBlank = '/_images/_system/icons/Star_Blank.gif'; //Property
        var starBackgroundLeft = '/_images/_system/icons/Star_BG_Left_w.gif'; //Property
        var starBackgroundRight = '/_images/_system/icons/Star_BG_Right_w.gif'; //Property
        var starForegroundLeft = '/_images/_system/icons/Star_Selected_Left_w.gif'; //Property
        var starForegroundRight = '/_images/_system/icons/Star_Selected_Right_w.gif'; //Property
        var starElementName = 'imgStar';
        var inputId = 'customerStarRating'; //Property
        var canChangeRating = true; //Property
        var allowHalfRatings = false; //Property
        var initialRatingChanged = false; //Internal variable.
        
        
// END OF CODE INSERT SECTION 


        function resetRating(e)
        {

             var selectionPoints = maxRating * 2;
            var activePoints = 0;
            var parentNode = getSelectionsParent(e);
            
            //Display the required stars
            var i=0;       
            var imgStar = '';
            
            activePoints = getSelectedRating(currentRating); 
            
            if(initialRatingChanged==false)
            {
                activePoints = currentRating;
            }
            
               for(i=1;i<=selectionPoints;i++)
                {              
                if((i%2)!=0)
                {//left star    
                    if(i>activePoints)
                    {
                        imgStar = starBackgroundLeft;
                    }
                    else
                    {             
                        imgStar = starForegroundLeft;
                    }
                }
                else
                {//right star 
                    if(i>activePoints)
                    {
                        imgStar = starBackgroundRight;
                    }
                    else
                    {             
                        imgStar = starForegroundRight;
                    }                   
                }
                
                //Update the image
                setObjImage(parentNode + starElementName + i,  imgStar); 
                
            }            
        }
        
        function setObjImage(objName, image)
        {
                var selectedImg = document.getElementById(objName);
                selectedImg.src=image;
        }
        
        function getCurrentHtmlElement(e)
        {
                //Get the event
                if (!e) var e = window.event;
	            e.cancelBubble = true;
	            if (e.stopPropagation) e.stopPropagation();
    	
	            //get the contrl the event happened on
	            var targ = null;
		        if (e.target) targ = e.target;
	            else if (e.srcElement) targ = e.srcElement;
	            if (targ.nodeType == 3) // defeat Safari bug
		        targ = targ.parentNode;	
		        return targ;
        }
        
        function getSelectedStar(e)
        {

		        targ = getCurrentHtmlElement(e);
    		    
    		    //alert('parent ctrl: ' + targ.parentNode.id);
    		    
		        //Return the currently selected rating    		    
		        var selectedStar;
		        selectedStar = targ.id.substr(starElementName.length + targ.parentNode.id.length);		        
		        return selectedStar;
		        
        }
        
        function getSelectionsParent(e)
        {
                targ = getCurrentHtmlElement(e);    		    
    		    return targ.parentNode.id;    		    
        }
        
        function getSelectedRating(selectedStar)
            {
                var rating = selectedStar;
                if((selectedStar%2)!=0 && allowHalfRatings==false)
                {//Select the whole star            
                    rating=Number(selectedStar)+1;                
                }                
                return rating;                
            }
        
        function selectRating(e)
        {
            //Get the selected Rating
		    var selectedStar=getSelectedStar(e);
		    		    
		    //Set the selected rating
		    currentRating=selectedStar;
		    
		    //Set the value of the input field to postback to server
		    setStarRating(currentRating);
		    
		    initialRatingChanged = true;
        }
        
        function hoverRating(e)
        {               
  
            //Get the selected Rating
		    var selectedStar=getSelectedStar(e);		    
	        var parentNode = getSelectionsParent(e);
	        
            //onclick event handler for star rating selection
            var i=0;
            var selectionPoints = maxRating*2;
            var activePoints = 0;
            var imgStarOver = null;
            
            activePoints = getSelectedRating(selectedStar);                                     
            
            for(i=1;i<=selectionPoints;i++)
            {              
                if((i%2)!=0)
                {//left star    
                    if(i>activePoints)
                    {
                        imgStarOver = starBackgroundLeft;
                    }
                    else
                    {             
                        imgStarOver = starForegroundLeft;
                    }
                }
                else
                {//right star 
                    if(i>activePoints)
                    {
                        imgStarOver = starBackgroundRight;
                    }
                    else
                    {             
                        imgStarOver = starForegroundRight;
                    }                   
                }
               
               //Set the new image      
               setObjImage(parentNode + starElementName + i,  imgStarOver);                  
            }                
        }
        
        //global variable
        var divCount = 1;
        
        function createNewDiv()
        {
            var newDiv = document.createElement('div');
            newDiv.setAttribute('id', starElementName + divCount);
            divCount = Number(divCount)+1;    
            return newDiv;                                
        }
        
        function buildRatingControl(_divID, _maxRating, _currentRating, _canChangeRating, _allowHalfRatings)
        {

            /* Set the properties as provided by parameters*/
            maxRating = _maxRating; //Property
            currentRating = _currentRating; //Property            
            //var starElementName = 'imgStar';
            //var inputId = 'starRating'; //Property - Control used to return selected rating in postback
            canChangeRating = _canChangeRating; //Property
            allowHalfRatings = _allowHalfRatings; //Property                        
            
            var div = document.getElementById(_divID);
            //var div = createNewDiv(); //document.getElementById(currentElement);
            var selectionPoints = maxRating*2;
            currentRating = Number(currentRating) * 2;

            //Display the required stars
            var i=0;
            var starDiv = null;
            var imgStar = '';
            var imgStarOver = '';
           
           
           //Display the blank area to select no rating
           createStarInput(0, starBlank, div);

            for(i=1;i<=selectionPoints;i++)
                {              
                    if((i%2)!=0)
                    {//left star    
                        if(i>currentRating)
                        {
                            imgStar = starBackgroundLeft;
                        }
                        else
                        {             
                            imgStar = starForegroundLeft;
                        }
                    }
                    else
                    {//right star 
                        if(i>currentRating)
                        {
                            imgStar = starBackgroundRight;
                        }
                        else
                        {             
                            imgStar = starForegroundRight;
                        }   
                    }
                    //Display Stars
                    createStarInput(_divID + starElementName + i, imgStar, div);                
               }    
               
               //Set the value of the current rating for postback
               setStarRating(currentRating);

        }                     
        
        function createStarInput(id, backgroundImage, parentControl) 
        {
        //Create the new control         
        var newImg = document.createElement('img');
        newImg.setAttribute('id', id);
        newImg.setAttribute('src', backgroundImage);
        
        if(canChangeRating)
        {//add the event handlers
            if(newImg.attachEvent)
            {            
                newImg.attachEvent('onmouseover',hoverRating, false);
                newImg.attachEvent('onmouseout',resetRating, false);
                newImg.attachEvent('onclick',selectRating, false);
            }
            
            if(newImg.addEventListener)
            {
                newImg.addEventListener('mouseover',hoverRating, false);
                newImg.addEventListener('mouseout',resetRating, false);
                newImg.addEventListener('click',selectRating, false);
            }
        }
               
        //Add the new control to the page
        parentControl.appendChild(newImg);
        
        }
        
        function createInputControl(parentControl) 
        {
        //Create the new control         
        var inputCtrl = document.createElement('input');
        inputCtrl.setAttribute('id', inputId);
        inputCtrl.setAttribute('type', 'hidden');
        inputCtrl.setAttribute('value', '0');                   
                
        //Add the new control to the page
        parentControl.appendChild(inputCtrl);
        
        }
        
        function setStarRating(rating)
        {
            //var ctrl = document.getElementById(inputId);
            //starRatingField
            var ctrl = document.getElementById(inputId);
            var retValue = rating/2;
            
            if(allowHalfRatings==false)
            {            
                if(Number(retValue) - Math.floor(retValue) == 0.5)
                {
                    //Account of half Values when not allowed
                    retValue = Number(retValue)+0.5;
                }
            }
           
            if(ctrl!=null)
            {                       
                ctrl.setAttribute('value', retValue);
            }
        }
        
        //-->

