<script>
var IRShopper = function () {
 
    var defaults = {};
 
    var $ = function (el) {
        return document.getElementById(el);
    };
 
    var attachEvent = function (ev, el, cb) {
        if (el.addEventListener) {
            el.addEventListener(ev, cb, false);
        } else if (el.attachEvent) {
            el.attachEvent('on' + ev, cb);
        }
    };
 
    var defaultInput = function (args) {
        var el = $(args.id);
 
        if (!el) return false;
 
        if (el.value == '') el.value = args.value;
        if (args.classBlur) el.className = args.classBlur;
 
        attachEvent('blur', el, function () {
            if (el.value !== '') return;
            el.value = args.value;
            if (args.classBlur) el.className = args.classBlur;
        });
 
        attachEvent('focus', el, function () {
            if (el.value !== args.value) return;
            el.value = '';
            if (args.classFocus) el.className = args.classFocus;
        });
    };
 
    var submit = function () {
        query(
            $('item').value,
            $('min_price').value,
            $('max_price').value
        );
    };
 
    var query = function (q, min, max) {
 
        if (q.length === 0) {
            $('results').innerHTML = 'Please supply an item name!';
            return;
        }
 
        $('shopper-spinner').style.display = 'inline';
        $('shopper-status').innerHTML = 'Fetching...';
 
        var callback = function (req) {
 
            $('shopper-status').innerHTML = 'Processing...';
 
            var complete = function (results) {
 
                if (!results) {
                    results = 'No items, try again?';
                } else {
                    results = '<div class="clear"></div>' + results;
                }
 
                $('results').innerHTML = results;
                $('shopper-status').innerHTML = '';
                $('shopper-spinner').style.display = 'none';
                $('item').focus();
 
            };
 
            if (
                !req.hasOwnProperty("data") || !req.data
            ) return complete(false);
 
            var data = req.data,
                results = '',
                auctions = [],
                items = data.value.items,
                i = 0,
                l = items.length;
 
            if (!data.count) complete(false);
 
            $('shopper-status').innerHTML = 'Processing ' + data.count + ' items...';
 
            results += 'Found ' + data.count + ' items on eBay. Auctions ending sooner appear first.';
 
            for (; i < l ; i++) auctions.push(items[i].description);
 
            var START = '<div class="ebay-item">',
                END = '</div>';
 
            results += START + auctions.join(END + START) + END;
 
            complete(results);
 
        };
 
        if (min.charAt(0) === 'M') min = 0;
        if (max.charAt(0) === 'M') max = 9999999;
 
        q = encodeURIComponent(q);
        min = encodeURIComponent(min);
        max = encodeURIComponent(max);
 
        var url = 'http://pipes.yahoo.com/pipes/pipe.run?MaxPrice=' + max + '&MinPrice=' + min + '&_id=1c67a784df61eb40cf46224adf6f5011&_render=json&textinput1=' + q;
 
        var params = {};
        params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
        params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.NONE;
 
        gadgets.io.makeRequest(url, callback, params);
    };
 
    var announce = function () {
 
        var callback = function (req) {
            if (req.hadError()) $('shopper-status').innerHTML = 'Not shared, login first!';
        };
 
        $('shopper-status').innerHTML = 'Posted!';
 
        var activity = {},
            item = $('item').value;
 
        if (item.length === 0) {
            $('shopper-status').innerHTML = 'Nothing to share!';
            return;
        }
 
        activity[opensocial.Activity.Field.TITLE] = 'Found a great deal on ' + item + ' using Shopper!';
        activity[opensocial.Activity.Field.BODY] = 'Search eBay and get what you want with Shopper!';
        activity[opensocial.Activity.Field.URL] = '';
 
        opensocial.requestCreateActivity(
            opensocial.newActivity(activity),
            opensocial.CreateActivityPriority.HIGH,
            callback
        );
 
    };
 
    var setQuery = function (q) {
        defaults.query = q;
    };
 
    var init = function () {
 
        $('results').innerHTML = 'Type an item!';
 
        attachEvent('submit', $('shop'), function (e) {
            e.preventDefault();
            submit();
        });
 
        attachEvent('click', $('shop-announce'), announce);
 
        defaultInput({
            id: 'min_price',
            value: 'Minimum Price ($)',
            classFocus: 'shop-focus',
            classBlur: 'shop-blur'
        });
 
        defaultInput({
            id: 'max_price',
            value: 'Maximum Price ($)',
            classFocus: 'shop-focus',
            classBlur: 'shop-blur'
        });
 
        // ImageCache workaround
        var img = document.createElement('img');
        img.src = 'http://apps.idearefuge.com/spin.gif';
        $('shopper-spinner').appendChild(img);
 
        if (defaults.hasOwnProperty("query")) {
            $('item').value = defaults.query;
            // Invoking submit immediately causes unexpected behavior.
            // setTimeout makes submit work as expected.
            window.setTimeout(submit, 0);
            return;
        }
 
        $('item').focus();
    };
 
    return {
        init: init,
        setQuery: setQuery
    }; 
 
}();
 
gadgets.util.registerOnLoadHandler(IRShopper.init);
 
</script>
<style>
body {
    margin: 0;
    padding: 0;
}
 
#ir-app {
    font-family: Helvetica, Arial, sans-serif;
}
 
h1, h2, h3 {
    margin: 0;
    padding: 0;
}
 
a {
    color: #369;
}
 
#hd {
    color: #369;
    background: #d4ebe0;
    padding: 15px 15px 10px;
    border-bottom: 1px solid #ccc;
}
 
#shopper {
    padding: 5px;
    margin: 0;
}
 
#shopper form {
    margin: 0;
}
 
h1 {
    letter-spacing: -1px;
}
 
#ir-app h1, #hd span {
    font-style: italic;
    display: inline;
    padding-right: 5px;
}    
 
#listings {
    padding: 3px 5px 3px;
    border-top: 1px solid #ccc;
}
 
#ft {
    padding: 20px 5px;
    text-align: center;
    text-transform: uppercase;
    font-size: 70%;
    color: #ccc;
}
 
#ft a {
    color: #bbb;
}
 
#ft, .clear {
    clear: both;
}
 
.ebay-item {
    float: left;
}
 
.ebay-item td {
    padding: 0;
    margin: 0;
    font-size: 70%;
    display: block;
    width: 100px;
    height: 100px;
}
 
.shop-blur {
    color: #666;
    text-transform: uppercase;
}
 
.shop-focus {
    color: #000;
    text-transform: none;
}
 
.hide {
    display: none;
}
 
#shopper-spinner {
    margin: 5px auto;
    text-align: center;
}
</style>
<div id="ir-app">
<div id="hd">
    <h1>Shopper!</h1>
    <span>Fast visual eBay shopping</span>
</div>
<div id="bd">
    <div id="shopper">
    <form id="shop">
            <label for="item">Find: </label>
            <input type="text" id="item">
            <label for="min_price" class="hide">Min: $</label>
            <input type="text" id="min_price" value="" size="15">
            <label for="max_price" class="hide">Max: $</label>
            <input type="text" id="max_price" value="" size="15">
            <input type="submit" value="Go!">
            <input type="button" value="Announce" id="shop-announce">
            <span id="shopper-spinner" style="display:none;"></span>
            <span id="shopper-status"></span>
        </form>
    </div>
    <div id="listings">
        <div id="results">
            Loading...
        </div>
    </div>
</div>
<div id="ft">
    A <a href="http://reidburke.com/">Reid Burke</a> App
    &mdash; <a href="http://github.com/reid/shopper">Source on GitHub</a>
    &mdash; <a href="http://pipes.yahoo.com/">Yahoo! Pipes</a>, <a href="http://ebay.com/">eBay</a>, and <a href="http://developer.yahoo.com/yap/">YAP</a>
    &mdash; &copy; 2009
</div>
</div>