﻿/* Sahar 19/01/2011
	an always-on-top right div which follows the user while scrolling
	and slide inside on mouse over.
	1. import this script
	2. call: ShopTongue.Init(tongueHTML, bgImage);
			- tongueHTML:	the inner HTML code of the tongue.
			- bgImage:		background image source.
*/

var flagStack = false;	// mouseOver/mouseOut events activation (let the user fill the form even if the mouse out)
var ShopTongue = {
	FixSize: 0,
	AlwaysShownSize: null,	// the size of the always-shown div
	AlwaysHiddenSize: 20,
	ExtraAlwaysShownSizeWhenFull: 15,
	Init: function(tongueHTML, bgImage){
		var tongue = $('<div></div>').attr('id','ShopTongue')
										.css({'direction':'ltr','position':'absolute','top':'50%','right':'0','z-index':'999','width':'338px','height':'153px','background':'yellow','margin':'-150px 0 0 -260px','margin-right':'-260px','background':'url(' + bgImage + ') no-repeat','font-family':'Arial','cursor':'default'})
										.click(function(){
											flagStack = true;	// disable the mouseOut event
										})
										.prependTo('body');
		ShopTongue.FixSize = parseInt($(window).height()/2);
		ShopTongue.AlwaysShownSize = parseInt( tongue.width() - Math.abs(parseInt(tongue.css('marginLeft'))) );// + AlwaysHiddenSize;
		ShopTongue.FillData();
		ShopTongue.bindEvents();
		if ($.browser.msie) {	// handle IE misunderstanding of maths
			ShopTongue.AlwaysHiddenSize = 80;
		}
	},
	bindEvents: function(){
		var tongue = $('#ShopTongue');
		$(window).scroll(function(){	// make the div follow the user while scrolling
			tongue.animate({
					top: parseInt(ShopTongue.FixSize+$(window).scrollTop())+'px'
				},{
					queue: false,
					duration: 350
				}
			);
		});
		tongue.hover(function(){
				if (!flagStack)	// slide in on mouseOver
					$(this).animate({ marginRight: -ShopTongue.AlwaysHiddenSize },{
						queue: false,
						duration: 300
					});
			}, function(){	// slide out on mouseOut
				/*if (!flagStack)
					$(this).animate({ marginRight: parseInt((ShopTongue.AlwaysShownSize-$(this).width())) },{
						queue: false,
						duration: 300
					});*/
			}
		);
		$('#ShopTongue input').hover(function(){	// handle the IE bug with input fields over/out events
				if (!flagStack)
					tongue.animate({ marginRight: -ShopTongue.AlwaysHiddenSize },{
						queue: false,
						duration: 300
					});
			}, function(){
				/*if (!flagStack)
					tongue.animate({ marginRight: parseInt((ShopTongue.AlwaysShownSize-$(this).width())) },{
						queue: false,
						duration: 300
					})*/;
			}
		);
	},
	FillData: function(){
		var tongue = $('#ShopTongue');
		// concatenating the inner HTML into div and styling it
		tongueHTML = "<div style='margin: 15px 80px 0px 80px; width: 235px; color: #201d1d; font-family: Century Gothic; font-size: 8pt;'>" + tongueHTML + "</div>";
		tongue.html(tongueHTML);
		$('#ShopTongue input').css({'width':'111px','height':'17px','border':'1px solid #7a7474'});
		$('#ShopTongue select').css({'width':'111px','height':'17px','border':'1px solid #7a7474','font-size':'6pt'});
		$('body').css({'overflow-x':'hidden','-ms-overflow-x':'hidden'});
		if ($.browser.msie) { // another IE bug got killed
			$('#ShopTongue').css('margin-right', '-315px');
		}
	}
}
