$(document).ready(function() {
    // Setup the buttons to call our new Alert/Prompt/Confirm methods
    $('#alert').click(function() {
        Alert('Custom alert() functions are cool.');
    });
    $('#prompt').click(function() {
        Prompt('How would you describe qTip2?', 'Awesome!', function(response) {
            // do something with response
        });
    });
    $('#confirm').click(function() {
        Confirm('Click Ok if you love qTip2', function(yes) {
            // do something with yes
        });
    });

    $('#modal').qtip({
        id: 'modalwindow', // Since we're only creating one modal, give it an ID so we can style it
        content: {
            text: $('div#modalwindow'),
            title: {
                text: 'Modal qTip',
                button: true
            }
        },
        position: {
            my: 'center', // ...at the center of the viewport
            at: 'center',
            target: $(window)
        },
        show: {
            event: 'click', // Show it on click...
            solo: true, // ...and hide all other tooltips...
            modal: true // ...and make it modal
        },
        hide: false,
    });

    $('#settingsbutton').qtip({
        id: 'settings', // Since we're only creating one modal, give it an ID so we can style it
        content: {
            text: '<img class="spinner" src="images/blank.gif"/><span class="spinnertext"> Loading...</span>',
            ajax: {
                url: 'load.php?page=settings',
                once: false,
            },
            title: {
                text: 'Settings',
                button: true
            }
        },
        position: {
            my: 'center', // ...at the center of the viewport
            at: 'center',
            target: $(window)
        },
        show: {
            event: 'click', // Show it on click...
            solo: true, // ...and hide all other tooltips...
            modal: true // ...and make it modal
        },
        hide: false,
    });

    $(".context").contextMenu({
        menu: 'torrentControl'
    },
    function(action, el, pos) {
        alert("Action: " + action + "\n\n" +
              "Element ID: " + $(el).attr("id") + "\n\n" +
              "X: " + pos.x + "  Y: " + pos.y + " (relative to element)\n\n" +
              "X: " + pos.docX + "  Y: " + pos.docY+ " (relative to document)"
        );
    });

    $('#slider').slider({
            steps: 1,
            animate: 'false',
            min: 1,
            max: 31,
            value: 2,
            range: 'min',
            slide: function(event, ui) {
                $('.ui-slider-handle').qtip({
                    content: {
                        text: ui.value,
                    },
                    position: {
                        at: 'top center',
                        my: 'bottom center',
                        target: $('.ui-slider-handle')
                    }
                })
            }
    });
});

function dialogue(content, title) {
    $('<div />').qtip({
        content: {
            text: content,
            title: title
        },
        position: {
            my: 'center', at: 'center', // Center it...
            target: $(window) // ... in the window
        },
        show: {
            ready: true, // Show it straight away
            modal: {
                on: true, // Make it modal (darken the rest of the page)...
                blur: false // ... but don't close the tooltip when clicked
            }
        },
        hide: false, // We'll hide it maunally so disable hide events
        events: {
            // Hide the tooltip when any buttons in the dialogue are clicked
            render: function(event, api) {
                $('a.button', api.elements.content).click(api.hide);
            },
            // Destroy the tooltip once it's hidden as we no longer need it!
            hide: function(event, api) { api.destroy(); }
        }
    });
}

// Our Alert method
function Alert(message) {
    message = message;
    buttons = '<a class="button regular"><span class="inner"><span class="label" style="min-width:50px;" nowrap="">Close</span></span></a>';

    dialogue( message + '<br /><br />' + buttons, 'Alert!' );
}

// Our Prompt method
function Prompt(question, initial, callback) {
    var message = $('<p />', { text: question }),
    input = $('<input />', { val: initial }),
    ok = $('<button />', {
        text: 'Ok',
        click: function() { callback( input.val() ); }
    }),
    cancel = $('<button />', {
        text: 'Cancel',
        click: function() { callback(null); }
    });

    dialogue( message.add(input).add(ok).add(cancel), 'Attention!' );
}

// Our Confirm method
function Confirm(question, callback) {
    // Content will consist of the question and ok/cancel buttons
    var message = $('<p />', { text: question }),
    ok = $('<button />', {
        text: 'Ok',
        click: function() { callback(true); }
    }),
    cancel = $('<button />', {
        text: 'Cancel',
        click: function() { callback(false); }
    });

    dialogue( message.add(ok).add(cancel), 'Do you agree?' );
}