﻿/*
 * v16-xml-news-ticker.js,v 1.0 2009/02/15 15:30:07 janetka
 * News ticker, data pulled from XML. 
 * Owner: Jan Janetka/Slovakia/Contr/IBM
*/

(function ($) {
		   
	// namespace 'news' for news ticker	
	var news = {
		
		preferences: {
			// translation for link 'Previous',
			previous: "előző",
			// translation for link 'Next',
			next: "következő",
			// rotation time in seconds
			time: "30",
			// should we generate also "previous" / "next" container ?
			pn: true
		},
		
		storage: {
			// number of boxes to display
			n: 0,
			// currently displayed box
			c: 0,
			obj: null,
			// interval ID
			interval: null
		},
		
		// load XML data from file
		init: function (el) {
			news.storage.obj = el;
			$ (news.storage.obj).css ({width: "528", height: "95px", overflow: "hidden", zIndex: "0", position: "relative"});
			
			news.storage.n = $ ('ul.ibm-portrait-module-list', news.storage.obj).length;
			if (news.preferences.pn) {
				news.createButtons ();
			}
			
			$ ("ul.ibm-portrait-module-list", news.storage.obj).css ({ position: "absolute", top: "0px", left: "-530px", zIndex: "0", width: "528px" });		
						
			// everything is ready
			// now we will display the first news
			//news.adjustHeight (0);
			$("ul.ibm-portrait-module-list:eq(0)", news.storage.obj).animate ({left: 0}, 1000);
			// and we can initialize the ticker
			news.run ();
		},
		
		// will create and apped 'Next' / 'Previous' buttons
		createButtons: function () {
			var parent = $(news.storage.obj).parent ();
			var h2 = $ ('h2:first', parent);
			
			var code = '<span style="position: relative; top: 0px; left: 290px;">' +
					'<a class="newsTicker-previous" href="#' + news.preferences.previous + '">' + news.preferences.previous + '</a> | ' +
					'<a class="newsTicker-next" href="#' + news.preferences.next + '">' + news.preferences.next + '</a></span>'
			
			$(h2).append (code);
			
			// set CSS and attach event handler for each link
			$ ("a.newsTicker-previous").click (function () { news.rotatePrevious () });
			$ ("a.newsTicker-next").click (function () { news.rotate () });
		},
		
		// this function will take care of showing the first news and cycling through them
		run: function () {
			news.storage.interval = setInterval (this.rotate, this.preferences.time * 1000);
			// make sure we stop hovering once user is over the box with mouse
			var parent = $(news.storage.obj).parent ();
			$ (parent).hover (function () {
				// mouse over -> clear interval
				clearInterval (news.storage.interval);														  
			}, function () {
				// mouse out -> set interval again and do one rotation right now
				news.storage.interval = setInterval (news.rotate, news.preferences.time * 1000);
			});
		},
		
		// the cool efect for cycling through news
		rotate: function () {
			// which box should we display now
			var n = (news.storage.c + 1) % news.storage.n;		
			// move current box to right, so it will dissapear
			$("ul.ibm-portrait-module-list:eq(" + news.storage.c + ")", news.storage.obj).animate ({left: 530}, 1000, function () {
			// now that it's in right, we will return it to basic position, left from the box, hidden
				$ (this).css ({ left: "-530px" });																											
			});
			
			// at the same time, move new box to center, so we can see it
			$("ul.ibm-portrait-module-list:eq(" + n + ")", news.storage.obj).animate ({left: 0}, 1000);

			news.adjustHeight (n);
			
			// set current values to storage
			news.storage.c = n;
		
		},
		
		// and go back
		rotatePrevious: function () {
			// which box should we display now
			var n = (news.storage.c - 1) % news.storage.n;
			if (n == -1) {
				n = news.storage.n - 1;
			}			
			// move the new box to the right
			$("ul.ibm-portrait-module-list:eq(" + n + ")", news.storage.obj).css ({left: 530});		
			// move current box to left, so it will dissapear
			$("ul.ibm-portrait-module-list:eq(" + news.storage.c + ")", news.storage.obj).animate ({left: -530}, 1000);		
			// at the same time, move new box to center, so we can see it
			$("ul.ibm-portrait-module-list:eq(" + n + ")", news.storage.obj).animate ({left: 0}, 1000);
			
			news.adjustHeight (n);	
			
			// set current values to storage
			news.storage.c = n;
		},
		
		adjustHeight: function (n) {
			// now the tricky part
			// if text we are about to display is too long, some part of it might get lost beneath the box
			// so we need to get it's height and compare to current box height
			// and set it so it would fit
			$ (news.storage.obj).height ($("ul.ibm-portrait-module-list:eq(" + n + ")", news.storage.obj).height () );
		},
		
		// function for displaying error messages.
		error: function (t) {
			$ ("#ibm-content-main > *:first").before ('<p class="ibm-ind-error">' + t);	
			return;
		}		
	};
	
	var news1 = {
		
		preferences: {
			// translation for link 'Previous',
			previous: "előző",
			// translation for link 'Next',
			next: "következő",
			// rotation time in seconds
			time: "30",
			// should we generate also "previous" / "next" container ?
			pn: true
		},
		
		storage: {
			// number of boxes to display
			n: 0,
			// currently displayed box
			c: 0,
			obj: null,
			// interval ID
			interval: null
		},
		
		// load XML data from file
		init: function (el) {
			news1.storage.obj = el;
			$ (news1.storage.obj).css ({width: "528", height: "95px", overflow: "hidden", zIndex: "0", position: "relative"});
			
			news1.storage.n = $ ('ul.ibm-portrait-module-list', news1.storage.obj).length;
			if (news1.preferences.pn) {
				news1.createButtons ();
			}
			
			$ ("ul.ibm-portrait-module-list", news1.storage.obj).css ({ position: "absolute", top: "0px", left: "-530px", zIndex: "0", width: "528px" });		
						
			// everything is ready
			// now we will display the first news
			//news1.adjustHeight (0);
			$("ul.ibm-portrait-module-list:eq(0)", news1.storage.obj).animate ({left: 0}, 1000);
			// and we can initialize the ticker
			news1.run ();
		},
		
		// will create and apped 'Next' / 'Previous' buttons
		createButtons: function () {
			var parent = $(news1.storage.obj).parent ();
			var h2 = $ ('h2:first', parent);
			
			var code = '<span style="position: relative; top: 0px; left: 215px;">' +
					'<a class="newsTicker-previous1" href="#' + news1.preferences.previous + '">' + news1.preferences.previous + '</a> | ' +
					'<a class="newsTicker-next1" href="#' + news1.preferences.next + '">' + news1.preferences.next + '</a></span>'
			
			$(h2).append (code);
			
			// set CSS and attach event handler for each link
			$ ("a.newsTicker-previous1").click (function () { news1.rotatePrevious () });
			$ ("a.newsTicker-next1").click (function () { news1.rotate () });
		},
		
		// this function will take care of showing the first news and cycling through them
		run: function () {
			news1.storage.interval = setInterval (this.rotate, this.preferences.time * 1000);
			// make sure we stop hovering once user is over the box with mouse
			var parent = $(news1.storage.obj).parent ();
			$ (parent).hover (function () {
				// mouse over -> clear interval
				clearInterval (news1.storage.interval);														  
			}, function () {
				// mouse out -> set interval again and do one rotation right now
				news1.storage.interval = setInterval (news1.rotate, news1.preferences.time * 1000);
			});
		},
		
		// the cool efect for cycling through news
		rotate: function () {
			// which box should we display now
			var n = (news1.storage.c + 1) % news1.storage.n;		
			// move current box to right, so it will dissapear
			$("ul.ibm-portrait-module-list:eq(" + news1.storage.c + ")", news1.storage.obj).animate ({left: 530}, 1000, function () {
			// now that it's in right, we will return it to basic position, left from the box, hidden
				$ (this).css ({ left: "-530px" });																											
			});
			
			// at the same time, move new box to center, so we can see it
			$("ul.ibm-portrait-module-list:eq(" + n + ")", news1.storage.obj).animate ({left: 0}, 1000);

			news1.adjustHeight (n);
			
			// set current values to storage
			news1.storage.c = n;
		
		},
		
		// and go back
		rotatePrevious: function () {
			// which box should we display now
			var n = (news1.storage.c - 1) % news1.storage.n;
			if (n == -1) {
				n = news1.storage.n - 1;
			}			
			// move the new box to the right
			$("ul.ibm-portrait-module-list:eq(" + n + ")", news1.storage.obj).css ({left: 530});		
			// move current box to left, so it will dissapear
			$("ul.ibm-portrait-module-list:eq(" + news1.storage.c + ")", news1.storage.obj).animate ({left: -530}, 1000);		
			// at the same time, move new box to center, so we can see it
			$("ul.ibm-portrait-module-list:eq(" + n + ")", news1.storage.obj).animate ({left: 0}, 1000);
			
			news1.adjustHeight (n);	
			
			// set current values to storage
			news1.storage.c = n;
		},
		
		adjustHeight: function (n) {
			// now the tricky part
			// if text we are about to display is too long, some part of it might get lost beneath the box
			// so we need to get it's height and compare to current box height
			// and set it so it would fit
			$ (news1.storage.obj).height ($("ul.ibm-portrait-module-list:eq(" + n + ")", news1.storage.obj).height () );
		},
		
		// function for displaying error messages.
		error: function (t) {
			$ ("#ibm-content-main > *:first").before ('<p class="ibm-ind-error">' + t);	
			return;
		}		
	};
	
	$ (document).ready (function () {
		news.init ($ ('div.ibm-rotating-box:eq(0)'));
		news1.init ($ ('div.ibm-rotating-box:eq(1)'));
	});
}) (jQuery);