/**
 @date 14.08.09
 @desc This JS file is specifically for developer Central only, please do not copy or use anywhere else.
*/
 
if (typeof DEVCENTRAL == "undefined") {
 /**
     * The PUI global namespace object
     */
    var DEVCENTRAL = {};
}

/**
* Creates namespaces under the DEVCENTRAL object
* This method will take one or more namespace string
* and register objects for those namespaces.
*
* For example:
*
*	DEVCENTRAL.namespace("DEVCENTRAL.widget.myWidget", "cool.namespace");
*
* Will create 2 namespaces:
*	1) DEVCENTRAL.widget.myWidget
*	2) DEVCENTRAL.cool.namespace
*
* @return {Object} The last namespace created
*/
DEVCENTRAL.namespace = function(){
    var a = arguments;
    var names, obj, i, n;
    for (i = 0; i < arguments.length; ++i) {
        names = arguments[i].split(".");
        obj = DEVCENTRAL;

        // DEVCENTRAL is implied, so it is ignored if it is included
        for (n = (names[0] == "DEVCENTRAL") ? 1 : 0; n < names.length; ++n) {
            obj[names[n]] = obj[names[n]] || {};
            obj = obj[names[n]];
        }
    }

    return obj;
}

/*Registering our namespaces*/
DEVCENTRAL.namespace("core");

/**
* Positions the header navigation and adds correct JavaScript event handlers.
* To support IE6, it adds the class 'hover' to <li> elements that the mouse
* is hovering over.
* @requires DEVCENTRAL, YAHOO.util.Event, YAHOO.util.Dom
* preconstructed class with methods
*/
DEVCENTRAL.core.Navigation = {

	/**
	* variable nav - The navigation div container
	*/
	nav : null,

	/**
	* variable iframe - The iframe shim
	*/
	iframe : null,
	/**
	* Initialize navigation
	*/
	init : function(){
		var navPrimary = document.getElementById("navPrimary");
		var navSecondary = document.getElementById("navSecondary");
		var global = document.getElementById("header");
		this.nav = document.getElementById("navFull");
		this.nav2 = document.getElementById("navFull2");

		/*adding functons calls with this init*/
		//need to put this in it's own class - print  event
		this.popupwin( YAHOO.util.Dom.getElementsByClassName('popupwin', 'a') );
		
		//showmore/expando event handler
		this.showmore( YAHOO.util.Dom.getElementsByClassName('hiddenAnswer', 'div'), YAHOO.util.Dom.getElementsByClassName('showmore', 'span') );
		
		//print view
		this.printme( YAHOO.util.Dom.getElementsByClassName("print", "span")); 
		
		//go button
		this.findme( YAHOO.util.Dom.getElementsByClassName("gobutton", "input")); 
		
		//add email mailto code 
		this.mailto(YAHOO.util.Dom.getElementsByClassName("devemail", "a")); 
		
		if(!this.nav || (navPrimary && navPrimary.getElementsByTagName("ul").length > 1)){
			return;
		}
		else{
			this.createIFrameShim(this.nav);
			this.hoverHack(this.nav);
			this.positionNav(this.nav, navPrimary);
		}
		
		if(!this.nav2 || (navSecondary && navSecondary.getElementsByTagName("ul").length > 1)){
			return;
		}
		else{
			this.createIFrameShim(this.nav2);
			this.hoverHack(this.nav2);
			this.positionNav(this.nav2, navSecondary);
		}

		this.hoverHack(global);
	},

	/**
	* Position the nav at the top of the page.
	*/
	positionNav : function(nav, navPrimary){
		var navPrimary = navPrimary;
		var navFull = nav;
		
		// Primary empty?
		if(!navPrimary || navPrimary.getElementsByTagName("ul").length == 0){
			navFull.innerHTML = "";
			return false;
		}
		
		// Primary nav
		if(navPrimary && navFull){
			var ul = navFull.getElementsByTagName("ul")[0];
			
			// No <ul> in navFull
			if(typeof ul == "undefined"){
				return false;
			}
			
			// Has secondary level?
			var active = YAHOO.util.Dom.getElementsByClassName("active", "li", ul);
			if(active.length > 0){  
				active = active[0];
				
				// Is there a <ul> under the active tab
				var sec = active.getElementsByTagName("ul");
				if(sec.length > 0){				
					YAHOO.util.Dom.addClass(ul, "secondary");
				}
			}

			// Add to top
			navPrimary.innerHTML = "";
			navPrimary.appendChild(ul);
			navFull.className = "hide";

			this.nav = navPrimary;
		}
	},

	/**
	* Implement the hover hack to support IE 6 and other non standard browser.
	* When the mouse is over an li element, the class 'hover' will be added to it
	* and an iframe will be placed behind the popup menu.
	* On mouse out, the class will be removed.
	*/
	hoverHack : function(nav){
		var li = nav.getElementsByTagName("li");
		for(var i = 0; i < li.length; i++){
			li[i].onmouseover = function(){
				YAHOO.util.Dom.addClass(this, "hover");

				// Add iframe shim behind UL
				var ul = this.getElementsByTagName("ul");
				if(ul.length == 1){
					DEVCENTRAL.core.Navigation.addIFrameShim(ul[0]);
				}
			}
			li[i].onmouseout = function(event){
				YAHOO.util.Dom.removeClass(this, "hover");
				DEVCENTRAL.core.Navigation.removeIFrameShim(event);
			}
		}
	},

	/**
	* Create the iframe shim.
	* Do this at init so it's ready when the menu appears
	*/
	createIFrameShim : function(nav){

		// Only for Safari
		var ua = navigator.userAgent.toLowerCase();
		if(ua.search(/safari/) > -1){
			this.iframe = document.createElement("iframe");
			this.iframe.src = "javascript:false;";
			this.iframe.style.position = "absolute";
			this.iframe.style.border = "none";
			this.iframe.style.margin = 0;
			this.iframe.style.padding = 0;
			this.iframe.style.zIndex = "1";
			this.iframe.style.visibility = "hidden";
			YAHOO.util.Dom.setStyle(this.iframe, "opacity", "0");

			document.body.appendChild(this.iframe);
		}
	},

	/**
	* Add the iframe shim to fix form elements and flash interference.
	* @param {DomNode} elem The UL element to put the shim behind.
	*/
	addIFrameShim : function(elem){
		if(!this.iframe){
			return;
		}

		/*var xy = YAHOO.util.Dom.getXY(elem);
		this.iframe.style.top = xy[1] +"px";
		this.iframe.style.left = xy[0] +"px";
		this.iframe.style.height = elem.clientHeight +"px";
		this.iframe.style.width = elem.clientWidth +"px";
		this.iframe.style.visibility = "visible";
		this.iframe.style.zIndex = "1";*/
	},

	/**
	* Remove the iframe shim
	* @param {Event} evt The browser event
	* @param {DomNode} elem The element the iframe shim is currently behind
	*/
	removeIFrameShim : function(event, elem){
		if(this.iframe){
			this.iframe.style.visibility = "hidden";
		}
	},

	/**
	* This is for the pop-up window for links
	* @param   array of classnames
	* @return false
	*/
	popupwin : function(arr){
		YAHOO.util.Event.addListener(arr, "click", function (e){
			  this.target= 'newWindow';
			  var link = this.getAttribute("href");
			  var pw = window.open(link, "PayPal",'left=20,top=20,width=815,height=600,toolbar=1,resizable=1,scrollbars=1,location');
			  // Stop propagation and prevent the default "click" behavior 
			  YAHOO.util.Event.stopEvent(e);
		}
		);
		return false;
	},

	/**
	* This is for  formatting the email for mailto 
	* @param s  array of hidden divs, and array of toggle links
	* @return false
	*/
	showmore : function(arrhidden, arrshowmore){
		/*Get the expando value in Url location if exists*/
		var str = ""+document.location;
		var index = str.indexOf("expando=");
		var indexEnd = str.indexOf("&#");
		var expdo = str.substring(index+8, indexEnd);/* index+8 is for 'expando=' */
		/*If JS is enabled, hide all sections that should be and display the expando link */
		for(var i = 0; i < arrhidden.length; i++){
			if(arrhidden[i].id != expdo){/*don't hide this section - for coming from email*/
				arrhidden[i].style.display='none';/*hide the sections*/
				arrshowmore[i].style.display='block';/*display the hidden links*/
			}
			if(arrhidden[i].id == expdo){
				arrshowmore[i].style.display='block';
				arrshowmore[i].className ='shownone';
				arrshowmore[i].innerHTML = 'Collapse article';
				arrshowmore[i].title = arrhidden[i].id;
			}
			
		}
			
		YAHOO.util.Event.addListener(arrshowmore, "click", function (e){
			if(this.className ==  'showmore'){
				document.getElementById(this.getAttribute("title")).style.display='block';
				document.getElementById(this.getAttribute("title")).className = 'showAnswer';
				this.className ='shownone';
				this.innerHTML = 'Collapse article';
			}
			else{
				document.getElementById(this.getAttribute("title")).style.display='none';
				document.getElementById(this.getAttribute("title")).className = 'hiddenAnswer';
				this.className ='showmore';
				this.innerHTML = 'Expand article';
			}
			// Stop propagation and prevent the default "click" behavior 
			YAHOO.util.Event.stopEvent(e);
		}
		);
		return false;
	},

	/**
	* This is for the print pop-up window
	* @param {DomNode|String}  printer - The ID of the element to receive the results.
	* @return nothing
	*/
	printme : function(arr)
	{
        var self = this;
		YAHOO.util.Event.addListener(arr, "click", function (e){
			src = document.getElementById('main').innerHTML;
			link = "about:blank";
			var pw = window.open(link, "printview",'left=20,top=20,width=850,height=700,menubar=1,toolbar=1,resizable=1,scrollbars=1');
			pw.document.open();
			pw.document.write(self.makepage(src));
			pw.document.close();
		}
		);
		return false;
	},

	/**
	* This is for creating a print view pop-up window
	* @param {String}  src - The content source
	* @return String
	*/
	makepage : function(src)
	{
	//This is for print view, but pop-up window
	  // We break the closing script tag in half to prevent
	  // the HTML parser from seeing it as a part of
	  // the *main* page.
	  var str =  "<html>\n" +
	    "<head>\n" +
	    "<title>Printing View</title>\n" +
		"<link href='style.css' rel='stylesheet' />\n" +
	    "</head>\n" +
	    "<body style='padding-left:15px;width:815px'>\n" +
		"<div class='closePrintingView' ><a href='javascript:self.close();'><img src='/cms_content/US/en_US/images/developer/btn_close9x9_03.gif' />&nbsp;Close</a></div>"+ 
		"<div id='main' class='printArea'>\n" +
	      src + 
		"</div>"+ 
	    "</body>\n" +
	    "</html>";
		return str;
	},
	
	/**
	* This is for the anchor select box on directory list
	* @param   array of classnames
	* @return false
	*/
	findme : function(arr)
	{
		
		YAHOO.util.Event.addListener(arr, "click", function (e){
			var str = ""+(window.location);
			var index = str.indexOf("#");
			var url = str.substring(0, index);
			window.location=url+'#'+document.getElementById('selectstate').value;
		}
		);
		return false;
	},

	/**
	* This is for  formatting the email for mailto 
	* @param   array of classnames
	* @return false
	*/
	mailto : function(arr)
	{
		
		YAHOO.util.Event.addListener(arr, "click", function (e){
			var str = this.href;
			var index = str.indexOf("-");
			var email = str.substring(index+1, str.length);
			this.href="mailto:"+email;
		}
		);
		return false;
	}

}

/**
* Carousel sliding viewer, 
* note: eventually we would want this to be in a seperate JS file. For now we are restricted to a 10 objects limit in the header.
* @param {String} el The viewer element id
*/
function Carousel(el){
	this.init(el);
}
Carousel.prototype = {
	
	MOVE_FORWARD : -1,
	MOVE_BACKWARD : +1,
	
	page : 1,
	pages : 0,
	perPage: 0,
	paginateItems : 1,
	buttons : {},
	size : {},
	current : null,
	viewer : null,
	inner : null,
	selected : null,
	animating : false,
	
	/**
	* Initialize the viewer
	* @param {String} el The viewer element id
	*/
	init : function(el){
		var self = this;

		// Get viewer
		this.viewer = document.getElementById(el);
		if(!this.viewer){
			return false;
		}
		this.inner = YAHOO.util.Dom.getElementsByClassName("inner", "div", this.viewer)[0];
		// Enable stack
		YAHOO.util.Dom.addClass(this.viewer, "enabled");
		// Calculate sizes and pages
		this.container = this.viewer.getElementsByTagName("ul")[0];
		this.slides = this.container.getElementsByTagName("li");
		this.size.viewer = this.inner.clientWidth;
		this.size.slide =this.slides[0].clientWidth;

		this.perPage = Math.round(this.size.viewer / this.size.slide);
		this.pages = Math.ceil(this.slides.length / this.perPage);//this.pages = number of ads & this.slides.length=total ads
		this.container.style.width = (this.slides.length * this.size.slide) +"px";
		
		// Add prev button
		var prev = document.createElement("div");
		prev.innerHTML = "";
		prev.className = "leftScroll";
		prev.onclick = function(evt){
			self.paginate(self.MOVE_BACKWARD);
		}
		this.viewer.insertBefore(prev, this.viewer.firstChild);
		this.buttons.prev = prev;
		
		// Add next button
		var next = document.createElement("div");
		next.innerHTML = "";
		next.className = "rightScroll";
		next.onclick = function(evt){ 
			self.paginate(self.MOVE_FORWARD);
		}
		this.viewer.appendChild(next);
		this.buttons.next = next;
		
		// Add event handlers
		/*var a = this.container.getElementsByTagName("a");
		for(var i = 0; i < a.length; i++){
			a[i].onclick = function(evt){
				YAHOO.util.Event.stopEvent(evt);
				self.changeSelection(this);
			}
		}*/
		
		// Put bottom items on top, so user can go previous		
		self.readjustStack(this.MOVE_BACKWARD);
		
		// Add indicator
		var items = this.viewer.getElementsByTagName("li");
		var indicator = document.getElementById("indicator");
		var span;
		span = document.createElement("span");
		span.className = "left";
		indicator.appendChild(span);
		for(i = 0; i < this.slides.length; i++){
			span = document.createElement("span");
			
			if(i == 0){
				span.className = "centeron";
			}
			else{
				span.className = "centeroff";
			}
			
			items[i]._indicator = span;
			indicator.appendChild(span);
		}
		span = document.createElement("span");
		span.className = "right";
		indicator.appendChild(span);
	},
	
	/**
	* Move slides ahead or back a page
	* @param {int} dir The page direction to move (MOVE_FORWARD, MOVE_BACKWARD)
	*/
	paginate : function(dir){
		var self = this;
		
		// Set new page
		//var page = this.page + (dir * -1);
		//if(page > this.pages || page < 1 || this.animating){
		//	return;
		//}
		//this.page = page;

		// Move
		var leftVal = parseInt(YAHOO.util.Dom.getStyle(this.container, "left"));//left is postion's left:, we want to get how far left is the slide
		var movenum = 1;//number of item to move by
		var speed = .2;
		
		// Move
		var origLeft = parseInt(YAHOO.util.Dom.getStyle(this.container, "left"));
		var leftVal = origLeft + ( (this.size.slide * this.paginateItems) * dir);

		this.animating = true;
		//Set auto rollback to the beginning for last prev item
		/*if(this.page > this.slides.length-2){//if(this.page >= this.pages){ this.slides.length-2 means we want to show the last three and roll back 
			leftVal=0;
			this.page =1;
			var speed = .001;
		}*/
		
		this.animating = true;
		var anim = new YAHOO.util.ColorAnim(this.container, { left : { to : leftVal } }, speed);
		anim.onComplete.subscribe( function(){ 
			self.animating = false;
			self.readjustStack(dir);
		});
		anim.animate();
	},
	
	/**
	* Readjust the stack for endless pagination.  (put top on bottom or visa versa)
	* @param {int} forDir The direction to adjust for
	*/
	readjustStack : function(forDir){
		var left = parseInt(YAHOO.util.Dom.getStyle(this.container, "left"));
		var items = this.viewer.getElementsByTagName("li");
		var ul = items[0].parentNode;
		
		// Add top items to bottom of stack
		if(forDir == this.MOVE_FORWARD){
			for(var i = 0; i < this.paginateItems; i++){
				ul.appendChild(items[0])
			}
			this.container.style.left = left + (this.paginateItems * this.size.slide) + "px";
		}
		// Add bottom items to top of stack
		else{
			var last = items.length - 1;
			for(var i = 0; i < this.paginateItems; i++){
				ul.insertBefore(items[last], items[0])
			}
			this.container.style.left = left - (this.paginateItems * this.size.slide) + "px";
		}
		
		// Update indicator
		if(items[0]._indicator){
			if(this.current){
				this.current._indicator.className = "centeroff";
			}
			items[0]._indicator.className = "centeron";
		}
		this.current = items[0];
	}
}



YAHOO.util.Event.addListener(window, "load", function(){ new Carousel("carousel"); } );