// Copyright 2014 Jason Woofenden -- Public Domain (CC0)

// This file contains helpers for using stylus in your project.
//
// Put something like this in your styl.styl:
//     @require 'inc/wfpl/stylus-helpers.styl'


// set units to px if it doesn't have a unit already
_px(i)
	unit(i) == '' ? unit(i, px) : i

// transparently support vender-specific tags
border-radius()
	-webkit-border-radius: arguments
	border-radius: arguments
box-shadow()
	-webkit-box-shadow: arguments
	box-shadow: arguments
box-sizing()
	-webkit-box-sizing: arguments
	-moz-box-sizing: arguments
	box-sizing: arguments
user-select()
	-webkit-user-select: arguments
	-moz-user-select: arguments
	-ms-user-select: arguments
	user-select: arguments

// map "whitespace:" to "white-space:"
whitespace()
	white-space: arguments

// helper function
_pos(type, args)
	position: unquote(type)
	for i in (0...length(args))
		if not args[i] is a 'unit'
			{args[i]}: args[i + 1] is a 'unit' ? args[i + 1] : 0

// you can pass directions and units, or just directions. Examples:
//     absolute: top 20px left 0
//     fixed: top right
//     relative: top -4px
absolute()
	_pos('absolute', arguments)
fixed()
	_pos('fixed', arguments)
relative()
	_pos('relative', arguments)

// Specify width and height on the same line
dimensions(w, h)
	width: _px(w)
	height: _px(h)

// Make children of this element inline-blocks that are spaced evenly accross.
//
// To create a minimum distance between: don't use word-spacing, it's broken in
// firefox. Instead, try padding on the children and negative margin on the
// parent.
space_evenly(line_height = 1.2em)
	text-align: justify
	& > *
		display: inline-block
		relative: top line_height
	&:before
		content: ''
		display: block
		width: 100%
		margin-bottom: -(line_height)
	&:after
		content: ''
		display: inline-block
		width: 100%

// image layout: left column has normal, right column hover versions
//
// arguments: width/height are pixel dimensions of a single sprite
//
// markup: put classes n1, n2, etc on the items.
//
// Example
//
//     html:
//         <nav>
//             <ul>
//                 <li class="n0">home</li>
//                 <li class="n1">contact</li>
//             </ul>
//         </nav>
//     styl:
//         nav li
//             sprites_rollover "images/nav.png" 150 35 2
sprites_rollover(image, width, height, count, v_offset = 0, h_offset = 0)
	width: unit(width, px)
	height: unit(height, px)
	background-image: url(image)
	background-position: top left
	background-repeat: no-repeat;
	for n in (0...count)
		&.n{n}
			y = - (@height * n) - unit(v_offset, px)
			background-position: (0 - unit(h_offset, px)) y
			&:hover
				background-position: (0 - unit(h_offset, px) - @width) y
sprite_rollover(image, width, height, v_offset = 0, h_offset = 0)
	sprites_rollover(image, width, height, 1, v_offset, h_offset)

// see sprites_rollover
sprites(image, height, count, v_offset = 0, h_offset = 0)
	height: unit(height, px)
	background-image: url(image)
	background-position: top left
	background-repeat: no-repeat;
	for n in (0...count)
		&.n{n}
			y = - (@height * n) - unit(v_offset, px)
			background-position: (0 - unit(h_offset, px)) y
sprite(image, height, v_offset = 0, h_offset = 0)
	sprites(image, height, 1, v_offset, h_offset)

// Styling for a variable height element with an image background where the
// middle repeats vertically. You must split your image into three images, and
// name them with "-top", "-mid" and "-bot" suffixes (right before the file
// extension.) then pass a filepath as the first argument to this function
// which does not have a suffix.
//
// Example:
//
//     image files:
//         i/foo-top.png  (900x20)
//         i/foo-mid.png  (900xwhatever)
//         i/foo-bot.png  (900x30)
//
//     dom layout: <div id="expando"><div><div><div>...</div></div></div></div>
//
//     Stylus:
//
//         #expando
//            mangin: 10px auto;
//            width: 900px;
//            background_vertical_stretch("i/foo.png", 20, 30)
//
//     Notes:
//
//         You can (optionally) pass 1-4 additional arguments which
//         (effectively) add padding to the inner most div. The default is to
//         have the height and width of the inner div match exactly the outer
//         one. Parameters you specify are relative to that (not the section
//         filled with the "-mid" image).
background_vertical_stretch(image, top_height, bottom_height, top_pad = 0, right_pad = top_pad, bottom_pad = top_pad, left_pad = right_pad)
	top_height = _px(top_height)
	bottom_height = _px(bottom_height)
	top_pad = _px(top_pad)
	right_pad = _px(right_pad)
	bottom_pad = _px(bottom_pad)
	left_pad = _px(left_pad)
	ext = extname(image)
	path = pathjoin(dirname(image), basename(image, ext))

	// bottom image (outermost block)
	background: transparent url(path + '-bot' + ext)
	padding-bottom: bottom_height + 1 // +1 to prevent margin collapsing
	> *
		background: transparent url(path + '-top' + ext) 0 0 no-repeat
		padding-top: top_height + 1 // +1 to prevent margin collapsing
	> * > *
		background: transparent url(path + '-mid' + ext) 0 0 repeat-y;
		margin-top: -1px; // correct for above +1 from top
		margin-bottom: -1px; // correct for above +1 from bottom
		padding: 1px; // to prevent margin collapsing
	> * > * > *
		// all "2px" below are to correct for 1px above padding and below
		padding: 1px;
		margin-top: 2px - top_height + top_pad
		margin-left: left_pad - 2px
		margin-right: right_pad - 2px
		margin-bottom: 2px - bottom_height + bottom_pad
		background: transparent;

li_reset()
	margin: 0
	padding: 0
	list-style: none

// Example:
//     input
//         +placeholder()
//             color: red
placeholder()
	&::-webkit-input-placeholder
		{block}
	&:-moz-placeholder // firefox 4-18
		{block}
	&::-moz-placeholder // firefox 19+
		{block}
	&:-ms-input-placeholder // ie
		{block}

// Example:
//     div.button
//         noselect()
noselect()
	-webkit-touch-callout: none
	-webkit-user-select: none
	-khtml-user-select: none
	-moz-user-select: none
	-ms-user-select: none
	user-select: none