/*
* Copyright (C) 2009 Joel Sutherland.
* Liscenced under the MIT liscense
* TODO:
* 1. Create API
* 2. Address accesibility automatically
* 3. Make object oriented
*/
(function($) {
    $.fn.zoommap = function(settings) {
        settings = $.extend({
            zoomDuration: 1000,
            zoomClass: 'zoomable',
            popupSelector: 'div.lots',
            popupCloseSelector: 'a.close',
            bulletWidthOffset: '10px',
            bulletHeightOffset: '10px',
            showReturnLink: true,
            returnId: 'returnlink',
            returnText: 'Return to Previous Map'
        }, settings);

        $(this).each(function() {
            var map = $(this);
            $(this).data('currentId', '');

            function showMapById(id) {
                var region = findRegion(settings.map, id);
                if (region != -1) {
                    displayMap(region);
                }
            }

            // recursive id find
            function findRegion(root, id) {
                if (root.id == id) {
                    return root;
                } else {
                    if (root.maps != undefined) {
                        for (var i = 0; i < root.maps.length; i++) {
                            var possible = findRegion(root.maps[i], id);
                            if (possible != -1)
                                return possible;
                        }
                    }
                }
                return -1;
            }

            // region is a map
            // This gets called every time we zoom
            function displayMap(region) {
                //Set Current Region Id
                $(this).data('currentId', region.id);

                // hack to prevent this happening twice
                if($('#mainMap').attr('src') == region.image){
                    return;
                }

                // clear main div of all elements and reload with
                // current regions image
                map.empty();
                
                $('<img />').attr({
                    id: 'mainMap',
                    src: region.image,
                    useMap: region.usemap
                }).appendTo(map);

				//$('#mainMap').load(function(){
				//	loadRegionData(region);
				//});
				
                var check = map.css('background-image');

                //Load RegionData
                loadRegionData(region);
            }
            /************************************************************************************/


            //Show Return Link
            function showReturnLink(region) {
                map.append('<a id="' + settings.returnId + '">' + settings.returnText + '</a>');
                $('#' + settings.returnId).hide().fadeIn().click(function() {
                    showMapById(region.parent);
                    var releaseid = region.id.split('-')[1];
                    updateReleaseHeader(releaseid, false);
                });
            }

			// call listlots again to get next set
			PageClick = function(pageclickednumber, region) {
				loadLotsList(region, pageclickednumber);				
			}
			
			function loadLotsList(region, pagenumber){
			
				//$('#precinctList').empty();
				$('#precinctList').load(region.datalist, region.datalistparams + '&pagesize=' + region.lotpagesize + '&pagenumber=' + pagenumber, function(){
                
					// setup each submap as an item to click
                    if (region.maps != undefined) {
                        for (var i = 0; i < region.maps.length; i++) {
                            addZoom(region.maps[i]);
                        }
                    }
                    
                    // wire up RHS reserve links
					$('#precinctList').children('.row').each(function(){
						var link = $(this).find('.reserve'); 
						$(link).children('a').click(function(){ 
							var id = $(this).attr('id').split('-');
							showPopup(id[1]);
						});
					});
					
					// setup paging
					var releaseid = region.id.split('-')[1];
					$.get("handler/ReleaseInfo.ashx?releaseid=" + releaseid, function(result){
						var oResult = eval('(' + result + ')'); 
						var totalpages = Math.ceil((oResult.lotcount / region.lotpagesize));
						if(totalpages == 1) totalpages = 0;
						$("#pager").pager({ pagenumber: pagenumber, pagecount: totalpages, region: region, buttonClickCallback: PageClick });
					});
					
					updateReleaseHeader(releaseid, true);
							
                });
                
			}
			
            //Load the Bullets
            function loadRegionData(region) {

                var url = region.data;

				// load the lots list for right hand side
				// + wire up zoom events for loaded 'view' links
                loadLotsList(region, 1);

                if (url != '') {
					
					// change instruction text
					$('.selectmessage').html('<p style="padding-top: 2px;">Click on a green dot for more lot information.</p><p>To reserve a lot click on the green dot to make your request and we&#39;ll be in touch.</p>');
					
					var releaseid = region.id.split('-')[1];
					
                    // place a div inside the 'map' div and load
                    // content into it. 
                    $('<div />').attr({
                        id: 'dataDiv'
                    }).appendTo(map);

                    $('#dataDiv').load(url, '', function() {
                        //place bullets
                        $(this).children('a.bullet').each(function() {
                            var coords = $(this).attr('rel').split('-');
                            $(this).css({ left: addpx(Number(coords[0]) - rempx(settings.bulletWidthOffset)), top: addpx(Number(coords[1]) - rempx(settings.bulletHeightOffset)) })
						   .hide()
						   .click(function() { showPopup($(this).attr('id')); })
						   .fadeIn('fast');
                        });
                        
                        // update status on all lot bullets
						var element = $(this);
                        $.get("handler/LotStatus.ashx?releaseid=" + releaseid, function(result){
				
							var oResult = eval('(' + result + ')'); 
												
							$(element).children('a.bullet').each(function(){
																
								var lotid = $(this).attr('id');
								var status;
																						
								for(var i=0;i<oResult.total;i++){
									if(oResult.lots[i].id == lotid){
										status = oResult.lots[i].status.toLowerCase();
										break;
									}
								}
								
								$(this).attr('class',status);
							});
							
						});
                        
                        // load reservation form
                        $(this).find('#lot-reserve-form').load('lotConfig/points/reserve-form.htm','',function(){
							// wire up form submission and validation
							$.validator.setDefaults({
								submitHandler: function() {
									submitReservationForm();
								}
							});
							$(this).find('#the-reserve-form').validate();
                        });
                        
                        //Create Return Link
                        if (settings.showReturnLink && region.parent != undefined) {
                            showReturnLink(region);
                        }

                    });
                    
                } else {

                    //Set up each image map hotspot as item to click to show
                    //resulting release lot map
                    if (region.maps != undefined) {
                        for (var i = 0; i < region.maps.length; i++) {
                            addZoom(region.maps[i]);
                        }
                    }
                    
                    // change instruction text
					$('.selectmessage').html('<p style="padding-top: 22px;">Move your mouse over the map and click for more information.</p>');
					
                    
                    //Create Return Link
                    //if (settings.showReturnLink && region.parent != undefined) {
                    //    showReturnLink(region);
                    //}
                }
                
            }

            function showPopup(id, leftbul, topbul) {

                map.find(settings.popupSelector).fadeOut();
                
				var formid = '#reservation-form';
				
				// load form values via ajax call
				loadReservationForm(formid, id);
				
                $(formid).fadeIn();
                $(settings.popupCloseSelector).click(function() {
                    $(this).parent().fadeOut();
                });
                
                $('.formsummaryclose').click(function() {
					$('#reservation-form').fadeOut();
                });
                
            }
            
            function updateReleaseHeader(releaseid, full)
            {
				$.get("handler/releaseInfo.ashx?rid=" + releaseid, function(result)
				{
					var oResult = eval('(' + result + ')'); 
				
					if(full)
					{	
						$('.subtitle').html('<h2>' + oResult.precinct + ' - ' + oResult.release + '</h2>');
						  Cufon.replace('h2', {
							fontFamily: 'LTFeltpen', hover: true
						  });
					}
					else
					{
						$('.subtitle').html('<h2>' + oResult.precinct + '</h2>');
						  Cufon.replace('h2', {
							fontFamily: 'LTFeltpen', hover: true
						  });
					}
				
				});
            }
            
            function loadReservationForm(formid, lotid){
				
				// reset form values
				resetReservationForm(formid);
								
				$.get("handler/LotInfo.ashx?lotid=" + lotid, function(result){
				
					var oResult = eval('(' + result + ')'); 
					
					$(formid).find('#reserve_lotid').attr('value', lotid);
					$(formid).find('.header').html(oResult.precinct + ' ' + oResult.release + ' ' + oResult.lotNumber);
					$(formid).find('#lot_status').html(oResult.status);
					$(formid).find('#lot_area').html(oResult.area);
					$(formid).find('#lot_price').html(oResult.price);
					
					if(oResult.image != ''){
						$(formid).find('.popupcontent-right').children('img').attr('src', oResult.image);
					}else{
						$(formid).find('.popupcontent-right').children('img').attr('src', settings.noLotImage);
					}
					
					if(oResult.lotPlanFile != ''){
						$(formid).find('#lot_plan').attr('href',oResult.lotPlanFile);
						$(formid).find('#lot_plan').html('<a href=' + oResult.lotPlanFile + ' target=_blank>Download Lot Plan</a> <img src=images/lotmanager/icon_adobe.gif>(' + oResult.lotPlanFileSize + 'k)');
					}
					
					$(formid).find('#reserve_comments').val('Please contact me in relation to my request to reserve Lot ' + oResult.lotNumber + ' for 48 hours.');
					
				});
            }
            
            function resetReservationForm(formid){
				$(formid).find('#reserve_name').attr('value','Name');
				$(formid).find('#reserve_email').attr('value','Email');
				$(formid).find('#reserve_contactno').attr('value','Contact No');
				$(formid).find('#reserve_comments').attr('value','Comments');
				$(formid).find('#lot_plan').html('');
				
				hideFormResult();
            }
            
            function submitReservationForm(){ 

				var formid = '#reservation-form';
				
				var query = '';
				
				query += 'lotid=' + $(formid).find('#reserve_lotid').val();
				query += '&name=' + $(formid).find('#reserve_name').val();
				query += '&email=' + $(formid).find('#reserve_email').val();
				query += '&contactno=' + $(formid).find('#reserve_contactno').val();
				query += '&comments=' + $(formid).find('#reserve_comments').val();
				
				$.get('handler/LotReserveFormHandler.ashx?' + query);
				
				showFormResult();
			}
			
			function showFormResult(){
				var width  = 800;
				var height = 200;
				var left   = (screen.width  - width)/2;
				var top    = (screen.height - height)/2;

				//$('.popupcontent-left').hide();
				//$('.popupcontent-right').hide();
				//$('#popupcontent_submitresult').show();
				window.open("reserve-thanks.htm", "ThankYou", "toolbar=0, location=0, menubar=0, directories=0, resizable=0, scrollbars=0, width=" + width + ", height=" + height + ",top=" + top + ", left=" + left );
				
			}
			
			function hideFormResult(){
				$('.popupcontent-left').show();
				$('.popupcontent-right').show();
				$('#popupcontent_submitresult').hide();
			}

            function addZoom(region) {

                // find the associated image map area
                // its ID should be the same as region.id
                var mapArea = $('#' + region.id);

                // image map area click event
                // to load image and zoom in 
                $(mapArea).click(function() {
                
					//displayMap(region);
					
                    // setup id for image placeholder to be inserted as 
                    var imgid = '#img-' + region.id;

                    // check if we have added this image already, we dont want to add again
                    var img = $(imgid);
                    if (img.attr('id') == undefined) {
                        img = $('<img />').addClass(settings.zoomClass)
					    .attr({
					        src: settings.blankImage,
					        id: 'img-' + region.id
					    }).css({
					        position: 'absolute',
					        width: region.width,
					        height: region.height,
					        top: region.top,
					        left: region.left,
					        cursor: 'pointer'
					    }).appendTo(map);
                    }

                    //$(this).siblings().fadeOut();
                    img.hide().attr('src', region.image).load(function() {

                        $(imgid).fadeIn('slow').animate({
                            width: settings.width,
                            height: settings.height,
                            top: '0px',
                            left: '0px'
                        }, settings.zoomDuration, '', function() { displayMap(region); });

                    });

                });
                
                
                // wire event up to 'view' links in rhs
                $('#view_' + region.id).click(function() {

                    // setup id for image placeholder to be inserted as 
                    var imgid = '#img-' + region.id;

                    // check if we have added this image already, we dont want to add again
                    var img = $(imgid);
                    if (img.attr('id') == undefined) {
                        img = $('<img />').addClass(settings.zoomClass)
					    .attr({
					        src: settings.blankImage,
					        id: 'img-' + region.id
					    }).css({
					        position: 'absolute',
					        width: region.width,
					        height: region.height,
					        top: region.top,
					        left: region.left,
					        cursor: 'pointer'
					    }).appendTo(map);
                    }

                    //$(this).siblings().fadeOut();
                    img.hide().attr('src', region.image).load(function() {

                        $(imgid).fadeIn('slow').animate({
                            width: settings.width,
                            height: settings.height,
                            top: '0px',
                            left: '0px'
                        }, settings.zoomDuration, '', function() { displayMap(region); });

                    });

                });
                
                
                // wire event up to 'release name' links in rhs
                $('#name_' + region.id).click(function() {

                    // setup id for image placeholder to be inserted as 
                    var imgid = '#img-' + region.id;

                    // check if we have added this image already, we dont want to add again
                    var img = $(imgid);
                    if (img.attr('id') == undefined) {
                        img = $('<img />').addClass(settings.zoomClass)
					    .attr({
					        src: settings.blankImage,
					        id: 'img-' + region.id
					    }).css({
					        position: 'absolute',
					        width: region.width,
					        height: region.height,
					        top: region.top,
					        left: region.left,
					        cursor: 'pointer'
					    }).appendTo(map);
                    }

                    //$(this).siblings().fadeOut();
                    img.hide().attr('src', region.image).load(function() {

                        $(imgid).fadeIn('slow').animate({
                            width: settings.width,
                            height: settings.height,
                            top: '0px',
                            left: '0px'
                        }, settings.zoomDuration, '', function() { displayMap(region); });

                    });

                });
 
            }

            function rempx(string) {
                return Number(string.substring(0, (string.length - 2)));
            }

            function addpx(string) {
                return string + 'px';
            }

            function showHash(string) {
                string = string.replace('#', '');
                showMapById(string);
            }

            //initialize map
            var hash = self.document.location.hash;
            if (hash.length > 0)
                showHash(hash);
            else {
                displayMap(settings.map);
            }

            return this;
        });
    }
})(jQuery);