// SAVE FUNCTION
var rating_text = '<span class="rating_text">Rollover and click to rate<span>';
var own_text = '<span class="rating_text">you cannot rate  your own lookbook<span>';

function ajaxRating(req)
  {
	  ratingStatus = eval("(" + req.responseText + ")");

	if (ratingStatus.ratingStatus == 'SUCCESS') {
		$('indicator').style.display = 'none';
		$('view_message_rating').innerHTML = '<span class="red">saved</span>';
		
		//setTimeout('toggleRating('+ratingStatus.ratingAvg+', '+ratingStatus.rating+')', 1000);
		setTimeout('toggleRating('+ratingStatus.rating+', '+ratingStatus.rating+')', 1000);
	} 

  }


// Initialize Rating Module onLoad for Fully Ajax (2.1) Change ratingTile.jsp to use this function
function initializeRating(lookbookId)
{
    var url = '/user/ajax/mystyle/mylookbooks/rating/average';
	var params = 'lookbookId='+lookbookId;
    new Ajax.Request(url, {method:'get', parameters:params, onSuccess:handlerFuncCreate, onFailure:errFuncCreate});         
}

	var handlerFuncCreate = function(t) {
		ratingValue = eval("(" + t.responseText + ")");  
		var numStars = Math.round(ratingValue.rating);
		var ratingPct = Math.round(ratingValue.rating*25); // 25 if scale if up to 4
		
		if(ratingPct == 0) {
			var text = 'not yet rated';
		} else {
			var text = 'Lookbook rating: '+ratingPct+'%';
		}
		
		$('view_mode').innerHTML = '';
		createStars(numStars, 'view_mode', text);
	}
	
	var errFuncCreate = function(t) {
		alert('Error ' + t.status + ' -- ' + t.statusText);
	}


// Temporary Cached functionality (2.0) - remove for 2.1
function initializeRatingCached(lookbookId, lookbookAvgRating) {
		ratingValue = lookbookAvgRating;
		var numStars = Math.round(ratingValue);
		var ratingPct = Math.round(ratingValue*25); // 25 if scale if up to 4
		
		if(ratingPct == 0) {
			var text = 'not yet rated';
		} else {
			var text = 'Lookbook rating: '+ratingPct+'%';
		}
		
		$('view_mode').innerHTML = '';
		createStars(numStars, 'view_mode', text);
		/*$('view_mode').style.display = 'block';
		$('edit_mode').style.display = 'none';*/
	}
	
// Rate It Action (when user click on button)
/*
function rateIt(lookbookId)
{	
	$('indicator').style.display = 'block';
    var url = '/user/ajax/mystyle/mylookbooks/rating/user';
	var params = 'lookbookId='+lookbookId;
    new Ajax.Request(url, {method: 'get', parameters:params, onSuccess:handlerFuncRateIt, onFailure:errFuncRateIt});         
}

	var handlerFuncRateIt = function(t) {
		ratingStatus = eval("(" + t.responseText + ")");
		if (ratingStatus.ratingStatus == 'SUCCESS') 
		{
			//toggleRating(ratingStatus.ratingAvg, ratingStatus.rating);
			toggleRating(ratingStatus.rating, ratingStatus.rating);
		} 
		else if (ratingStatus.ratingStatus == 'LOGIN') 
		{
			var loginUrl = '/user/login';
			var loginParams = 'returnto='+escape(rateReturnTo+'&status=rate');
			
			window.location = loginUrl+'?'+loginParams;
		} 
		else if (ratingStatus.ratingStatus == 'ownLookbook') 
		{
			alert('hey');
			$('view_message_rating').innerHTML = own_text;
			$('lookbook_ratings_rate_btn').style.display = 'none';
			$('indicator').style.display = 'none';
		}
		
		
	}
	
	var errFuncRateIt = function(t) {
		alert('Error ' + t.status + ' -- ' + t.statusText);
	}

*/

// Perform UI functionality
function toggleRating(lookbookVal, userVal) {	
	var userVal = Math.round(userVal);
	var userVal = Math.round(userVal);
	var numStars = Math.round(lookbookVal);
	var ratingPct = Math.round(lookbookVal*25); // 25 if scale if up to 4
				  
	if($('view_mode').style.display == 'block') {
		
		var text = rating_text;
		$('edit_mode').innerHTML = '';
    	createRatings(userVal, 'edit_mode', text);
		
		$('view_mode').style.display = 'none';
		$('edit_mode').style.display = 'block';
		$('button').className = 'rate_red';

	} else if($('view_mode').style.display == 'none') {
		
		var text = 'Lookbook rating: '+ratingPct+'%';
		$('view_mode').innerHTML = '';
    	createStars(numStars, 'view_mode', text);
		
		$('view_mode').style.display = 'block';
		$('edit_mode').style.display = 'none';
		$('button').className = 'rate';
	}else
	{var text = rating_text;
		$('edit_mode').innerHTML = '';
    	createRatings(userVal, 'edit_mode', text);
		
		$('view_mode').style.display = 'none';
		$('edit_mode').style.display = 'block';
		$('button').className = 'rate_red';}
	
	$('indicator').style.display = 'none';
}

// Change star message (1 star, 2 stars, etc..)
function ratingMessage(id)
{
	for(var i = 1; i < 5; i++) {

		if(id == 'star_' + i) {
			if(i != 1) { plural = 's'; } else { plural = ''; }
			$('view_message_rating').innerHTML = i+' star'+plural;
		} else if(id == 'clear') {
			if($('indicator').style.display != 'block')
			$('view_message_rating').innerHTML = rating_text;
		} else if(id == 'click') {
			$('indicator').style.display = 'block';
		} 
	}
}

// Create view mode stars (yellow)
function createStars(val, container, text) {	
	$('view_message_rating').innerHTML = text;
	return new Stars({
		maxRating: 4,
		value: val,
		container: container,
		imagePath: '/images/lookbooks/ratings/view/',
		locked: true
		  });
}

// Create edit mode stars (red, with ajax call onClick)
function createRatings(val, container, text) {
	$('view_message_rating').innerHTML = text;
	return new Stars({
		maxRating: 4,
		actionURL: '/user/ajax/mystyle/mylookbooks/rating/save?lookbookId='+lookbookId+'&userRatingVal=',
		callback: ajaxRating,
		container: container,
		imagePath: '/images/lookbooks/ratings/edit/',
		value: val
	  });
	
}
	
	
/**
 * Dynamic Rating stars
 */

var Stars = Class.create();
Stars.prototype = {
	/**
	 * Mouse X position
	 * @var {Number} options
	 */
	_x: 0,
	/**
	 * Mouse X position
	 * @var {Number} options
	 */
	_y: 0,
	/**
	 * Constructor
	 * @param {Object} options
	 */
	initialize: function(options)
	{

		/**
		 * Initialized?
		 * @var (Boolean)
		 */
		this._initialized = false;

		/**
		 * Base option values
		 * @var (Object)
		 */
		this.options = {
			bindField: null,			// Form Field to bind the value to
			maxRating: 5,				// Maximum rating, determines number of stars
			container: null,			// Container of stars
			imagePath: 'images/',		// Path to star images
			callback: null,				// Callback function, fires when the stars are clicked
			actionURL: null,			// URL to call when clicked. The rating will be appended to the end of the URL (eg: /rate.php?id=5&rating=)
			value: 0,					// Initial Value
			locked: false
		};
		Object.extend(this.options, options);
		this.locked = this.options.locked ? true : false;
		/**
		 * Image sources for hover and user-set state ratings
		 */
		this._starSrc = {
			
			empty: this.options.imagePath + "star-empty.gif",
			full: this.options.imagePath + "star.gif",
			half: this.options.imagePath + "star-half.gif"
		};
		/**
		 * Preload images
		 */
		for(var x in this._starSrc)
		{
			var y = new Image();
			y.src = this._starSrc[x];
		}


		/**
		 * Images to show for pre-set values, changes when hovered, if not locked.
		 */
		this._setStarSrc = {
			empty: this.options.imagePath + "star-ps-empty.gif",
			full: this.options.imagePath + "star-ps.gif",
			half: this.options.imagePath + "star-ps-half.gif"
		};

		/**
		 * Preload images
		 */
		for(var x in this._setStarSrc)
		{
			var y = new Image();
			y.src = this._setStarSrc[x];
		}

		this.value = -1;
		this.stars = [];
		this._clicked = false;


		if(this.options.container)
		{
			this._container = $(this.options.container);
			this.id = this._container.id;
		}
		else
		{
			this.id = 'starsContainer.' + Math.random(0, 100000);
			this.container.innerHTML = '<span id="' + this.id + '"></span>';
			this._container = $(this.id);
		}
		this._display();
		this.setValue(this.options.value);
		this._initialized = true;
	},
	_display: function()
	{
		for(var i = 0; i < this.options.maxRating; i++)
		{
			var star = document.createElement('img');
			star.src = this.locked ? this._starSrc.empty : this._setStarSrc.empty;
			star.title = 'Rate as ' + (i + 1);
			star.id = 'star_' + (i + 1);
			
			!this.locked && Event.observe(star, 'mouseout', this._starReset);
			!this.locked && Event.observe(star, 'mouseover', this._starHover.bind(this));
			!this.locked && Event.observe(star, 'click', this._starClick.bind(this));
			!this.locked && Event.observe(star, 'mouseout', this._starClear.bind(this));
			this.stars.push(star);
			this._container.appendChild(star);
		}
	},
	
	_starHover: function(e)
	{
		if(this.locked) return;
		if(!e) e = window.event;
		var star = Event.element(e);

		ratingMessage(star.id);
		var greater = false;
		for(var i = 0; i < this.stars.length; i++)
		{	
			this.stars[i].src = greater ? this._starSrc.empty : this._starSrc.full;
			if(this.stars[i] == star) greater = true;
		}
	},
	
	_starReset: function(e)
	{	
		ratingMessage('clear');
	},
	
	_starClick: function(e)
	{
		if(this.locked) return;
		if(!e) e = window.event;
		var star = Event.element(e);
		this._clicked = true;
		for(var i = 0; i < this.stars.length; i++)
		{
			if(this.stars[i] == star)
			{
				this.setValue(i+1);
				break;
			}
		}
		ratingMessage('click');
	},
	_starClear: function(e)
	{
		if(this.locked && this._initialized) return;
		var greater = false;
		
		for(var i = 0; i < this.stars.length; i++)
		{
			if(i > this.value) greater = true;
			if((this._initialized && this._clicked) || this.value == -1)
				this.stars[i].src = greater ? (this.value + .5 == i) ? this._starSrc.half : this._starSrc.empty : this._starSrc.full;
			else
				this.stars[i].src = greater ? (this.value + .5 == i) ? this._setStarSrc.half : this._setStarSrc.empty : this._setStarSrc.full;
		}
		
	},
	setValue: function(val)
	{
                if(this.locked && this._initialized) return;
		this.value = val-1;
		if(this.options.bindField) {
			$(this.options.bindField).value = val;
                }
		if(this._initialized)
		{
			if(this.options.actionURL)
				new Ajax.Request(this.options.actionURL + val, {onComplete: this.options['callback'], method: 'get'});
			else
				if(this.options.callback)
					this.options['callback'](val);
		}
		this._starClear();
	}
};