// JavaScript Document
// Create the tooltips only on document load
$(document).ready(function () {
	//$('#map').supersleight({shim: 'images/transparent.gif'});
    $('#williston').qtip({
        api: {
            beforeShow: function () {

                $('.qtip-wrapper').css('top', '0px')
				//position: relative and top: 150px
            }

        },
        content: {

            // Set the text to an image HTML string with the correct src URL to the loading image you want to use
            text: '<img class="throbber" src="images/throbber.gif" alt="Loading..." />',
            url: $('#williston').attr('rel'),
            // Use the rel attribute of each element for the url to load
            title: {
                text: $('#williston img').attr("alt"),
                // Give the tooltip a title using each elements text
                button: '<img onclick="return false;" style="border:0;" src="/images/close.png" alt="Close" />' // Show a close link in the title
            }
		},

        position: {
			target: $('#williston'),
            corner: {
                tooltip: 'leftTop',
                // Use the corner...
                target: 'topLeft' // ...and opposite corner
            },
            adjust: {
                x: 10,
                y: 2
            }
        },

        show: {
           when: 'click',
            solo: true // Only show one tooltip at a time
        },
        hide: { when: 'unfocus', fixed: true }  , 

        style: {
            tip: true,
            // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
                width: 0,
                radius: 4
            },
            name: 'light',
            // Use the default light style
            height: 250,
            width: 238
        }
    })


    $('#willistonoffice').qtip({
        api: {
            beforeShow: function () {

                $('.qtip-wrapper').css('top', '0px')
            }

        },
        content: {

            // Set the text to an image HTML string with the correct src URL to the loading image you want to use
            text: '<img class="throbber" src="images/throbber.gif" alt="Loading..." />',
            url: $('#willistonoffice').attr('rel'),
            // Use the rel attribute of each element for the url to load
            title: {
                text: $('#willistonoffice img').attr("alt"),
                // Give the tooltip a title using each elements text
                button: '<img onclick="return false;" style="border:0;" src="images/close.png" alt="Close" />' // Show a close link in the title
            }
		},

        position: {
            corner: {
                tooltip: 'leftTop',
                // Use the corner...
                target: 'topLeft' // ...and opposite corner
            },
            adjust: {
                x: 10,
                y: 2
            }
        },

        show: {
           when: 'click',
            solo: true // Only show one tooltip at a time
        },
        hide: 'unfocus',

        style: {
            tip: true,
            // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
                width: 0,
                radius: 4
            },
            name: 'light',
            // Use the default light style
            height: 250,
            width: 238 // Set the tooltip width

        }
    })

    $('#postle').qtip({
        api: {
            beforeShow: function () {
                $('.qtip-wrapper').css('top', '0px')
            }
        },


        content: {

            // Set the text to an image HTML string with the correct src URL to the loading image you want to use
            text: '<img class="throbber" src="images/throbber.gif" alt="Loading..." />',
            url: $('#postle').attr('rel'),
            // Use the rel attribute of each element for the url to load
            title: {
                text: $('#postle img').attr("alt"),
                // Give the tooltip a title using each elements text
                button: '<img onclick="return false;" style="border:0;" src="images/close.png" alt="Close" />' // Show a close link in the title
            }
        },
        position: {
            corner: {
                tooltip: 'leftMiddle',
                // Use the corner...
                target: 'topLeft' // ...and opposite corner
            },
            adjust: {
                x: 10,
                y: 2
            }
        },

        show: {
           when: 'click',
            solo: true // Only show one tooltip at a time
        },
        hide: 'unfocus',

        style: {
            tip: {
                corner: 'leftMiddle',
                size: {
                    x: 30,
                    y: 12
                }
            },
            // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
                width: 0,
                radius: 4
            },
            name: 'light',
            // Use the default light style
            height: 250,
            width: 238 // Set the tooltip width
        }
    })


    $('#denver').qtip({
        api: {
            beforeShow: function () {
                $('.qtip-wrapper').css('top', '40px')
            }
        },


        content: {

            // Set the text to an image HTML string with the correct src URL to the loading image you want to use
            text: '<img class="throbber" src="images/throbber.gif" alt="Loading..." />',
            url: $('#denver').attr('rel'),
            // Use the rel attribute of each element for the url to load
            title: {
                text: $('#denver img').attr("alt"),
                // Give the tooltip a title using each elements text
                button: '<img onclick="return false;" style="border:0;" src="images/close.png" alt="Close" />' // Show a close link in the title
            }
        },
        position: {
            corner: {
                tooltip: 'leftMiddle',
                // Use the corner...
                target: 'topLeft' // ...and opposite corner
            },
            adjust: {
                x: 10,
                y: 2
            }

        },

        show: {
           when: 'click',
            solo: true // Only show one tooltip at a time
        },
        hide: 'unfocus',

        style: {


           tip: {
                corner: 'leftMiddle',
                size: {
                    x: 30,
                    y: 12
                }
            },
            // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
                width: 0,
                radius: 4
            },
            name: 'light',
            // Use the default light style
            height: 250,
            width: 238 // Set the tooltip width
        }
    })

    $('#northward').qtip({
        api: {
            beforeShow: function () {
                $('.qtip-wrapper').css('top', '-50px')
            }
        },

        content: {

            // Set the text to an image HTML string with the correct src URL to the loading image you want to use
            text: '<img class="throbber" src="images/throbber.gif" alt="Loading..." />',
            url: $('#northward').attr('rel'),
            // Use the rel attribute of each element for the url to load
            title: {
                text: $('#northward img').attr("alt"),
                // Give the tooltip a title using each elements text
                button: '<img onclick="return false;" style="border:0;" src="images/close.png" alt="Close" />' // Show a close link in the title
            }
        },
        position: {
            corner: {
                tooltip: 'leftMiddle',
                // Use the corner...
                target: 'topLeft' // ...and opposite corner
            },
            adjust: {
                x: 10,
                y: 2
            }

        },

        show: {
           when: 'click',
            solo: true // Only show one tooltip at a time
        },
        hide: 'unfocus',

        style: {
            tip: {
                corner: 'leftMiddle',
                size: {
                    x: 30,
                    y: 10
                }
            },
            // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
                width: 0,
                radius: 4
            },
            name: 'light',
            // Use the default light style
            height: 250,
            width: 238 // Set the tooltip width
        }
    })

    $('#permian1').qtip({


        api: {
            beforeShow: function () {
                $('.qtip-wrapper').css('top', '-50px')
            }
        },


        content: {

            // Set the text to an image HTML string with the correct src URL to the loading image you want to use
            text: '<img class="throbber" src="images/throbber.gif" alt="Loading..." />',
            url: $('#permian1').attr('rel'),
            // Use the rel attribute of each element for the url to load
            title: {
                text: $('#permian1 img').attr("alt"),
                // Give the tooltip a title using each elements text
                button: '<img onclick="return false;" style="border:0;" src="images/close.png" alt="Close" />' // Show a close link in the title
            }
        },
        position: {
            corner: {
                tooltip: 'leftMiddle',
                // Use the corner...
                target: 'topLeft' // ...and opposite corner
            },
            adjust: {
                x: 12,
                y: 2
            }

        },

        show: {
           when: 'click',
            solo: true // Only show one tooltip at a time
        },
        hide: 'unfocus',

        style: {
            tip: {
                corner: 'leftMiddle',
                size: {
                    x: 30,
                    y: 8
                }
            },
            // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
                width: 0,
                radius: 4
            },
            name: 'light',
            // Use the default light style
            height: 250,
            width: 238 // Set the tooltip width
        }
    })

    $('#permian2').qtip({
        api: {
            beforeShow: function () {
                $('.qtip-wrapper').css('top', '-50px')
            }
        },

        content: {

            // Set the text to an image HTML string with the correct src URL to the loading image you want to use
            text: '<img class="throbber" src="images/throbber.gif" alt="Loading..." />',
            url: $('#permian2').attr('rel'),
            // Use the rel attribute of each element for the url to load
            title: {
                text: $('#permian2 img').attr("alt"),
                // Give the tooltip a title using each elements text
                button: '<img onclick="return false;" style="border:0;" src="images/close.png" alt="Close" />' // Show a close link in the title
            }
        },
        position: {
            corner: {
                tooltip: 'leftMiddle',
                // Use the corner...
                target: 'topLeft' // ...and opposite corner
            },
            adjust: {
                x: 5,
                y: 2
            }

        },

        show: {
           when: 'click',
            solo: true // Only show one tooltip at a time
        },
        hide: 'unfocus',

        style: {
            tip: {
                corner: 'leftMiddle',
                size: {
                    x: 30,
                    y: 12
                }
            },
            // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
                width: 0,
                radius: 4
            },
            name: 'light',
            // Use the default light style
            height: 250,
            width: 238 // Set the tooltip width
        }
    })

    $(".officemark").hover(function () {

        $(this).css({
            'z-index': '10'
        }); /*Add a higher z-index value so this image stays on top*/
        $(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/

        .animate({
            width: '20px',
            /* Set new width */
            height: '20px'
            /* Set new height */

	}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */

    }, function () {
        $(this).css({
            'z-index': '0'
        }); /* Set z-index back to 0 */
        $(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/
        .animate({
            width: '15px',
            /* Set width back to default */
            height: '15px' /* Set height back to default */

        }, 400);
    });

    $(".placemark").hover(function () {

        $(this).css({
            'z-index': '10'
        }); /*Add a higher z-index value so this image stays on top*/
        $(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/

        .animate({
            width: '27px',
            /* Set new width */
            height: '27px'
            /* Set new height */

	}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */

    }, function () {
        $(this).css({
            'z-index': '0'
        }); /* Set z-index back to 0 */
        $(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/
        .animate({
            width: '15px',
            /* Set width back to default */
            height: '15px' /* Set height back to default */

        }, 400);
    });
});