// JavaScript Document
(function( window, document, $, undefined ){
	
if(typeof window.Philips == "undefined") {
	window.Philips = {};
}
var Philips = window.Philips;

/** @namespace */
Philips.PEX = Philips.PEX || {};

var PEX = Philips.PEX;



PEX.variations = function (options) {  
	this._def = {	 
		_debug:true,
		_variationLabel:'Also available in:',
		_width:450,
		_hgap:5,
		_variationCount:9
	} 
	
	this.timeOutOn = false;
	
	this._o = $.extend({}, this._def, options); 
	this.variations = [];
	this.variationsPopup = [];
	this._currentDisplay = -1;
	if (typeof this._o._vDiv == "undefined" || this._o._vDiv == null) {
		this._log("viewerDiv should be a jQuery reference to a div(" + (typeof this._o._vDiv) + " " + this._o._vDiv + ")");
		return;
	}
	
 
	if(this._o._varData.Product.length < 2){return;}
 
	
	sv = this;	 
	
	this._o._vDiv.append('<div class="box-label">' + this._o._variationLabel + '</div>');
	
	this._createNodes();
            
}

PEX.variations.prototype._createNodes = function () {  
  
this._o._variationCount = (( this._o._variationCount > this._o._varData.Product.length ) ? this._o._varData.Product.length :  this._o._variationCount); 


var currentCTNNode = this._getIndex(this._o._varData.Product, this._o._currentCTN, 'CTN');
	
	$(this._o._varData.Product).each(function(index){  
	 
		 if(index == currentCTNNode){ 	 
		 	if((typeof $(this)[0].DisplayImage) ==  'string' && $(this)[0].DisplayImage  !=  '' ) { 
		 	// Creating first textNode 
			var tVar = $('<div class="pictureVariationsBox VariationsBox"><div class="inner-box-selected rounded-corner-2"  id="variationnode-'+ index + '" style="background-image:url('+ $(this)[0].DisplayImage + ');"></div><div class="topdiv-selected"  id="variationnodemask-'+ index + '" ></div></div>' ); 	
			}else { 
			var tVar = $('<div class="textVariationsBox VariationsBox"><div class="topdiv-selected"></div><div class="inner-box-selected rounded-corner-2"  id="variationnode-'+ index + '"><a>'+ $(this)[0].DisplayText +'</a></div></div>' ); 	
			}
			
			sv._o._vDiv.append(tVar); 
			
			// creating blank popup obj
			var pVar = {}; 			
		 }else {   
		 
		 	// Creating rest of textNode 
			
				if((typeof $(this)[0].DisplayImage) ==  'string'  && $(this)[0].DisplayImage  !=  '') {
				 	 //console.log($(this)[0].DisplayImage + ":" + $(this)[0].DisplayText);   
			 var tVar = $('<div class="pictureVariationsBox VariationsBox"><div id="variationnode-'+ index + '" class="inner-box rounded-corner-2" style="background-image:url('+ $(this)[0].DisplayImage + ');"></div><div class="topdiv" id="variationnodemask-'+ index + '" ></div></div>' );  
				}else { 
				 var tVar = $('<div class="textVariationsBox VariationsBox"><div class="topdiv"></div><div id="variationnode-'+ index + '" class="inner-box rounded-corner-2"><a href="#" onclick="variationItemClick(\''  +   escape($(this)[0].DisplayText)   + '\', \''  +  escape($(this)[0].Link)   + '\' )">'+ $(this)[0].DisplayText +'</a></div></div>' ); 
				}
			sv._o._vDiv.append(tVar);   
			if($(this)[0].DescriptionImage == "" || typeof $(this)[0].DescriptionImage == "object") {  
				// creating popup obj without image 			  
				var pVar = $('<div class="variation-popup" id="variationpopup-' + index + '"><div class="inner-box rounded-corner-4"><li ></li><li class="desc-text" style="width:160px;" ><a href="#"  onclick="variationItemClick(\''  +  escape($(this)[0].DisplayText)   + '\', \''  +  escape($(this)[0].Link)   + '\')">'+ $(this)[0].Description + '</a></li></div><div class="bottom-div"></div><div>' ); 
				sv._o._vDiv.append(pVar);
			}else { 	 
				var pVar = $('<div class="variation-popup" id="variationpopup-' + index + '"><div class="inner-box rounded-corner-4"><li class="desc-image clearfix"><a href="#" onclick="variationItemClick(\''  +  escape($(this)[0].DisplayText)   + '\', \''  +  escape($(this)[0].Link)   + '\')"><img src="' + $(this)[0].DescriptionImage   + '" height="49" border="0" alt="'+ $(this)[0].Description + '"/></a></li><li class="desc-text" style="width:160px;" ><a href="#"  onclick="variationItemClick(\''  +  escape($(this)[0].DisplayText)   + '\', \''  +  escape($(this)[0].Link)   + '\')">'+ $(this)[0].Description + '</a></li></div><div class="bottom-div"></div><div>' ); 
				sv._o._vDiv.append(pVar);
			} 
		 } 
		 sv.variations.push(tVar); 
		 sv.variationsPopup.push(pVar);
		 
		 $(".textVariationsBox .inner-box").mouseover(function () { 
			sv._selectPopup($(this).attr('id').split("-")[1]);
		 });
		 
		 $(".textVariationsBox .inner-box").mouseout(function () { 
		 	sv.timeOutOn = true;
			setTimeout(sv._hideVariation, 300);
		 });
		 
		  $(".pictureVariationsBox .topdiv").mouseover(function () {   
			sv._selectPopup($(this).attr('id').split("-")[1]);
		 });
		 
		 $(".pictureVariationsBox .topdiv").mouseout(function () { 
		 	sv.timeOutOn = true;
			setTimeout(sv._hideVariation, 300);
		 });
		 
		 $(".variation-popup").mouseover(function () { 
			sv.timeOutOn = false;
		 });
		 
		 $(".variation-popup").mouseout(function () { 
		 	sv.timeOutOn = true;
			setTimeout(sv._hideVariation, 300);
		 });
		 
	})
	
	setTimeout(sv._launchAlignNodes, 200);
	

}
PEX.variations.prototype._launchAlignNodes = function() { 
	sv._alignNodes();
}

variationItemClick =function (desc, vurl) { 
	 
	if(typeof _page.metrics.trackFlash != 'undefined'){ 
		_page.metrics.trackFlash ({
			"pagename":s.pageName + ":product variations:" + unescape(desc),
			"type":"o"
		});
	}
	window.location.href= unescape(vurl);
}


PEX.variations.prototype._hideVariation = function() { 
 if(sv.timeOutOn) { 
	 sv.timeOutOn = false;
 	 $(".variation-popup").hide(); 
	sv._currentDisplay = -1;
 }
}

PEX.variations.prototype._alignNodes = function() {  
	var t = this._o._vDiv;
	var tw = $(t).children('.box-label').width() ;
	var isInRange = true 
	var ctype = (( this._o._varData.type == 'Picture/Display' ) ? ".pictureVariationsBox" :  ".textVariationsBox");  
	
	$(t).children('.VariationsBox').each(function (index) { 
		if(isInRange){ 
			if((tw + $(this).width() + sv._o._hgap) > sv._o._width ) { 
				sv._o._variationCount = (index);
				isInRange = false;
				$(this).hide(); 
			}else { 
				tw += $(this).width() + sv._o._hgap;
			}
			
			if(index == 0){ 
				var twx =  $(this).width();
				$(this).find(".topdiv-selected").css('width' , twx + 'px'); 
			}
			
		}else { 
			 $(this).hide();	
		}
		
	});
	
	
	
	
	$(t).css('left', ((this._o._width - tw) /2) + 45)
	 
	 sv._o._vDiv.fadeIn();
}

 
PEX.variations.prototype._selectPopup = function(indx) {
	 
	this.timeOutOn = false;
 	if(this._currentDisplay == indx || indx == 'undefined')return false;  
    $(".variation-popup").hide();     
		
	var _pos =  $(this.variations[indx][0]).position() ; 
	_pos = _pos.left - ($(this.variationsPopup[indx][0]).width() / 2); 
	_pos = _pos + ($(this.variations[indx][0]).width()/2) + this._o._hgap; 
	$(this.variationsPopup[indx][0]).css("left",  _pos   + "px")
	
	$(this.variationsPopup[indx][0]).show(); 
  		var varpopw = 189;
		$(this.variationsPopup[indx][0]).find('li').each(function(index){ 
			 var xp =  $(this); 
			 $(this).children('a').each(function(index1){
				 	if(index == 0) { 
						varpopw += $(this).width();
					}else {
						var thie = $(this).height();
						thie = (50 - thie)/2
						xp.css('padding-top', thie + 'px')
					}
			 });
		});
		$(this.variationsPopup[indx][0]).css('width', varpopw + 'px' )
		 
		 	var _pos =  $(this.variations[indx][0]).position() ; 
	_pos = _pos.left - ($(this.variationsPopup[indx][0]).width() / 2); 
	_pos = _pos + ($(this.variations[indx][0]).width()/2) + this._o._hgap; 
	$(this.variationsPopup[indx][0]).css("left",  _pos   + "px")
 
	this._currentDisplay =  indx
}


PEX.variations.prototype._getIndex = function(o, v, f) { for(var i=0; i<o.length; i++)if(o[i][f] == v)return i; return false;} 


PEX.variations.prototype._log = function(strMsg){  
	if(this._def._debug && typeof(console) != 'undefined')console.log(strMsg);
}
 
 
})(window, document, jQuery);