var url = window.location.protocol + '//' + window.location.host + '/';
var selector;

var createSelector = function(owner){
    if (!owner.hasClass('comingsoon')) {
        var x = owner.find('.x:first').text();
        var y = owner.find('.y:first').text();
        selector = x + 'x' + y;
    }
    else {
        var title = owner.find('.title:first').text();
        selector = title.split(' ').join('');
    }
    return selector;
};

jQuery.fn.addMapPin = function(owner){
    if (!owner.hasClass('comingsoon')) {
        var x = owner.find('.x:first').text();
        var y = owner.find('.y:first').text();
        var title = owner.find('.title:first').text();
        
        $('<div>').attr({
            'id': selector,
            'class': 'location-button'
        }).css({
            'position': 'absolute',
            'left': x + 'px',
            'top': y + 'px'
        }).text(title).appendTo(this);
        
        // == Create the map pin requests
        $('#' + selector).hover(function(){
            $(this).addClass('hover');
        }, function(){
            $(this).removeClass('hover');
        });
    }
};

jQuery.fn.addLocation = function(owner){
    var title = owner.find('.title:first').text();
    var address = owner.find('.address:first').text();
    var postcode = owner.find('.postcode:first').text();
    var description = owner.find('.description:first').text();
    var mapReference = owner.find('.mapReference:first').text();
    
    var obj = $('<div>');
    var p_tag = $('<p>').css('display', 'none');
    if (owner.hasClass('comingsoon')) {
        $('<h4>').text(title).appendTo(obj);
        $('<div>').text(description).appendTo(p_tag);
        p_tag.appendTo(obj);
        obj.attr('class', selector).appendTo(this);
    }
    else {
        $('<h4>').text(title).appendTo(obj);
        $('<div>').text(title + ' ' + postcode).appendTo(p_tag);
        $('<div>').text(address).appendTo(p_tag);
        $('<div>').text('Melways Ref. Map ' + mapReference).appendTo(p_tag);
        p_tag.appendTo(obj);
        obj.attr('class', selector).appendTo(this);
    }
};

jQuery.fn.addHoverEvent = function(owner){
    this.hover(function(){
        selector = $(this).attr('id') || $(this).attr('class');
        
        if (!owner.hasClass('comingsoon')) {
            $('#' + selector).addClass('hover');
        }
        $('.' + selector).find('p').toggle('fast');
    }, function(){
        if (!owner.hasClass('comingsoon')) {
            $('#' + selector).removeClass('hover');
        }
        $('.' + selector).find('p').toggle('fast');
    });
};

jQuery.fn.addClickEvent = function(owner){
    this.click(function(){
        if (!owner.hasClass('comingsoon')) {
            var title = owner.find('.title:first').text();
            var location = owner.find('.lightbox .location:first').text();
            var appointment = owner.find('.lightbox .appointment:first').text();
            var map = owner.find('.lightbox .map:first').text();
            
            var container = $('<div>').css('width', '100%');
            var description = $("<p>").text(location).appendTo(container);            
            
            $('.ui-dialog-title').text(title);
            
            if (appointment) {
                $('<br />').appendTo(description);
                $("<p>").text(appointment).appendTo(description);
            }
            
            var displayHomes = $("<p>").attr('class', 'view').text('Display Homes at this location: (click to view)').appendTo(container);
            var anchor = $('<a>').attr({
                'class': 'house-link',
                'href': url + map
            }).appendTo(displayHomes);
            
            if ($.browser.msie && $.browser.version < 7) {
                $('<img>').attr('src', '/templates/hamlan/images/locations/earth-ie.png').appendTo(anchor);
            }
            else {
                $('<img>').attr('src', '/templates/hamlan/images/locations/earth.png').appendTo(anchor);
            }
            
            owner.find('.house').each(function(){
                var title = $(this).find('.title').text();
                var image = $(this).find('.image').text();
                var houseLinkId = $(this).find('.houseLinkId').text();
                var anchor = $('<a>').attr({
                    'class': 'house-view',
                    'href': url+houseLinkId
                }).appendTo(container);
                
                $('<img>').attr('src', url+image).appendTo(anchor);
                $('<span>').text(title).appendTo(anchor);
            });
            
            
            $('#popupDialog').html(container).show().dialog('open');
            return false;
        }
    });
};

jQuery(function($){
    // == Create the dialog dimensions
    $("#popupDialog").dialog({
        modal: true,
        autoOpen: false,
        width: 400,
        resizable: false
    });
    
    // == Populate the map
    
    $('.city').each(function(){
        var owner = $(this);
        // == See if the house is coming soon or not        
        var locationType = (owner.hasClass('comingsoon')) ? '.coming-soon' : '.display-home';
        
        // == Create the selector
        var selector = createSelector(owner);
        
        // == Create the map pins
        $('.display-location-wrapper').addMapPin(owner);
        
        // == Create the description in the location area
        $(locationType).addLocation(owner);
        
        // == Add the pin hovers and description toggles
        $('#' + selector + ', .' + selector).addHoverEvent(owner);
        $('#' + selector + ', .' + selector).addClickEvent(owner);    
    });
    
});