$(document).ready(function()
{
	var S = 
	{
		ii: $("#ii"),	
		// os select	
		os: 						$('#devicesOs'),  	
		rootOs:						$('#devicesOs option[value="1"]'),
		osId:						1,

		// search field
		search:						$("#search"),

		// Device list
		devListBlock:				$("#devicesSelectList"),
		devItems:					$("#devicesSelectList #list div"),

		// Device Images
		devImg:						$("#devicesBox #deviceItems div"),
		devImgWidth:				100,
		
		devImgBlock:				$("#devicesBox #deviceItems"),
		devImgBlockWidth:			0, 
		devImgBlockWidthReal:		0,

		// features
		featTable:					$("#featTable"),
		deviceFeatureList:			$("#featureList"),
		wellcome:					$("#welcomeMess"),
		noDev:						$("#noDeviceMess"),
		devFeatBlock:				$("#featuresItems"),	
		reportForm:					$("#reportForm"),
		
		lang:						$("#dev_lang").text()
	};


// EVENTS

	// OS Selector change event
	S.os.change(function()
	{
		S.search.val('');
		H.filterDeviceListByOs();
	});
	
	// search event
	S.search.keyup(function (e)
	{
		var keycode = e.keyCode;
		if (!(	keycode === 9 || 
				keycode === 13 || 
				keycode === 16 || 
				keycode === 17 || 
				keycode === 18 || 
				keycode === 38 || 
				keycode === 40 || 
				keycode === 224	))
		{
			H.searchInVisebleItems();
		}
	});
	
	// click on device list item event
	S.devItems.click(function()
	{
		// hide no device mess
		S.noDev.hide();	
		
		// get selected image & list item
		devItem		= $(this);		
		devImage 	= $("#devicesBox #deviceItems #id_" + this.id);
		
		// set list item
		H.setDevItemSelected(devItem);
		
		// set image item
		H.setDevImgSelected(devImage);
		
		// set device image block position
		H.setDevImgCenterPos(devImage);

		// hide wellcome message
		S.wellcome.hide();
		S.featTable.show();
		
		// empty features block 
		S.devFeatBlock	.empty()
						.addClass('loading');
		
		// get features
		H.displayDevFeat(this.id);
		
	});

	// HELPER FUNCTION
	
	H = 
	{
		// filter by Os		
		filterDeviceListByOs: function()
		{
			// hide no device mess
			S.noDev.hide();	
			
			// hide features table
			S.featTable.hide();
			
			// show wellcome message
			S.wellcome.show();
			
			// get selected os id
			S.osId = S.os.val();

			if(S.osId == '1')
			{
//				set viseble devices - all
				S.devItems.show();
				
				// set viseble devices images - all
				S.devImg.show();	
			}
			else
			{
				// hide all
				S.devItems.hide(); 										
				S.devImg.hide();
				
				// show neded
				$("#devicesSelectList #list .os_" + S.osId).show();
				$("#devicesBox #deviceItems .os_" + S.osId).show();
			}
			H.reCalImgBlock();
		},

		// re calculate device image box width	
		reCalImgBlock: function()
		{
			if(jQuery.browser.opera == false)
			{
				var devicesImg 			= $("#devicesBox #deviceItems div:visible");

				S.devImgBlockWidth  = (devicesImg.length * S.devImgWidth)+0;
				
				if(jQuery.browser.msie == true)
				{
					S.devImgBlockWidth = S.devImgBlockWidth + 3;
				}	
				
				S.devImgBlock.css("width", S.devImgBlockWidth);
			}	
		},
		
		// search in visible	
		searchInVisebleItems: function()
		{
			S.devImg.hide();

			sStr = S.search.val().toLowerCase() ;
			osId = S.os.val();
			osIdStr = 'os_' + osId;

			S.devItems.each(function()
			{
				valStr = this.innerHTML.toLowerCase();
				
				if(valStr.match(sStr) == null)
				{
					this.style.display="none";
				}
				else
				{	
					if(osId == 1)
					{
						$('#devicesBox #deviceItems #id_' + this.id).show();
						this.style.display="block";
					}
					else 
					{
						if(osIdStr == $(this).attr('class')){
							$('#devicesBox #deviceItems #id_' + this.id).show();
							this.style.display="block";
						}	
					}	
				}
			});
			
			H.reCalImgBlock();			
			
			S.featTable.hide();
			
			devicesImg = $("#devicesBox #deviceItems div:visible");
			
			if(devicesImg.length == 0)
			{
				S.wellcome.hide();
				S.noDev.show();
			}
			else
			{
				S.wellcome.show();
				S.noDev.hide();
			}
		},

		// set device list item selected		
		setDevItemSelected: function(item)
		{
			S.devItems.removeClass('selected');
			item.removeClass('hover').addClass('selected');
		},

		// remove device list item selected		
		remDevItemSelected: function()
		{
			S.devItems.removeClass('selected');
		},
		
		// set device image item selected	
		setDevImgSelected: function(item)
		{
			if(jQuery.browser.opera == true || jQuery.browser.msie == true)
			{
				S.devImg.removeClass('selectedImg');
				item.addClass('selectedImg');
			}else{
				S.devImg.removeClass('selected');
				item.addClass('selected');
			}
		},

		// remove device image item selected	
		remDevImgSelected: function(item)
		{
			S.devImg.removeClass('selected');
		},
		
		setDevImgCenterPos: function(selItem)
		{
			if(jQuery.browser.opera == true)
			{
				ofTop = selItem[0].offsetTop;
				goTo = ofTop-10;
				if(goTo < 0)
				{
					goTo = 0;
				}
				$("#devicesBox").scrollTo({ top:goTo, left:0}, 500);
			}
			else
			{
				ofLeft = selItem[0].offsetLeft;

				if(ofLeft < 200)
				{
					goTo = 0;
				}
				else
				{
					goTo = ofLeft-150;
				}	
				
				if((goTo + 450) > S.devImgBlockWidth )
				{
					goTo = S.devImgBlockWidth - 400;
				}

				$("#devicesBox").scrollTo({ top:0, left:goTo}, 500);
			}
		},
		

		setDevItemCenterPos: function(selItem)
		{
			selItemPos		= selItem.position();

			S.devListBlock.scrollTo({ top: selItemPos.top, left:0},300);
		},
		
		
		setDevImgClickAction: function()
		{
			S.devImg.click(function()
			{
				// get selected image & list item
				selImageItem	= $(this);
				
				devListItem		= $('#devicesSelectList #list #' + this.id.replace("id_", "") );
				
				// set list item
				H.setDevItemSelected(devListItem);
						
				// set device image block position
				H.setDevItemCenterPos(devListItem);

				// set image item
				H.setDevImgSelected(selImageItem);
				
				// hide wellcome message
				S.wellcome.hide();
				S.featTable.show();
				
				// empty features block 
				S.devFeatBlock  .empty()
								.addClass('loading');
				
				// get features
				H.displayDevFeat(this.id.replace("id_", ""));
			});
			
			S.devImg.dblclick(function() {
				// get selected image & list item
				selImageItem	= $(this);
				
				devListItem		= $('#devicesSelectList #list #' + this.id.replace("id_", "") );
				
				// set list item
				H.setDevItemSelected(devListItem);
						
				// set device image block position
				H.setDevItemCenterPos(devListItem);

				// set image item
				H.setDevImgSelected(selImageItem);
				
				// hide wellcome message
				S.wellcome.hide();
				S.featTable.show();
				
				// empty features block 
				S.devFeatBlock  .empty()
								.addClass('loading');
				
				// get features
				H.displayDevFeat(this.id.replace("id_", ""));
			
			});
		},
		
		displayDevFeat: function(devId){
			$.ajax({
				type: "POST",
				url: "/eltima/devices/get_features/" + S.lang + "/",
				data: "devid=" + devId,
				success: function(html){
					S.devFeatBlock.removeClass('loading');
					S.devFeatBlock.empty();
					S.devFeatBlock.append(html);
				}
			});
		}
		
		
		
		
		
	};

/*
 *  INIT 
 */
	S.rootOs.attr('selected','selected');
	
	// reset live search
	S.search.val('');
	
	// focusing live search control
	S.search[0].focus();						
	
	// get images
	$.ajax({
		type: "POST",
		url: "/eltima/devices/get_images/",
		success: function(html){
			S.devImgBlock	.removeClass('load')
							.append(html);
			

			//$(document).pngFix();	

			
			S.devImg = $("#devicesBox #deviceItems div");
			
			if(jQuery.browser.opera == true)
			{
				$("#devicesBox").css("width","415px");
				$("#devicesBox").css("margin-left","-10px");
			}
			else
			{
				H.reCalImgBlock();
			}
			
			H.setDevImgClickAction();
		}
	});
	
	
	$(".reportLink").click(function()
	{
		toDo = this.rel;
		
		if(toDo == 'close')
		{
			S.reportForm.animate({ 
		    	height: 0,
		    	top: 235,
		    	opacity: 0
			}, 500, "linear", function(){
				$("#formCont").animate({ 
					opacity: 1
				}, 0, "linear", function(){
					$("#formCont").show();
					$("#message").hide();
					$(".reportLink[rel='open']").attr('style','display:inline;');				
					$(".reportLink[rel='close']").attr('style','display:none;');
				});
			});
		}
		else
		{
			S.reportForm.animate({ 
		    	height: 250,
		    	top: 0,
		    	opacity: 1
			}, 500, "linear", function(){
				$(".reportLink[rel='close']").attr('style','display:inline;');				
				$(".reportLink[rel='open']").attr('style','display:none;');
			});
		}
	});

	$("#deviceSubmit").click(function()
	{
		name 		= $("input[name='name']").val(); 
		lastname 	= $("input[name='lastname']").val(); 
		email 		= $("input[name='email']").val(); 
		device 		= $("input[name='device']").val(); 
		note 		= $("textarea[name='note']").val(); 

		if(lastname == "")
		{
			if(device == "")
			{
				$("input[name='device']").addClass('req');
			}
			else
			{
				S.reportForm.addClass('loading');
				
				$("#formCont").animate({ 
					opacity: 0
				}, 500,	"linear", function(){
					$("#formCont").hide();
				});
				
				$("input[name='device']").removeClass('req');
				$.ajax({
					type: "POST",
					url: "/eltima/form/report_device/",
					data: "name=" + name + "&email=" + email + "&device=" + device + "&note=" + note,
					success: function(html)
					{
						S.reportForm.removeClass('loading');
						$("#message").show();
					}
				});
			}
		}
	});
	
// Design
	// mouse over event
	S.devItems.mouseenter(function()
	{
		if(!$(this).hasClass('selected'))
		{
			$(this).addClass('hover');			
		}
	}).mouseleave(function()
	{
		$(this).removeClass('hover');
	});	
	
	ResizeToInner();
});





function ResizeToInner () {

	var w = window.outerWidth;
	var h = window.outerHeight;
	
	var wd = document.width;
	var hd = document.height;
	
	
	window.resizeTo(605+(w-wd), 512+(h-hd));
	
}