var Stereo = {	
	
		initGame: function() {
			this.setupDraggables();
			this.setupDroppables();
		},//end of initGame function
		
		setupDroppables: function() {
			$(".droppable").droppable({
				tolerance: "touch",
				drop: function(e, ui) {
					var _this = $(this);
					if(_this.data("object-type") == ui.draggable.data("object-type")) {
						var _target = $("#target-" + ui.draggable.data("object-type"));
						
						if(ui.draggable.data("swap-image") && !ui.draggable.data("swapped")) {
						
							var srcTemp = ui.draggable.attr("src");
							ui.draggable.attr("src", ui.draggable.data("swap-image"));
							ui.draggable.data("swap-image", srcTemp);
							ui.draggable.data("swapped", true);
						}
						
						ui.draggable.data("isOut", false)
						ui.draggable.animate({
							left: _target.position().left,
							top: _target.position().top
						});
					}
				},
				out: function(e, ui) {
					ui.draggable.data("isOut", true);
				}
			});
		},

		setupDraggables: function() {
			var _draggables = $(".draggable");
		
			_draggables.each(function(index, value) {
				var _this = $(this);

				_this.data({
					swapped: false,
					isOut: true,
					origin: {
						left: _this.position().left,
						top: _this.position().top
					}
					
				});

				_this.draggable({
					containment: 'parent',
					stop: function(e, ui) {
						var _this = $(this);
						
						if(_this.data("isOut")) {
						
							_this.animate(_this.data("origin"));
							
							if(_this.data("swap-image") && _this.data("swapped")) {
								var srcTemp = _this.attr("src");
								_this.attr("src", _this.data("swap-image"));
								_this.data("swap-image", srcTemp);
								_this.data("swapped", false);
							}																					
						}
					}
				});
			});//end of each
		},//end of setupDraggabels
		
		getBrowser: function() {
			var  bjs = {};
			var N= navigator.appName, ua= navigator.userAgent, tem;
			var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
			if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
				M= M? [M[1], M[2]]: [N, navigator.appVersion,'-?'];
				bjs= { 'name' : M[0] , 'version' : M[1] };  
				
			return bjs;
		}//end of getBrowser function		
	}; //end of Stereo
	
	function appendBackLink(){
		var backlink  = '<a href="/electricity-all-around-us/circuits-circuit-symbols" id="back-link">BACK TO PREVIOUS PAGE</a>';
		var delay = null;
		if($(window).width() < 800){
			$('body').append(backlink);
			$('#back-link').css({fontFamily: 'sans-serif' , color: '#0769AD', fontWeight:900, display:'block', marginTop:'15px'});
		}
		clearTimeout(delay);
		$(window).on('resize',function(){
			delay = setTimeout(function(){
				if($(this).width()<800){
					if($('#back-link').length==0){
						$('body').append(backlink);
						$('#back-link').css({fontFamily: 'sans-serif',color: '#0769AD',fontWeight:900, display:'block', marginTop:'15px'});
					}
				}	
				else{
					if($('#back-link').length!=0)
						$('#back-link').remove();
				}	
			},500)	
		});
	}	
	
	$(window).on('load', function() {
		appendBackLink();
		Stereo.initGame();
	})