﻿function TrackLoginFunction(){
				$('a.login-button').each(function(index){
					
					var name = $(this).attr('rel');
					var ct = $(this).attr('ct');
					//alert(name);
					$(this).click(function(){ trackLoginClick(name, ct); return true;} );
				});
				//trackLoginClick
			}

(function($){
	
	$.loginPanel = {
		
		duration:365,
		
		cookiename:'loginprefs',
		
		logins:{
			chk00:{name:'Online Banking (UK)',description:'Digital banking for UK clients',url:'http://www.440strand.com', cssclass:'login-button', customtrigger:'true'},
			chk01:{name:'Online Banking (INTERNATIONAL)',description:'Digital banking for non-UK clients',url:'https://onlinebanking.coutts.com/auth/login', cssclass:'login-button-large', customtrigger:'true'},
			chk02:{name:'Coutts Bankline',description:'Digital banking for Commercial clients',url:'https://www.bankline.coutts.com/bankline/coutts/default.jsp', cssclass:'login-button', customtrigger:'false'},
			chk03:{name:'Courtesy of Coutts',description:'Our card loyalty programme',url:'https://www.courtesyofcoutts.com/', cssclass:'login-button', customtrigger:'false'},
			chk04:{name:'Business Cards',description:'Manage your business cards online',url:'https://cardsonline-commercial.com/RBSG_Commercial/Login.do?promoCode=Coutts', cssclass:'login-button', customtrigger:'true'},
			chk05:{name:'Online Verification',description:'Protect your cards against unauthorised use online',url:'http://www.coutts.com/private-banking/banking-services/cards/online-verification/', cssclass:'login-redirect', customtrigger:'true'},
			chk06:{name:'Knowledge Exchange',description:'Multimedia online learning resource',url:'https://knowledge.coutts.com/', cssclass:'login-button', customtrigger:'true'}
		},
		
		init:function() {
			var obj = this;
			var $login = $('a.btnLogin');
		
			obj.configureLoginBtn();
			
			//if there are no login prefs set, clicking opens overlay
			$login.click(function(){
					
				if(!$.loginPanel.hasPreferences()) {
					$.loginPanel.editPreferences();
					return false;
				}
				if(obj.preferencesCount() > 1){
					return false;
				}
			//otherwise hover will open menu and overlay is accessed via link in menu	
			}).hover(function(){
				if($.loginPanel.hasPreferences() && obj.preferencesCount() > 1) {
					$login.data('isHovered',true);
					$('div.loginMenu').remove();
					$login.addClass('btnLoginSelected');
					var $menu = $('<div class="loginMenu"><ul/></div>'),
						$edit = $('<li class="edit"><a href="#">Edit my login preferences</a></li>').click(function(){
							$.loginPanel.editPreferences();
							return false;
						});
					$.each($.loginPanel.savedItems(true),function(){
						$menu.find('ul').append('<li><a href="'+$.loginPanel.logins[this]['url']+'" class="'+$.loginPanel.logins[this]['cssclass']+'" rel="'+ $.loginPanel.logins[this]['name'] + '" ct="'+ $.loginPanel.logins[this]['customtrigger'] +'">'+$.loginPanel.logins[this]['name']+'</a></li>');
					});
					$menu.find('ul').append($edit);
					$menu.append('<div class="loginMenuBottom"/>');
					$menu.css({top:$login.offset().top + $login.outerHeight() +'px'});
					
					$menu.hover(function(){
						$login.data('isHovered',true);
					},hide);
					
					$login.parent().append($menu);
					TrackLoginFunction();
				}
			},hide);
			
			
			function hide() {
				$login.data('isHovered',false);
				setTimeout(function(){
					if(!$login.data('isHovered')) {
						$login.removeClass('btnLoginSelected');
						$('div.loginMenu').remove();
					}
				},50);
			}
		},
		
		editPreferences:function(a) {
			this.overlay = $.overlay().load('/include/login.html',function(){$.loginPanel.loaded();});
}, 
		
		loaded:function() {
			var obj = this;
			//debugger;
			
			var $tbody = this.overlay.find('tbody'),
				index = 0;
				
			$.each(this.logins,function(){
				$tr = $('<tr/>');
				$tr.append('<td class="item00"><label for="chk0'+index+'">'+this.name+'</label><span>'+this.description+'</span></td>');
				$tr.append('<td class="item01"><input type="checkbox" id="chk0'+index+'" /></td>');
				//$tr.append('<td class="item02"><span class="button02"><a href="'+this.url+'" onclick="return trackLoginClick(\''+ this.name + '\');">login</a></span></td>');
				$tr.append('<td class="item02"><span class="button02"><a href="'+this.url+'" class="'+this.cssclass+'" rel="'+ this.name+ '" ct="'+ this.customtrigger +'">login</a></span></td>');
				$tbody.append($tr);
				index++;
			});
			TrackLoginFunction();
			this.overlay.find('input[type="checkbox"]').each(function(){
				var id = $(this).attr('id');
				if($.loginPanel.saved(id)) {
					$(this).attr('checked',true);
				}
				$(this).click(function(){
					$.loginPanel.saved(id,$(this).is(':checked'));
				});
			});
			
			this.overlay.find('input[type="submit"]').click(function(){
				$.loginPanel.setPreferences();
				obj.configureLoginBtn();
				return false;
			});
			
			this.update();
		},
		
		configureLoginBtn:function(){
			var $login = $('a.btnLogin');
			if ($.loginPanel.hasPreferences()) {
				//button becomes a specific login with no menu and link appears to the left
				if (this.preferencesCount() == 1) {
					if (!$login.next().hasClass('editPrefsLink')) {
						$('<a href="#" class="editPrefsLink">Edit my login preferences</a>').click(function(){
							$.loginPanel.editPreferences();
							return false;
						}).insertAfter($login);
					}
					var item = this.savedItems()[0];
					$login.find('span:last').html(this.logins[item].name + ' login').attr('href', this.logins[item].url)
					$login.removeClass('hasPreferences');
					$login.attr('href', this.logins[item].url);
				}
				else {
					$login.addClass('hasPreferences');
					$login.find('span:last').html('client login');
					$login.next().remove();
				}
			}
			else {
				$login.removeClass('hasPreferences');
				$login.find('span:last').html('client login');
				$login.next().remove();
			}
		},
		
		update:function() {
			var itms = this.savedItems();
			this.overlay.find('.loginPreviewContent').empty();
			switch(itms.length){
				case 0:
					this.overlay.find('.loginPreviewContent').append('<p>Please select the online services you would like to appear in your client login list</p>');
					break;
				case 1:
					this.overlay.find('.loginPreviewContent').append('<span class="previewButton">'+$.loginPanel.logins[itms[0]]['name']+'</span>')
					break;
				default:
					var $ul = $('<ul/>');
					$.each(itms,function(){
						$ul.append('<li>'+$.loginPanel.logins[this]['name']+'</li>');
					});
					this.overlay.find('.loginPreviewContent').append($ul).append('<div class="previewListBottom"/>');
					break;
			}
		},
		
		saved:function(name,val) {
			if(typeof val != 'undefined') {
				this.logins[name]['saved'] = val;
				this.update();
			}
			return this.logins[name]['saved'];
		},
		
		savedItems:function(cookie) {
			var tmp = [];
			if(cookie) {
				this.getPreferences();
			}
			for(var i in this.logins) {
				if(this.logins[i]['saved']) {
					tmp.push(i);
				}
			}
			return tmp;
		},
		
		hasPreferences:function() {
			return !!$.cookie(this.cookiename);
		},
		
		preferencesCount:function(){
			return this.savedItems(true).length;
		},
		
		setPreferences:function() {
			$.cookie(this.cookiename,this.savedItems().join(),{expires:this.duration,path:'/'});
			this.overlay.trigger('overlay.close');
			return false;
		},
		
		getPreferences:function() {
			tmp = $.cookie(this.cookiename).split(',');
			for(var i=0;i<tmp.length;i++) {
				this.logins[tmp[i]]['saved'] = true;
			}
		}
		
	}	
	
})(jQuery);

